200114(화) : var, let, const 차이

1. var, let, const의 차이

이미 기존에 작성한 글이 있지만, 명확하게 공부하기 위해서 한 번 더 조사한 자료를 토대로 정리한다. var, let, const의 차이를 정확하게 이해하기 위해서는 호이스팅(hoisting), 스코프(scope)에 대해 정확하게 이해하고 있어야 한다. 아래 링크에서 해당 글들에 대한 내용을 확인할 수 있다.

 

• 호이스팅(hoisting)을 정리한 글
• 스코프(scope)를 정리한 글

 

1) Function scope(var) vs. Block Scope(let, const)

• 결론적으로 var은 함수 스코프를 따르고, let과 const는 블록 스코프를 따른다.
• 즉 var로 변수를 선언할 경우, 해당 변수가 선언된 함수가 종료되기 전까지 var로 선언된 변수는 유효하다.
• 따라서 전역 함수의 외부에서 var로 변수를 선언할 경우 모두 전역변수가 되기 때문에 전역변수를 남발할 가능성이 존재한다.

var로 변수를 선언했을 때의 특징은 아래 코드에서 대표적으로 확인할 수 있다.

function foo() {
  for (var i = 0; i < 10; i++) {
    console.log(i + ` is called!`);
  }
  console.log(i); // 10
}

foo();

 

• 변수 i를 var로 선언했기 때문에, foo() 함수 내부에서는 어디에서는 변수 i에 접근이 가능하다.
• 첫 줄의 console.log(i)는 i에 접근은 가능하지만 변수가 초기화되기 이전에 hoisting되면서 undefined일 때 접근한 경우이다.
• 이후 for 문이 종료가 되었음에도 불구하고 맨 마지막 console.log(i)는 10을 출력한다.
• 반면 let과 const는 블록 스코프를 따르게 된다. 블록은 {}를 의미한다.
• 따라서 let과 const로 선언된 변수는 {} 중괄호가 닫힐 경우 스코프가 사라지므로 변수에 대한 접근이 불가능하다.

 

2) Hoisting

• var, let, const는 hoisting의 방식 또한 차이가 난다.(let, const도 hoisting이 발생한다!)
• 코드는 크게 두 개의 단계를 거쳐서 실행이 된다. 1) 코드 실행 전 '생성 단계(creation phase)', 2) 실행 단계 종료 후 실제 코드가 실행되는 '실행 단계(execution phase)'이다.
• 생성단계는 코드 실행에 필요한 변수, 함수 등을 메모리에 등록하는 단계이고, 실행 단계는 실제로 코드를 실행하는 단계이다.
• var의 경우 생성 단계에서 호이스팅이 일어날 때, (1) 변수를 메모리 공간에 할당한 후, (2) 해당 변수의 값을 undefined로 초기화 해 놓는다.
• 반면 let과 const는 생성 단계에서 변수를 메모리 공간에 할당하지만, 변수의 값은 초기화되지 않는다. 값의 초기화는 실제 코드가 실행될 때, 해당 변수가 선언된 장소에 인터프리터가 도달하면 그 때 값이 초기화된다.
• 즉 var와 let, const 모두 스코프에 진입하는 순간 렉시컬 환경에 해당 변수들이 포함되는 것은 동일하지만, let과 const는 어휘적 바인딩이 실행되기 전에는 해당 변수에 대한 액세스가 제한된다.
• 이처럼 변수가 변수 환경에 존재는 하지만, 해당 변수에는 접근하지 못하는 부분을 'Temporal Dead Zone'이라고 부른다.
• 결론적으로 1) var, let, const 모두 호이스팅이 발생하지만, 2) let과 const는 코드가 실제로 실행될 때, 변수가 선언된 위치에 도달해야지만 변수에 접근이 가능하며, 그 전에 변수에 접근할 경우 ReferenceError가 발생한다. 3) 반면 var는 변수가 선언된 위치 이전에 접근을 시도할 경우, 생성단계에서 변수에 초기화된 값인 undefined가 담기게 된다.

 

3) let과 const의 차이

• let은 같은 변수에 다른 값을 재할당하는 것이 가능하며, 변수 선언 시 값을 부여하지 않아도 문제가 없다.
• 반면 const는 한 번 선언한 변수에 다른 값을 재할당하는 것은 불가능하며, 변수 선언 시 값을 부여하지 않을 경우 에러가 발생한다.

 

• 참고 1 : var vs let vs const in JavaScript
• 참고 2 : let, const와 블록 레벨 스코프
• 참고 3 : A brief review of Scoping and Hoisting in JavaScript
• 참고 4 : var, let, const 특징 및 호이스팅