자바스크립트 엔진은 코드의 라인 순서와 관계없이 함수 선언식과 변수를 위한 메모리 공간을 먼저 확보한다.
(선언문 해석=>변수초기화=>코드실행 순)
따라서 함수와 변수(var)는 코드의 최상단으로 끌어 올려진 것(hoisted)처럼 보이게 되는데 이를 호이스팅이라고 한다.
다만 var 변수는 선언과 동시에 초기화가 되기 때문에 참조가 가능하지만 let,const 변수는 선언과 초기화가 동시에 일어나지 않기 때문에 참조가 불가능하다.
따라서 변수 오염의 위험성을 줄이기 위해서 가급적이면 let과 const 를 사용하는게 좋다.
함수 선언식과 표현식의 경우에도 호이스팅에서 차이가 있다.
함수 선언식은 식 전체가 끌어올려져 참조가 가능하지만 표현식의 경우는 그렇지 않기 때문에 참조가 불가능하다.
/*
sum이라는 함수를 실행해서 1+3값을 result 에 넣어주려고한다.
하지만 실행해보시면 sum is not a function 이라는 에러가 발생한다..
왜일까??.. sum 이라는 함수는 분명 아래 존재하는데..??
*/
var result = sum(1,3);
var sum = function(num1, num2){
return console.log(num1+num2);
}
// var 로 선언되어있는 녀석들이 맨위로 끌어올려진다. 이때는 변수만 선언될뿐 초기화는 진행되지않는다.
var result = undefined;
var sum = undefined;
result = sum(1,3); // 후에 이렇게 위에 선언된 변수들에 초기화가 이루어진다.
sum = function(num1, num2){
return console.log(num1+num2);
}
console.log(name); //undefined
var name = 'olaf';
var age = 27;
// 코드를 실행하면 undefined로 미리 변수가 생성되고
var name = undefined;
var age = undefined;
name = 'olaf'; // 후에 초기화가 이뤄지기 떄문이다.
age = 27
//함수 선언식에서의 호이스팅은 다르게 동작한다.
var result = sum(1,3); // 이 때는 실행이된다!
function sum(num1, num2){ // var sum 같은 표현식이아닌 함수 선언식으로 되어있기 때문에 함수가 그대로 끌어올려진다.
return console.log(num1+num2);
}위에 코드가 동작하는 이유는 변수호이스팅과 함수호이스팅이 다르기 때문이다.
변수 호이스팅의 경우 undefiend로 변수 생성이 되지만 함수(함수 선언식의 경우) 는 그대로 맨 위로 올라오기 때문이다.
ref) https://simplejs.gitbook.io/olaf/09.-hoisting
