[JS] 호이스팅

호이스팅이란?

자바스크립트에서 변수 선언과 함수 선언문을 해당 스코프의 최상단으로 끌어올리는 것

코드 실행전에 실행되며, 변수와 함수를 선언하기 전에도 참조할 수 있도록 한다.

 

변수 호이스팅?

var

변수를 선언한 위치와 상관없이 해당 스코프의 최상단으로 끌어올려지며,

이때 변수에는 undefined가 할당된다.

따라서 변수를 선언하기 전에 참조해도 오류가 발생하지 않는다.

 

let, const

호이스팅이 발생하지만 변수가 선언되기 전에는 일시적 사각지대(TDZ)에 빠져서 참조 할 수 없다.

따라서 변수를 선언하기 전에 참조하면 ReferenceError가 발생한다.

 

const키워드로 선언된 변수는 선언과 동시에 값을 할당해야하기 때문에,

변수에 undefined를 할당 할 수 없다.

 

console.log(a); // undefined
var a = 1;

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 2;

console.log(c); // ReferenceError: c is not defined
const c = 3;

함수 호이스팅?

함수 선언문을 해당 스코프의 최상단으로 끌어올리며, 이때 함수의 전체 코드가 함께 끌어올려진다.

따라서 함수를 선언하기 전에도 호출할 수 있다.

 

하지만 함수 표현식과 화살표 함수 표현식은 호이스팅되지 않는다.

변수에 할당한 함수 표현식은 변수 호이스팅에 의해 선언부만 끌어올려지기 때문이다.

이러한 표현식은 선언 이전에 호출하면 오류가 발생한다.

sayHello(); //hello

function sayHello() {
  console.log('hello');
}

sayHello(); // TypeError: sayHello is not a function
var sayHello = function() {
  console.log('hello');
}

sayHello(); // ReferenceError: Cannot access 'sayHello' before initialization
const sayHello = () => {
  console.log('hello');
}

함수 호이스팅은 함수 호출 전에 선언해야한다는 규칙을 무시한다. 따라서 함수 선언문 대신 함수 표현식을 사용할것을 권장한다.