호이스팅
hoist의 뜻은 밧줄이나 장비로 들어올리다,
승강장치 등의 의미를 가지고 있다.
그렇다면 자바스크립트에서 호이스팅은 무엇일까?
호이스팅은 코드에 선언된 함수나 변수를 상단으로 올리는 것을 말한다.
호이스팅은 var변수와 함수에서만 일어난다.
var 호이스팅
실제 코드를 보자
1
2
for (var i = 0; i < 10; i++) {}
console.log(i);
이런 코드를 실행시키면 어떤 결과가 나올까?
에러가 발생할 것 같지만 10이 출력되게 된다.
위의 코드의 실제 실행은
1
2
3
var i;
for (i = 0; i < 10; i++) {}
console.log(i);
이런식으로 되기 때문에 오류가 안나는 것이다.
호이스팅은 이처럼 변수의 정의 부분을 상단으로 올려 실행시켜준다.
정의 부분만 올라가고 값을 할당하느 부분은 그대로 있다.
(실제로 코드가 바뀌는 것은 아니다)
좀 더 자세히 살펴보면
호이스팅시 선언문은 유효범위의 최상단으로 올라간다고 한다.
var의 유효범위는 함수블록이다.
예를들어
1
2
3
4
5
6
7
8
9
10
11
function test1() {
for (var i = 0; i < 10; i++) {}
console.log(i);
}
function test2() {
if (true) {
var value = "hi";
}
console.log(value);
}
이러한 코드는
1
2
3
4
5
6
7
8
9
10
11
12
13
function test1() {
var i;
for (i = 0; i < 10; i++) {}
console.log(i);
}
function test2() {
var value;
if (true) {
value = "hi";
}
console.log(value);
}
이런식으로 실행된다.
함수 호이스팅
함수 또한 호이스팅의 대상이다.
바로 예시를 보면
1
2
3
4
5
6
7
8
9
10
function Hello() {
var result = name();
console.log("my name is " + result);
function name() {
return "Tom";
}
}
console.log(Hello());
// my name is TOM
함수가 정의되기 전에 result변수가 함수를 호출하고 있다.
이 경우도 오류가 날 것 같지만 호이스팅이 적용되어 문제없이 작동한다.
name() 함수의 선언 부분이 Hello()함수의 최상단으로 올라가기 때문이다.