호이스팅

호이스팅이란

자바스크립트 엔진이 코드를 실행하기 전에 모든 선언에 대해서 수집하는데, 

이때 변수, 함수 등의 선언을 선언된 위치에서 제일 최상단의 위치로 올려서 실행하는 것처럼 하는 것을 말한다.

 

예를 들어 아래와 같은 코드가 있다고 할 때,

showText3('안녕');

function showText3(text){
    console.log(text);
}

console.log(num33);
var num33 = 332;

 

위 코드는 이렇게 실행된다.

//호이스팅 적용된 코드
function showText3(text){
    console.log(text);
}
var num33;

showText3('안녕');
console.log(num33); //undefined
num33 = 332;

선언이 호출보다 위에 위치한 것을 볼 수 있다.

showText3 은 정상 작동을 하게 되고, num33 은 에러가 아닌 undefined를 출력하게 된다.

 

호이스팅 개념을 몰랐다면 실행 전에 에러가 난다고 예상했을 것이다.

 

var와 let/const의 호이스팅 차이

var는 선언 이전에 호출되면 undefined를 출력하며 에러가 발생하지 않지만, let과 const는 초기화가 이루어지지 않고 에러가 발생한다.

 

함수 선언식과 함수 표현식 호이스팅 차이

함수 선언식

함수 전체를 호이스팅 한다.

function addFunc(num){
  return num + 2;
}
console.log(addFunc(4)); //15

function addFunc(num){
  return num + 2 + 9;
}
console.log(addFunc(4)); //15

함수 전체가 맨 위로 올라가기 때문에 두 개의 결과가 같은 것을 볼 수 있다.

 

함수 표현식

선언부만 호이스팅 한다.

var addFunc = function(num){
  return num + 2;
};

console.log(addFunc(4));//6

var addFunc = function(num){
  return num + 2 + 9;
};

console.log(addFunc(4));//15 - 여기부터 영향을 받음.

 

함수 선언식과 함수 표현식은 호이스팅 차이가 있다.

함수 선언식은 맨 위로 올라가서 전체 코드에 영향을 미치고,

함수 표현식은 변수 선언부만 맨 위로 올라가고 할당하는 부분은 원래 자리에 있기 때문에

영향이 그 자리부터 아래로 미친다.

 

이렇게 호이스팅에 따른 영향을 미치는 정도가 다르기 때문에,
복잡하고 규모가 큰 코드일수록 함수 표현식을 활용하는 것이 좋다.