호이스팅(hoisting)

💡호이스팅 - JavaScript 엔진이 코드를 실행하기 전에 변수 및 함수 선언을 메모리에 끌어올리는 것

 

호이스팅

변수와 함수 선언이 최상단으로 올려지는 현상

console.log(a);

func();

function func() {
  console.log('함수실행');
}

var a = '변수';

위 경우, 함수실행은 제대로 작동하고, 변수는 초기화가 아직 되지 않은 값이라 undefined가 출력된다.

 

 

다시 말해, JavaScript 엔진이 코드를 실행하기 전에 변수 및 함수 선언을 메모리에 끌어올리는 것이다. 즉, 코드 실행 이전에 선언된 변수와 함수가 메모리에 할당되어 그들의 스코프 내에서 어디에서든지 접근할 수 있다.

console.log(x); // undefined
var x = 5;
console.log(x); // 5

위의 코드에서 var x = 5의 선언은 호이스팅 되어 console.log(x); 이전에 접근 가능하지만, 값은 할당되기 전이므로 undefined가 출력된다. 이렇게 선언부가 먼저 호이스팅 되고, 할당은 그 자리에 남아 있게 된다.

 

 

함수 표현식 (함수를 변수에 담아서 그것을 실행하는 경우)으로 작성하면, 호이스팅으로 인해 선언만 먼저 되므로, 에러가 뜬다.

func2();

// 함수 표현식
let func2 = function() {
    console.log('func2');
}

함수 표현식으로 선언했을 때 에러가 나는 이유는 전역 객체에 func2 변수가 생성됐지만, 할당될 함수의 초기화가 아직 안 된 상태에서 호출했기 때문이다.

 

 

func1();

// 함수 선언문
function func1() {
    console.log('func1');
}

반면에 함수 선언문으로 정의한 함수는 함수 객체가 이미 메모리에 올라와 있는 상태에서 호출했기 때문에 정상적으로 호출된 것이다. 즉, 함수 선언은 함수가 호출되기 전에 사용할 수 있다.

 

 

위의 예제에서 func1()를 호출하기 전에 함수 func1의 선언이 호이스팅 되어 있으므로 호출이 가능하다.

 

 

참고 : const, let, const 차이 페이지