Javascript) 변수, 호이스팅, TDZ(Temporal Dead Zone), 생성자 함수

🐣 변수 유형

 JavaScript에는 크게 세 가지 유형의 변수가 존재한다. var, let, const가 있다. let과 const는 ES6부터 사용되기 시작한 변수 타입으로, 기존의 var와는 성격을 달리한다.

var

 ES5까지 변수를 선언할 때 사용하는 키워드로, 중복된 이름의 변수를 정의할 수 있으며, 함수 스코프(Function-level scope)를 가진다.

let

 ES6부터 사용되기 시작한 키워드이다. let으로 변수를 선언할 경우 중복된 이름의 변수를 정의할 수 없으며, let 변수는 블록 스코프(Block-level Scope)를 가진다. 

const

 let과 함께 ES6부터 사용되기 시작한 키워드이다. 그 값이 변하지 않는 상수를 선언할 때 사용되어 중복된 이름의 변수를 선언할 수 없으며, let과 같이 블록 스코프를 가진다.

 

---

🐣 호이스팅

 자바스크립트 및 액션스크립트 코드를 인터프리터가 로드할 때, 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되어 변수의 선언을 항상 컨텍스트 내의 최상위로 끌어올리는 것을 의미한다. 실제로 그 위치가 최상위로 올라가는 것은 아니고, 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것 처럼 동작하는 것을 의미한다.

 

---

🐣 TDZ(Temporal Dead Zone)

 TDZ는 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 의미한다.

 Javascript 변수 유형 중 let과 const는 TDZ의 영향을 받는다. 즉, 할당을 하기 전에는 사용할 수 없다. 이는 코드를 예측 가능하게 하고 잠재적인 버그를 예방할 수 있게 한다.

 아래 코드는 오류를 발생시킨다. 호이스팅은 스코프 단위로 이루어진다. 때문에, 호이스팅되는 데에는 문제가 없다. 다만, 블록 내부에서 name을 할당하고자 하여 해당 자바스크립트 파일이 초기화될 때 블록 내부에서는 name이 호이스팅되면서 할당 전에는 사용할 수 없는 TDZ가 생겨난 것이다.

let name = "Jane";

function showName() {
	console.log(name);
	
	let name = "Mike";
}

 

---

🐣 변수의 생성 과정

 변수는 아래 3 단계를 통해 생성된다.

1. 선언 단계
2. 초기화 단계
3. 할당 단계

var

 var는 선언과 초기화가 함께 이루어진다. 여기서 초기화란 undefined를 할당해주는 것을 의미한다.

1. 선언 및 초기화 단계
2. 할당 단계

let

1. 선언 단계
2. 초기화 단계
3. 할당 단계

const

 선언 + 초기화 + 할당이 하나의 단계에서 함께 이루어진다. 때문에, const 변수를 선언하면서 값을 할당하지 않으면 오류가 발생한다.

 

---

🐣 생성자 함수

 공통된 프로퍼티를 지닌 객체들을 여럿 생성할 경우에는 객체 리터럴 방식이 불편하기 때문에 생성자 함수를 사용하는 것이 편리하다.

특징

• 선언할 경우 첫 글자를 대문자로 사용한다.
• new 연산자를 이용해 객체를 생성한다. (new를 붙이지 않으면 단순히 함수를 호출하는 것으로, 생성자 함수들은 내부에서 무언가를 return하지 않기 때문에, undefined가 나온다.)

function User(name, age) {
	this.name = name;
	this.age = age;
}

let user1 = new User("Mike", 30);
let user2 = new User("Jane", 22);
let user3 = new User("Tom", 17);

 

cf. 객체 리터럴과의 차이

객체 리터럴 형태로 정의한 객체

let user = {
	name : "Mike",
	age: 30
}

 

생성자 함수를 이용해 정의한 객체

function User(name, age) {
	this.name = name;
	this.age = age;
	this.sayName = function() {
		console.log(this.name);
	}
}

let user5 = new User("Han", 40);
user5.sayName(); // Han

 

---

요약

변수 타입

var	let	const
중복된 이름의 변수를 선언할 수 있다. (오류가 발생하지 않는다.)	중복된 이름의 변수를 선언할 수 없다.	중복된 이름의 변수를 선언할 수 없다.
선언하기 전에 사용할 수 있다. (호이스팅 때문) 그러나, 값의 할당도 미리 되어주는 것은 아니므로, 선언 전에 사용하면 undefined를 반환하게 된다.	선언하기 전에 사용할 수 없다. (호이스팅 되는 것은 동일하다. 호이스팅이 되지만 사용 불가한 이유는 TDZ 때문이다.)	선언하기 전에 사용할 수 없다.
함수 스코프(function-scope)를 가진다.	블록 스코프(block-scope)를 가진다.	블록 스코프(block-scope)를 가진다.

호이스팅

스코프 내부 어디서든 변수 선언은 최상위에 선언된 것 처럼 동작하는 것을 의미한다.

TDZ

 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 의미한다.

생성자 함수

 대문자로 시작하는 이름으로 정의한다. 인자로 프로퍼티를 받아, this.프로퍼티명 = 인자명의 형태로 프로퍼티를 할당한다. 객체 리터럴로 객체를 정의하는 방식보다 편리하다.