[Javascript] var, let, const 의 호이스팅과 스코프

 자바스크립트를 쓰다보면 크게 세 가지의 변수 선언을 하게 된다. 바로 var, let, const이다. 차이점을 표로 만들어 비교하면 다음과 같다.

	var	let	const
중복 선언	O	X	X
스코프	함수 레벨 스코프	블록 레벨 스코프	블록 레벨 스코프
호이스팅	O	O	O

 호이스팅이란, 자바스크립트 인터프리터가 코드 실행을 위해 스코프 안의 선언들을 모두 스코프 최상단으로 끌어 올리는 것을 말한다. 일반적으로 var를 사용했을 때만 호이스팅이 발생한다고 착각하기 쉬운데, 사실 내부적으로 세 형태 모두 다 호이스팅이 일어난다. 

 var의 경우 선언과 undefined로의 초기화가 동시에 일어난다. 다만 let과 const로 생성된 변수의 경우 이 시점에서 초기화 과정이 일어나지 않고, 이때를 TDZ (Temporal dead zone) 라고 칭한다. 이 상태에서 해당 변수들에 접근시 에러가 발생하게 된다. 

 

 이제 유효 범위 스코프에 대해서 알아보자. insertion sort를 예시로 들어 보자. 아래 코드는 두 번째 반복문의 변수 j에 var를 사용한 코드이다.

const arr = [3, 2, 1, 5, 6, 9, 19, 8, 12];
for (let i = 1; i < arr.length; i++) {
  const key = arr[i];
  for (var j = i - 1; j >= 0; j--) {
    if (arr[j] > key) {
      arr[j + 1] = arr[j];
    } else {
      break;
    }
  }
  arr[j + 1] = key;
}
console.log(arr)

var는 함수 단위의 유효 범위를 가진다. 즉 같은 함수 내에서라면 접근이 가능하다. for문이 종료 된 후에 실행되는 arr[j+1] = key에서 아무런 문제 없이 실행된다.

 

j를 let으로 선언한 코드이다.

const arr = [3, 2, 1, 5, 6, 9, 19, 8, 12];
for (let i = 1; i < arr.length; i++) {
  const key = arr[i];
  let j;
  for (j = i - 1; j >= 0; j--) {
    if (arr[j] > key) {
      arr[j + 1] = arr[j];
    } else {
      break;
    }
  }
  arr[j + 1] = key;
}
console.log(arr)

let은 블록 단위의 스코프이다. 즉 쉽게 말하면 중괄호 단위라고 할 수 있다. for문을 감싼 중괄호가 끝나면 더 이상 접근할 수 없는 것이다. 따라서 let j; 처럼 선언부와 for문을 분리한 모습이다.