210807 개발기록: var, let 의 차이(feat. 호이스팅)

 

본 포스팅은 아래의 질문에 대답할 수 있는 개념을 함양합니다.

 

🙋🏻‍♂️ Q.  var 과 let 의 차이는 무엇인가?

😶 A.

스코프의 관점에서, var는 함수 레벨 스코프, let은 블럭 레벨 스코프다.

 

재선언의 관점에서, var 는 이미 선언한 변수를 재선언이 가능하지만, let은 재선언이 불가능하다. let은 재할당만 가능하다 (선언과 할당의 의미를  명확히 이해하자!)

 

🙋🏻‍♂️ Q.  var 과 let 의 변수 생성 과정엔 어떤 차이가 있는가

😶 A.

변수 생성 과정에도 var / let 은 차이가 있다.

우선 변수는 선언 -> 초기화 -> 할당 의 과정을 거치며 생성되는데, 

var 은 선언과 초기화 과정이 동시에 이루어지고, let은 선언과 초기화 과정이 분리되어있다.

 

여기에 호이스팅 (hoisting) 개념을 곁들여 보자. 

 

변수 선언문 보다 먼저 변수를 출력하여도(console.log(foo))) 참조 에러가 발생하는 것이 아닌 undefined 를 출력한다( ➡️ undefined 는 초기화 단계에서 정의된다).

해당 스코프에서 var 로 선언된 foo 가 호이스팅되어, 선언과 초기화가 동시에 이루어 지기 때문이다.

변수가 할당 단계에 도달하면 비로소 할당받은 값을 출력할 수 있게 된다. 

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

선언과 초기화가 동시에 일어나는 var

 

 

반면 let 으로 선언된 변수 foo 는 선언과 초기화가 동시에 이루어지지 않는다.

변수 선언문 이전에 변수에 접근해도, 선언 단계에서 메모리에 참조할 변수가 없기 때문에 (foo 변수가 아직 메모리 공간을 할당받지 못함)  ReferenceError 가 발생한다. 

console.log(foo); // ReferenceError: foo is not defined
let foo;
foo = 1;

또한 코드라인 1에서, 변수 foo 는 일시적 사각지대(TDZ) 에 속하는데, 아직 선언도, 초기화도 이루어지지 않은 상태를 의미한다.

선언과 초기화 단계가 분리된 let

 

 

 

🙋🏻‍♂️ Q. 그렇다면 var 과 let 의 공통점은 무엇인가?

😶 A. 

var / let 은 변수 선언시 초기값을 주지 않아도 되는 공통점이 있다. (반면 const 는 무조건 초기화가 필요하다)