호이스팅

호이스팅이란 변수나 함수를 스코프 상단으로 끌어올리는 기술입니다.

console.log(a); // undefined

var a = 1;

변수 선언보다 참조하는 문이 코드 순서 상 앞에 있지만, 에러가 발생하지 않고 참조 결과가 undefined로 나옵니다.

호이스팅이 일어났기 때문에 위와 같은 결과가 나옵니다.

변수 생성 단계

변수는 선언-초기화-할당, 3단계를 걸쳐 생성됩니다. 코드 실행 전 선언과 초기화가 이루어집니다. 선언 단계에서 데이터 메모리에 변수를 저장하고 초기화 단계에 undefined를 할당합니다. 그 후 코드가 실행되면서 할당하는 문에서 해당 데이터 값을 할당하게 됩니다.

 

var 키워드로 선언된 변수와 let, const로 선언된 변수의 차이점이 있습니다. var 키워드로 선언된 변수의 경우 위 설명과 같이 초기화 단계에서 undefined 값이 할당됩니다. 그렇기 때문에 코드 상에서 선언된 부분보다 앞에서 변수를 참조할 경우 undefined 값으로 참조할 수 있는 것입니다.

 

let과 const의 경우에는 코드 실행 전 선언 단계가 이루어지지만 초기화 단계는 이루어지지 않습니다. 그렇기 때문에 코드 상에서 선언된 부분보다 앞에서 참조할 경우 참조 에러가 발생하게 됩니다. 호이스팅이 이루어진 것이 아니라 호이스팅은 되었지만 메모리 값이 할당되지 않아 참조할 수가 없는 것입니다. 메모리 선언과 초기화, 할당 그 사이를 TDZ(Temporal Dead Zone)라고 합니다.

함수 생성

함수의 경우에는 선언/초기화/할당 단계가 코드 실행 전 다 진행됩니다. 그래서 코드 상에 함수 선언된 부분보다 앞에서 참조할 경우 undefined가 아닌 함수 내용을 결과값으로 받을 수 있습니다.

console.log(a()); // 1

function a () {
  var a = 1;
  
  return a;
};