[JS] 자바스크립트 변수와 함수 호이스팅(hoisting)의 차이점

호이스팅 모르면 아래 글 참조

https://deftkang.tistory.com/235

[JS] 자바스크립트 변수 호이스팅(hoisting) 쉽게 이해하기

 

변수 호이스팅은 변수 선언문이 런타임 이전에 실행되어 undefiend로 초기화 되지만 함수 호이스팅은 함수 선언문으로 초기화 된다.

console.log(score); //undefiend
console.log(add(3, 4)); //7
console.log(minus); //undefiend

score = 80;
var score;

function add(x, y) {
    return x + y;
};

var minus = function(x, y) {
    return x - y;
};

console.log(score); //80
console.log(add(3, 4)); //7
console.log(minus(5, 2)); //7

위 코드를 보면 함수 add는 함수 선언문으로 함수를 생성 하였고 함수 minus는 함수 표현식으로 함수를 생성 하였다.

그 결과 add함수는 함수 선언문 자체가 호이스팅이 되어 선언문 전에 함수를 호출이 가능해서 add(3, 4) 결과가 7로 나왔다 하지만 함수 표현식으로 함수를 선언하면 변수 호이스팅과 똑같이 var minus 변수 선언문만 호이스팅 돼서 undeifend로 초기화 된다.

 

위 문제로 함수를 호출하기 전에 반드시 함수를 선언해야 한다는 당연한 규칙을 무시해서 함수 선언문 대신에 함수 표현식을 사용할 것을 권장한다.