[프론트엔드 면접 문제 은행] var과 let의 차이점

var와 let의 가장 큰 차이점은 변수의 재할당이 가능하다는 것과 function-scoped, block-scoped이다. 말로만 설명하면 이해가 잘 안가니 예제 코드로 한번 살펴보겠습니다.

변수의 재할당 허용

var은 변수 재할당을 허용하지만 let은 변수의 재할당을 허용하지 않는다.

ex)var이 변수 재할당

var answer = 1;
console.log(answer);	//1
var answer = 2;
console.log(answer);	//2

ex)let의 변수 재할당

let answer = 1;
console.log(answer)
let answer = 2;   //Uncaught SyntaxError: Identifier 'answer' has already been declared
console.log(answer)

function-scoped, block-scoped

var은 function-scoped이고 let은 block-scoped이다.

ex) var - function-scoped

function() {
  if(true){
    var answer = 1;
  };
  console.log(answer);	//1
};

ex) let - block-scoped

function() {
 if(true){
   let answer = 1;
 }
 console.log(answer)	//Uncaught ReferenceError: answer is not defined
}

var은 function단위로 끊기 때문에 선언된 최상의 function에서는 어디서든 사용이 가능하다.
let은 block ({})단위로 끊기 때문에 예시를 보면 if안에서만 사용이 가능한것을 볼수 있다.

정리

1. var은 function 단위로 호이스팅 되기에 선언 단계와 초기화 단계가 한번에 이루어져 선언문 이전에도 참조가 가능한데 let은 block단위로 호이스팅 되기 때문에 선언 단계와 초기화 단계가 분리되어 이전에 참조하면 참조에러가 발생한다.
2. var은 처음부터 끝까지 사용할 변수에 적용하는 것이 좋고, block마다 확실하게 스코프에 맞추어 사용하려면 재할당이 안되는 let을 사용하는 것이 좋다.