호이스팅(hosting)

호이스팅은 변수, 함수 선언문을 실행 단계에서 해당 스코프의 선두로 옮겨진 것처럼 동작하는 특성을 의미한다.

console.log(name); //undefined

const name = "flora";

console.log(name); //flora

변수 호이스팅

변수의 생성 단계

• 자바스크립트에서 변수는 3단계에 걸쳐 생성된다.

선언 단계(Declaration phase)

• 변수 객체에 변수를 등록하는 단계이다.

• 이 변수 객체는 스코프가 참고하는 대상이 된다.

초기화 단계(Initialization phase)

• 변수 객체에 생성된 변수를 메모리에 할당한다.

• 변수는 undefined로 초기화 된다.

할당 단계(Assignment phase)

• 초기화 단계에서 undefined로 초기화된 변수에 값을 할당한다.

const 키워드 변수

• 선언, 초기화, 할당이 동시에 진행된다.

• 상수이며, 재할당을 할 수 없다.

const age; //SyntaxError

선언, 할당이 동시에 이루어지지 않으면 문법 에러가 발생한다.

let 키워드 변수

• let 키워드로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행된다.

• 호이스팅되면서 선언 단계가 이루어지지만 초기화 단계는 실제 코드에 도달했을 때 진행되므로, ReferenceError가 발생하는 것이다.

• 할당을 하기 전에는 사용할 수 없다. (코드 예측 가능, 버그 줄일 수 있음)

• 스코프에 선언단계에서 변수를 등록하지만, 초기화 단계는 변수 선언문에 도달했을 때 이루어진다. 초기화 이전에 변수를 참조하면 참조 에러가 발생한다.

• 시작 지점부터 초기화 지점까지는 변수를 참조할 수 없다. 스코프 시작에서 변수의 선언까지 일시적 사각지대(TDZ)에 빠지기 때문이다.

TDZ(Temporal Dead Zone)은 스코프 시작 지점에서 초기화 시작 지점까지를 말한다.

console.log(name); //ReferenceError: name is not defined

let name; //초기화 단계 실행
console.log(name); //undefined

name= "jane"; //할당 단계 실행
console.log(name);//13

var 키워드 변수

• var는 선언하기 전에 사용할 수 있다.

• var 키워드로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어진다.

• 스코프에 선언 단계에 변수를 등록하고 메모리에 변수를 위한 공간을 확보한다. 그 다음 undefined로 초기화 한다.

console.log(age); //undefined

var age;
console.log(age); //undefined

age= 13; //할당 단계 실행
console.log(age);//13

console.log(age)는 undefined가 출력된다.

그 이유는 선언은 호이스팅 되지만 할당은 호이스팅 되지 않기 때문이다.

함수 호이스팅

function 키워드 함수

• 선언,초기화,할당 단계가 모두 동시에 진행된다.

• 할당 전 호출해도 undefined가 아니라, 함수 내용이 리턴된다.

• 함수 표현식 형태로 선언되는 경우는 호이스팅 되지 않는다.

var res = square(5);

function square(number) {
  return number * number;
}

var res = square(5); // TypeError

var square = function(number) {
  return number * number;
}

함수 표현식의 경우 변수 호이스팅이 발생한다.

변수 호이스팅은 변수 생성, 초기화와 할당이 분리되어 진행되고 호이스팅 된 변수는 undefined로 초기화 되므로 typeError가 발생한다.