[총정리] 변수, 함수에서의 hoisting 현상과 해결

hoisting은 쉽게말해

아래에있는 선언을(만) 끌어올린다.

먼저 변수의 hoisting에 대해 알아보자

//var hoisting
age = 6;
age++;
console.log(age); //7로 정상적으로 실행됨
var age;

아래에있는 선언인 var age; 가 올라가는 hoisting현상으로인해 정상적으로 실행된다. 

하지만 여기서 문제가 있다.

//var의 문제
console.log(name); //선언부인 var name; Bark이던뭐든지간에 undefined
name='Mark';
console.log(name); //Mark
var name = 'Bark';//name = 'Bark'가 되기때문에 혼란야기

초기화부분이 있던 없던 선언부 var name; 만올라가서 혼란을 야기한다.

이는 let으로 문제해결을할수가있다.

//hoisting이 안되는 let으로 문제해결
console.log(birth); //Uncaught ReferenceError: Cannot access 'birth' before initialization
birth = 1992;
console.log(birth);
let birth;

let 사용할 경우 아예 hoisting현상이 안되기 때문에 선언하지않았다는 에러메세지가난다

이제 함수의 hoisting으로 넘어가보자

//함수의 hoisting
//이름이 있는 선언적 함수의 호출을 먼저 hoisting
//자바스크립트의 특성상 함수를 먼저 메모리에 올리는 hoisting현상이 나타남
hello();

function hello(){
    console.log('function hoisting')
}

마찬가지로 함수의 경우에도 hoisting이 적용된다.

단, 함수이름이 있는 선언적함수일 경우에만 문제가 없다.

 

만약 hello2를 변수명으로 선언하는 익명함수에서는 어떻게되는지 확인해보자.

 

먼저 var를 사용한 익명함수의 경우에는 var hello2;가 끌어올려지는 호이스팅문제가 발생한다.

이때의 오류메세지는 hello2 is not a function이 된다.

//var 익명 함수 hoisting의 문제
hello2(); //선언부인 var name;가 끌어올려지는 호이스팅문제 => hello2 is not a function

var hello2 = function (){ //실제로는 hello2 = function(){}의 형태가됨
    console.log('hello2')
}

 

const를 사용한 익명함수의 경우에는 hoisting현상이 일어나지않는다.

때문에 hollo3()는 아예 선언하지않는 함수라고 에러메시지가 출력된다.

//const 익명 함수의 hoisting
hello3();//아예선언하지않은함수라는 메세지 출력 hello3 is not defined 또는 hoisting.js:37 Uncaught ReferenceError: Cannot access 'hello3' before initialization
const hello3 = () => {
    console.log('hello3'); 
}

 

var와 함수의 hoisting은 mdn에도 매우 잘나와있기때문에 참고하자.

https://developer.mozilla.org/ko/docs/Glossary/Hoisting

Hoisting