[JS] let, var, const(+호이스팅, TDZ...)

📌 let, var, const

var를 개선하기 위해 ES6에 등장한 것이 let과 const이다.

• var: 재선언 O, 재할당 O
• let: 재선언 X, 재할당 O
• const: 재선언X, 재할당 O

var a = 1;
var a = 2;	// 재선언
a = 3;		// 재할당

let b = 1;
let b = 2;	// SyntaxError: Identifier 'b' has already been declared
b = 3;

const c = 1;
const c = 2;	// SyntaxError: Identifier 'c' has already been declared
c = 3;		// TypeError: Assignment to constant variable.

 

‼️ var이 가지는 문제점

var myName = "heedonguri";

if (true) {
	var myName = "kong";
    var hello = "hello";
}
console.log(myName);	// kong
console.log(hello));	// hello

• 같은 이름의 변수를 10개 선언해도 문제가 생기지 않는다.
• if 구문 안에서 선언한 변수는 밖에서도 접근 가능하다.
• 선언문이 나오기 전에 변수에 접근이 가능하다.(아래 호이스팅에서 참고)

---

📌 JS에서 변수

🤔 변수란?
하나의 값을 저장하기 위해 확보한 메모리 공간 또는 그 메모리 공간을 식별하기 위해 붙인 이름

 

‼️ 변수 생성 단계

JS에서는 변수는 3단계를 거쳐 생성된다.

1. 선언
   변수 객체를 생성하고 JS 엔진에 변수 객체를 등록
2. 초기화
   JS 엔진에 등록한 변수의 메모리 공간에 undefiend를 할당
3. 할당
   undefined로 초기화된 변수에 실제 값을 할당

var 키워드로 선언된 변수는 선언과 초기화가 같이 이루어진다.

 

반면, let/const 키워드로 선언된 변수는 선언과 초기화가 분리되어 이루어진다.

초기화 단계는 변수 선언문에 도달했을 때 이루어진다.

---

📌 호이스팅

🤔 호이스팅이란?
JS에서 변수나 함수 선언을 코드 최상단으로 끌어올리는 것처럼 동작하는 특징이다.

 

JS 엔진이 코드를 실행하기 전에,

전체 코드를 스캔하고 실행 컨텍스트(=코드가 실행되는 환경)에 기록하기 때문에 생기는 특징이다.

 

따라서 아래의 코드에서 오류가 발생하지 않고 undefined가 출력된다.

선언과 동시에 undefined로 초기화가 이루어졌기 때문에 undefined가 출력된다.

console.log(a)	// undefined
var a = 1;

 

하지만 let/const 키워드로 선언된 변수는 ReferenceError가 발생한다.

console.log(b)	// ReferenceError: Cannot access 'b' before initialization
let b = 2;

console.log(c)	// ReferenceError: Cannot access 'c' before initialization
let c = 3;

let/const는 호이스팅이 안되는건가?라는 생각을 할 수도 있지만,

결론부터 말하자면 var, let, const 모두 호이스팅이 일어난다.

let/const 변수는 선언만!! 되어있기 때문에,

초기화되지 않은 변수에 접근한 결과로 ReferenceError가 발생한다.

이는 TDZ와 관련이 있다.

---

📌 TDZ(Temporal Dead Zone)

console.log(a)	// undefined
var a = 1;

console.log(b)	// ReferenceError: Cannot access 'b' before initialization
let b = 2;

console.log(c)	// ReferenceError: Cannot access 'c' before initialization
let c = 3;

var 키워드로 선언한  'a'는 선언과 초기화가 동시에 이루어졌기 때문에 undefined가 출력된다.

let/const 키워드로 선언한 변수 'b'와 'c'는 선언만 되었고,

변수 선언문에 도달하기 전에 출력을 시도하기 때문에 아직 초기화는 되지 않았다.

따라서 ReferenceError가 일어나게 되는 것이다.

 

이렇게 ReferenceError(참조오류)가 발생하는 구간,

초기화되지 않은 변수에 접근할 수 없는 구간을 TDZ라고 부른다.

(JS에만 있는 개념,, )

---

📌  Scope

🤔 Scope란?
변수에 접근할 수 있는 범위

 

‼️ 함수 Scope와 var

함수 내에서 선언한 변수는 해당 함수 내에서만 접근이 가능하다.

function myFn() {
	var a = 1;
}
console.log(a);		// ReferenceError: a is not defined

a 변수는 myFn 함수 내부에서 선언되었기 때문에, 지역변수이다.

if (true) {
	var myName = "heedonguri";
}
console.log(myName);	// heedonguri

var은 함수 Scope를 가지기 때문에, if문처럼 함수가 아닌 곳에서는 전역변수로 취급된다.

 

‼️ 블록 Scope와 let/const

if (true) {
	let myName = "heedonguri";
    const yourName = "kong";
}
console.log(myName);	// ReferenceError: myName is not defined
console.log(yourName);	// ReferenceError: yourName is not defined

let과 const는 블록 Scope를 가지기 때문에 블록 단위에서 지역변수로 선언된다.

---

var을 사용하면 의도하지 않은 문제들을 직면할 수 있다.

되도록이면 let과 const를 사용하자