var, let, const의 차이가 뭔가요?

var, let, const의 차이가 뭔가요?

var, let, const는 변수를 선언하는 점은 동일하지만 각각 다른 특성을 가집니다. let과 const는 ES2015(ES6)에서 처음 등장했습니다. 첫번째로는 scope level이 다릅니다. var는 function level scope, let과 const는 block level scope를 가집니다. 두번째로는 hoisting입니다. var는 함수 스코프의 최상단으로 호이스팅 되고 선언과 동시에 undefined 로 초기화 됩니다. let과 const는 블록 스코프의 최상단으로 호이스팅 되고 선언만 되고 값이 할당되기 전까지 어떤 값으로도 초기화되지 않습니다. 세번째로 변수가 globap scope에 선언되었다고 가정했을 때 var는 글로벌 객체로 바인딩이 되지만, let과 const는 바인딩 되지 않습니다. 마지막으로 var는 재선언, 재할당이 모두 가능하고, let은 재할당만 가능하고 const는 모두 불가능합니다.
hoisting이 뭔가요?

호이스팅이란 "끌어올린다" 라는 뜻으로 변수 및 함수 선언문이 스코프 내의 최상단으로 끌어올려지는 현상을 말합니다. 선언은 최상단에서 하지만, 대입은 진행하지 않습니다. var의 경우 hoisting과 동시에 undefined로 초기화가 됩니다. 하지만 let, const는 변수가 선언되기 전까지 어떠한 값도 초기화 되어 있지 않습니다. 그래서 let과 const는 선언문 전에 호출을 하게되면 TDZ의 영향을 받아서 ReferenceError가 발생합니다.

2-1. 선언문과 대입문이 뭔가요? 컴파일러는 자바스크립트 엔진이 인터프리팅(Interpreting)을 하기 전에 컴파일을 하는데 이 때, var a = 2와 같은 구문을 var a / a = 2로 나눈 두개의 구문으로 나누어 둡니다. 이때 var a 부분이 변수 선언문 a = 2 부분이 대입문입니다.

2-2. TDZ가 뭔가요? TDZ 시맨틱은 선언 전에 변수에 접근하는 것을 금지합니다. 실행 컨텍스트가 생성될 때 let/const 변수 선언은 Lexical Environment에 저장됩니다. Lexical Environment에 저장된 변수들은 초기화(값 바인딩)되기 전까지는 접근할 수 없는 상태에 있게 됩니다. 이 상태를 TDZ라고 부릅니다. 반면에 var 변수 선언은 Variable Environment에 따로 저장되며, TDZ에 영향을 받지 않습니다.
scope가 뭔가요?

scope란 변수명, 함수명과 같은 참조대상 식별자를 구별하기 위한 규칙입니다. javascript도 다른 많은 프로그래밍 언어와 마찬가지로 scope를 가지고 있습니다. socpe가 있기 때문에 예상치 못한 곳에서 발생하는 식별자의 충돌을 방지할 수 있습니다. 크게 global, function level, block level scope로 나눌 수 있습니다. global은 코드 어디서나 참조할 수 있는 전역 스코프이고 function level은 함수 내부에서, block level은 if, for문 등으로 생기는 block내부에서 적용됩니다.
재선언과 재할당의 차이가 뭔가요?

재선언은 이미 선언한 변수 명을 다시 선언하는 것을 의미하고, 재할당은 값이 할당된 변수에 다시 값을 할당하는 것을 의미합니다. var는 재선언 재할당이 모두 가능하고, let은 재할당만 가능하고 const는 재선언과 재할당 모두 불가능합니다.

rkskekzzz / frontend-interview-study

var, let, const의 차이가 뭔가요? #2