[JS] 호이스팅(Hoisting)이란?
[JS] 호이스팅(Hoisting)이란?
Hoist
- 사전적 정의는 끌어올리기 라는 뜻
- 함수의 선언은 끌어올리고, 할당은 끌어올리지 않음
- 자바스크립트에서 끌어올려지는 것은 변수
모든 변수 선언은 호이스트 된다
- 호이스트란 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되는 것
- 즉, 변수가 함수 내에서 정의되었을 때, 선언이 함수의 최상위로,
함수 바깥에서 정의되었을 경우, 전역 컨텍스트의 최상위로 변경됨
1
2
3
4
5
6
|
function getX(){
console.log(x); // undefined
var x = 100;
console.log(x); //100
}
getX();
| cs |
- 다른 언어의 경우에는, 변수 x를 선언하지 않고 출력하라고 한다면 오류가 발생한다.
- 하지만 자바스크립트에서는 undefined라고 하고 넘어간다
- var x =100; 이 구문에서 var x;를 호이스트하기 때문
- 즉, 작동 순서에 맞게 코드를 재구성하면 다음과 같다
1
2
3
4
5
6
7
|
function getX(){
var x;
console.log(x);
var x = 100;
console.log(x);
}
getX();
| cs |
- 선언문은 항시 자바스크립트 엔진 구동시 가장 최우선으로 해석되고
할당 구무은 런타임 과정에서 이루어지기 때문에, 호이스팅 되지 않는다. - 함수가 자신이 위치한 코드에 상관없이 함수 선언문 형태로 정의한 함수의 유효범위는 전체 코드의 맨 처음부터 시작한다.
- 함수 선언이 함수 실행 부분보다 뒤에 있더라도 자바스크립트 엔진이 함수 선언을 끌어 올린다.
- 여기서 주의할 점 : 함수 호이스팅은 함수를 끌어올리지만 변수의 값을 끌어올리지는 않는다.
1
2
3
4
5
|
foo( );
function foo( ){
console.log('hello');
};
> hello
| cs |
- foo 함수에 대한 선언이 호이스팅하여 global 객체에 등록시키기 때문에 hello가 제대로 출력 됨
1
2
3
4
5
|
foo( );
var foo = function( ){
console.log('hello');
};
> hello
| cs |
- 함수 리터럴을 할당하는 구조이기 때문에 호이스팅이 되지 않으며 그렇기 때문에 Systan Error가 발생
출처
댓글
댓글 쓰기