1. 호이스팅이란?
호이스팅이란 var 변수 또는 함수의 선언을 끌어올리는 것을 말한다.
변수를 참조하거나 함수를 호출하기 위해서는 그 코드보다 선언의 코드가 먼저 위치해야 한다.
하지만 자바스크립트에서는 호이스팅으로 인해 var 변수나 함수를 선언하기 전에 미리 참조하거나 실행하는 코드를 작성하더라도 선언이 최상위 위치로 끌어올려지기 때문에 에러가 발생하지 않게 된다.
1.1) var 변수의 호이스팅
var 변수라고 특정 지은 이유는 es6 부터 사용하는 let 변수의 경우 호이스팅이 일어나지 않기 때문이다.
1
2
3
4
5
foo = 'foo'; //error가 발생한다.
console.log(foo);
//변수의 선언
let foo;
var 변수의 호이스팅은 다음과 같은 경우에 발생한다.
1) 변수 선언보다 참조가 먼저 이루어지는 경우
변수 참조가 먼저 이루어지고 이후에 선언하더라도 호이스팅으로 인해 오류가 발생하지 않는다.
1
2
3
4
5
6
//참조
foo = 'foo';
console.log(foo); //foo
//변수의 선언
var foo;
var 변수를 선언과 동시에 값을 할당할 경우 할당된 값은 같이 호이스팅 되지 않는다.
1
2
3
4
console.log(foo); //undefined
//변수의 선언
var foo = 'foo';
2) 변수 선언 없이 참조만 이루어지는 경우
변수를 선언하는 코드 없이 참조하는 경우에도 호이스팅이 일어난다.
1
2
3
//참조
foo = 'foo';
console.log(foo); //foo
1.2) 함수 선언의 호이스팅
함수의 호이스팅은 다음과 같은 경우에 발생한다.
1) 함수 선언보다 호출이 먼저 이루어지는 경우
함수를 선언하는 방식에는 함수 선언식과 함수 표현식을 사용하는 방법이 있는데, 이 중 함수 선언식 방식에서만 호이스팅이 발생한다.
1
2
3
4
5
6
func(); //bar
//함수 선언식
function func() {
console.log('bar');
}
1
2
3
4
5
6
func(); //error가 발생한다.
//함수 표현식을 사용하면 변수에 값(함수)를 할당하기 때문에 호이스팅이 발생하지 않는다.
var func = function () {
console.log('bar');
};
2. 호이스팅과 스코프
기본적으로 호이스팅은 현재 스코프의 최상단으로 선언을 끌어 올리는 방식으로 동작하게 된다.
1
2
3
4
5
6
7
//var foo; <- 이 위치로 끌어 올려진다.
foo = 'foo';
console.log(foo); //foo
//변수의 선언
var foo;
함수내에서 호이스팅은 함수스코프의 최상단으로 끌어 올려진다.
1
2
3
4
5
6
7
8
9
10
11
12
function bar() {
//var foo; <- 이 위치로 끌어 올려진다.
foo = 'foo';
console.log(foo); //foo
//변수의 선언
var foo;
}
bar();
console.log(foo); //에러가 발생한다.
그런데 선언부 없이 호이스팅이 일어나는 경우에는 조금 다르게 동작한다.
이 경우에는 함수 내에서 호이스팅이 일어나더라도 전역 스코프의 최상단으로 선언이 끌어올려진다.
1
2
3
4
5
6
7
8
9
10
11
12
//var foo; <- 이 위치로 끌어 올려진다.
function bar() {
foo = 'foo';
console.log(foo); //foo
//변수의 선언
var foo;
}
bar();
console.log(foo); //foo