[JavaScript] 호이스팅(Hoisting)

호이스팅(Hoisting)은 어디에 선언했나와 상관없이 항상 제일 위로 선언을 끌어 올리는 현상이다.

아래의 예시를 보면

function foo() {
    console.log(a);  // undefined
    var a = 100;
    console.log(a);  // 100
}

foo();

다른 프로그래밍 언어의 경우 위의 코드를 실행하면 a가 선언되지 않았는데 a를 호출했기 때문에 에러가 발생한다.

하지만 자바스크립트의 경우는 호이스팅을 통해 a의 선언을 함수 제일 위에서 자동으로 초기화 해주기 때문에 에러 없이 undefined가 출력된다.

위 코드는 아래와 동일한 역할을 하는 코드이다.

function foo() {
    var a;
    console.log(a);  // undefined
    var a = 100;
    console.log(a);  // 100
}

foo();

변수 이외에도 함수가 선언되기 이전에 함수를 호출하여도 에러가 발생하지 않으며 동작한다.

foo();

function foo() {
  console.log(a); // undefined
  var a = 100;
  console.log(a); // 100
}

함수 작성 이전에 함수를 호출하였지만 JavaScript의 특이한 컨텍스트 실행 동작 방법으로인해 동작한다.

이러한 호이스팅은 유연함을 제공하지만 그만큼 오류도 많이 발생하게 되어 문제가 된다.

호이스팅은 혼란스러울 수 있기 때문에 함수를 호출하기 전에 최상단에 함수를 선언하는 습관을 들이는 것이 좋다.

var를 사용하여 변수를 선언하거나 함수 선언문을 사용하였을때는 호이스팅이 발생하였는데 현재 es6로 넘어오면서 let, const 문법을 사용하거나 함수 표현식을 사용하게 되면서 호이스팅 현상이 발생하지 않게 되었다.??

사실 호이스팅이 발생한다. 그런데 var는 undefined로 값을 출력하지만 let, const는 호이스팅 발생시 에러를 내보내서 오류를 쉽게 파악할 수 있다.

현재는 var가 아닌 let과 const를 사용하여 변수를 선언할 수 있게 되었다.

var 는 function-level-scope

let, const 는 block-level-scope

let, const, 함수 표현식을 사용하면

함수 선언 이전에 함수를 호출하면 에러가 발생하게 되며

{ } 중괄호 내부에 선언된 변수의 경우 중괄호 밖에서 해당 변수에 접근할 수 없게 된다.

호이스팅을 방지하기 위해서 var와 함수 선언식을 대신하여 let과 const, 함수 표현식을 사용하자!!!

프로그래밍 공부 노트