호이스팅

호이스팅이란?

호이스팅이란 "끌어올린다"라는 뜻으로 변수 및 함수 선언문이 스코프 내의 최상단으로 끌어올려지는 현상을 말한다.
혹은 실행 컨텍스트 생성 시 렉시컬 스코프 내의 선언이 끌어올려 지는 게 호이스팅이다라고 할 수 있다.

호이스팅이 발생하는 이유

호이스팅은 앞서 말했듯이 JavaScript 엔진이 코드를 실행하기 전에 파싱 단계에서 변수와 함수 선언을 메모리에 끌어올리는 동작을 말한다.
이는 어떤식으로 코드가 실행될 것인지에 대한 컨셉을 설명하면서 이루어진다.

• 파싱 단계(Parsing Phase)
  코드의 문법적인 오류를 찾고, 변수와 함수 선언을 메모리에 등록한다. 이때 변수는 undefined로(var로 선언시) 초기화 되고, 함수는 함수 전체가 메모리에 저장된다. 이렇게 선언부가 끌어올려지는 현상을 호이스팅이라고 한다.
• 실행 단계(Execution Phase)
  실제로 코드를 실행하며, 변수에 값이 할당되고 함수가 호출된다.

이러한 호이스팅이 발생하는 이유는 JavaScript의 설계 철학 중 하나인 "선언적 환경(Declarative Enviorment)"에 기인한다.

변수 호이스팅과 함수 호이스팅

• 변수 호이스팅(Variable Hoisting)
  변수 호이스팅은 변수의 선언 부분이 해당 스코프의 최상단으로 끌어올려지는 동작이다. 변수 선언은 변수를 선언하기 전에도 사용할 수 있게 한다. 하지만 변수의 초기화는 호이스팅되지 않으며, 실제 할당은 그 위치에 도달했을 때 이루어집니다. 변수 선언이 호이스팅되기 때문에, 변수를 선언하기 전에 사용하더라도 오류가 발생하지 않는다.

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

위 코드에서 var x = 5; 문장은 호이스팅되어 최상단으로 이동하며, 실행 시점에서 console.log(x)는 undefined를 출력한다. 이는 변수 x의 선언은 호이스팅되었지만, 실제 할당은 var x = 5; 문장이 실행되기 전에 이루어지기 때문이다.

• 함수 호이스팅(Function Hoisting)
  함수 선언문은 변수 선언과 마찬가지로 호이스팅된다. 함수 선언문은 해당 스코프의 최상단으로 끌어올려지며, 함수를 선언하기 전에도 호출할 수 있다.

sayHello(); // "Hello!"
function sayHello() {
  console.log("Hello!");
}

위 코드에서 sayHello() 함수 호출은 함수 선언문보다 앞에 위치하고 있다. 하지만 함수 선언문은 호이스팅되어 최상단으로 이동하므로, 실행 시점에서 sayHello() 함수를 호출할 수 있고 "Hello!"가 출력된다.

하지만 함수 표현식(함수를 변수에 할당하는 방식)은 호이스팅되지 않는다. 함수 표현식은 변수 선언과 동일하게 호이스팅되며, 변수에 할당된 함수는 할당된 위치에서부터 사용할 수 있다.

변수 호이스팅과 함수 호이스팅은 JavaScript의 동작 방식 중 하나로, 코드 작성 순서와는 독립적으로 변수와 함수의 선언을 최상단으로 끌어올리는 동작이다. 이를 이해하고 적절히 활용하면 코드 작성 시 발생할 수 있는 오류를 방지하고, 코드의 가독성과 유지 보수성을 향상시킬 수 있다.

정리

간단하게 JavsScript의 호이스팅에 대해 정리해보았다. 도대체 왜 호이스팅이 발생하는지와 어떻게해서 호이스팅이란게 생기게 되었는지를 비롯해 JavaScript의 여러 문법을 기원부터 설명해주는 아주 좋은 글이 있어 공유하고자 한다.
자바스크립트는 왜 프로토타입을 선택했을까