Javascript - 호이스팅(Hoisting)

호이스팅이란 무엇인지 이해해보자

호이스팅이란 자바스크립트의 특징중 하나이고 자바스크립트에서 호이스팅은 변수 및 함수 선언이 코드 실행 전에 메모리에 끌어올려지는 현상을 설명한다. 다들 설명을 전문용어를 쓰며 복잡하게 설명하는데 정말 간단하다 코드를 예로 보자

console.log(x); // undefined
let x = 5;

위의 코드에서 var x = 5;라는 선언은 실제로 코드 내에서 그 위치에 있지만, 자바스크립트 엔진은 이를 변수를 선언한 위치의 맨 위로 끌어올려 호이스팅합니다 변수가 있는것으로 확인되지만
콘솔이 변수지정전에 실행되어 x의 값이 초기화 된것입니다. 아주쉽죠?

함수도 같습니다

foo(); // "Hello, world!"

function foo() {
  console.log("Hello, world!");
}

위의 코드에서 foo() 함수 호출은 선언된 위치보다 앞서 있지만, 함수 선언 자체가 호이스팅되어 최상단으로 끌어올려지므로 호출이 가능합니다. 어떻게보면 족보없는 언어같이 보이지만 편리하다고 막쓰면 코드의 가독성이 나빠지고 예측 가능성에 영향을 미칠수 있어서 이러한 동작을 이해하고 코드를 작성하는것이 좋습니다.

그리고 개인적으로는 var보다 let/const를 선호하는편인데 var는 중복해서 선언하는것이 가능해서 이로 인해 변수 중복 선언으로 인한 예기치 못한 동작을 할수있기 때문입니다. 이러한 특징은 var가 함수 스코프를 가지고 있기 때문에 발생합니다 ES6(ES2015)부터는 let과 const 키워드가 추가되었는데, 이들은 블록 스코프를 가지고 있어 중복 선언을 허용하지 않습니다. 이로 인해 변수 중복 선언으로 인한 예기치 못한 동작을 방지할 수 있습니다.