자바스크립트 호이스팅

오늘은 자바스크립트 호이스팅에 대해 이야기 해보겠습니다.

자바스크립트에는 호이스팅이라는 것이 있는데, 변수 및 함수를 유효범위 내에 최상단으로 끌어 올리는 것을 말합니다.

함수 호이스팅

b();
function b(){
  console.log('hyj');
};

위 코드를 보면 호출이 함수 선언보다 위에 있지만 함수선언문은 호이스팅으로 인해 유효범위까지 최상단으로 끌어 올려지기 때문에 정상적으로 작동을 합니다.

function b(){
  console.log('hyj');
};
b();

위 코드는 자바스크립트엔진에 의해 호이스팅 된 코드입니다.

변수 호이스팅

  function fruitName(){
	console.log("종류: " + fruit); //종류: undefined
  	var fruit = "포도";
  	console.log("이름: " + fruit);
}
fruitName()

위 코드를 보면 종류는 오류가 날 것 같지만 undefined가 나오는 것을 볼 수 있습니다.

  function fruitName(){
    var fruit; //호이스팅
    console.log("종류: " + fruit); // 종류: undefined 가 나오게 됩니다
    fruit = "포도"; //할당
  	console.log("이름: " + fruit); //이름: 포도
}
fruitName()

위 코드는 자바스크립트엔진에 의해 해석된 코드입니다.
변수 호이스팅에 의해 var fruit는 유효범위인 fruitName함수 내에서 최상단으로 끌어 올려지고, 위에서 선언은 되었지만 할당은 console.log("종류: " + fruit);밑에서 이루어 지기 때문에 종류: undefined라는 결과가 나오게 됩니다.