Javascript 호이스팅(Hoisting)

NSH·2020년 9월 14일
0

1. 호이스팅 이란?

  • Hoisting의 사전적 의미는 '들어올리기' 를 의미한다.
  • 호이스팅은 유효 범위 내부의 선언문들을 최상단으로 끌어올리는 것을 의미한다.

2. 호이스팅 대상

  • var로 선언한 변수 및 함수 선언문
  • let, const로 선언한 변수 및 함수 선언문은 호이스팅 대상에서 제외

3. 변수 호이스팅

아래의 코드를 살펴보자. 다른 프로그래밍 언어에서는 선언되지 않은 변수에 접근하기 떄문에
에러가 발생하지만 자바스크립트는 변수 호이스팅이 적용되어 에러가 발생하지 않는다.

console.log('value: ', value);
var value = 5;

// 결과
value: undefined

변수 선언문만 유효 범위의 최상단으로 끌어올려지고 할당문은 그대로 위치한다. 따라서
값이 할당되지 않은 상태에서 value에 접근하므로 'value: undefined' 를 출력한다.

// 변수 호이스팅 적용
var value;
console.log('value: ', value);
value = 5;

// 결과
value: undefined

4. 함수 호이스팅

함수호이스팅(Hoisting)
함수 선언문O
함수 표현식X

4-1. 함수 선언문 호이스팅

함수 선언문은 호이스팅이 적용되 유효 범위 최상단으로 끌어올려지므로 정상적으로 작동한다.

foo();

function foo(){
    var value = 5;
    console.log('value: ', value);
}

// 결과
value: 5

// 함수 선언문 호이스팅 적용
function foo(){
    var value = 5;
    console.log('value: ', value);
}

foo();

// 결과
value: 5

4-2. 함수 표현식 호이스팅

함수 표현식은 호이스팅이 적용되 선언문이 유효 범위 최상단으로 끌어올려진다.
하지만 변수 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 
profile
잘 하고 싶다.

0개의 댓글