[JS] 호이스팅(Hoisting)

 

 

 

 

 

0. 호이스팅(Hoisting) 이란?

Hoist는 사전적 의미로 '끌어올리다' 라는 뜻을 갖고 있다.

자바스크립트에서 호이스팅은 선언과 관련이 있는데 ‘변수 선언’과 ‘함수 선언’을 끌어 올린다.

 

• 호이스팅 : 변수 또는 함수를 선언하고 초기화했을 때 선언 부분이 최상단으로 끌어올려지는 현상
• 변수 호이스팅 : 변수의 정의가 그 범위에 따라 선언과 할당으로 분리
• 함수 호이스팅 : 함수 선언문 형태로 정의한 함수는 스크립트 맨 처음부터 실행된다는 개념

 

 

1. 변수 호이스팅

• 변수가 함수 내부에 작성 되었다면, 함수 내부의 최상위에서 선언된 것과 같다.
• 변수가 함수 외부에 작성이 되었다면, 전역 컨텍스트의 최상위에서 선언된 것과 같다.

※ 변수가 선언만 된 것이고 할당된 것이 아니라는 것이 핵심이다.

 

let fun = function(){
console.log(test); // undefined
var test = "hello";
console.log(test); // hello
};

fun();

// test 변수가 나중에 선언되었지만 먼저 선언된 것으로 간주하고 undefined를 출력한다.
// 이것을 호이스팅이라 하는데, 위의 함수는 JS 내부적으로 다음과 같다.

let fun = function(){
var test;
console.log(test); // undefined
test = "hello";
console.log(test); // hello
};
// => 호이스팅의 정의대로 선언과 할당이 분리된다.

 

 var 대신 let을 사용하였을 경우 undefined가 아닌 error가 발생한다.

let fun = function(){
console.log(test); // error : test is not defined
let test = "hello";
console.log(test); // hello
};

fun();

 

 

2. 함수 호이스팅

함수 선언문 형태로 정의된 함수의 유효 범위는 스크립트의 맨 처음에 선언된 것으로 간주한다.

console.log(add(3,5)); // 8

function add(a,b){
return a + b;
}

 

 

 함수 선언문으로 함수를 정의하면 함수 호이스팅에 의해 코드의 구조가 꼬일 수 있다.

경우에 따라 함수 표현식으로 함수를 정의하면 함수 호이스팅이 일어나지 않는다

console.log(add(3,5)); // error : add is not defined

let add = function(a,b){
return a + b;
}

 

 

 

 

 

 

#참고사이트

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