아래의 코드를 살펴보자. 다른 프로그래밍 언어에서는 선언되지 않은 변수에 접근하기 떄문에
에러가 발생하지만 자바스크립트는 변수 호이스팅이 적용되어 에러가 발생하지 않는다.
console.log('value: ', value);
var value = 5;
// 결과
value: undefined
변수 선언문만 유효 범위의 최상단으로 끌어올려지고 할당문은 그대로 위치한다. 따라서
값이 할당되지 않은 상태에서 value에 접근하므로 'value: undefined' 를 출력한다.
// 변수 호이스팅 적용
var value;
console.log('value: ', value);
value = 5;
// 결과
value: undefined
함수 | 호이스팅(Hoisting) |
---|---|
함수 선언문 | O |
함수 표현식 | X |
함수 선언문은 호이스팅이 적용되 유효 범위 최상단으로 끌어올려지므로 정상적으로 작동한다.
foo();
function foo(){
var value = 5;
console.log('value: ', value);
}
// 결과
value: 5
// 함수 선언문 호이스팅 적용
function foo(){
var value = 5;
console.log('value: ', value);
}
foo();
// 결과
value: 5
함수 표현식은 호이스팅이 적용되 선언문이 유효 범위 최상단으로 끌어올려진다.
하지만 변수 foo에 값이 할당되지 않은 상태에서 호출을 시도해서 에러가 발생한다.
foo();
var foo = function(){
var value = 5;
console.log('value: ', value);
}
// 결과
Error
// 함수 표현식 호이스팅 적용
var foo;
foo();
foo = function(){
var value = 5;
console.log('value: ', value);
}
// 결과
Error