개발자가 되고 싶었던 주니어 hobby 개발자 입니다.

1 분 소요

서론

오늘은 호이스팅에 대해서 알아봅시다.

본론

호이스팅(Hoisting)은 JavaScript의 변수 및 함수 선언을 컴파일 시점에서 메모리에 먼저 할당하고, 실제 코드 실행보다 먼저 해당 변수 및 함수를 사용할 수 있도록 하는 현상입니다.

변수 선언문이 해당 스코프의 최상단으로 끌어올려지고, 변수의 초기값이나 할당은 원래 위치에 그대로 남아있습니다. 이러한 현상은 변수 및 함수의 스코프와 실행 컨텍스트 등에 따라 발생합니다. 호이스팅은 코드 구조를 파악하기 어렵게 만들 수 있기 때문에, 일부 개발자들은 변수나 함수를 사용하기 전에 반드시 선언하고 초기화하는 습관을 가지고 있습니다.

ES6에서는 let과 const를 사용해 변수를 선언할 수 있는데, 이들은 호이스팅이 발생하지 않습니다. 하지만 const는 상수로 선언되기 때문에 초기값을 반드시 할당해야하며, 이후에 변경이 불가능합니다.

예제로 알아보기

  1. 변수 호이스팅 
    console.log(x); // 출력: undefined
var x = 5;
console.log(x); // 출력: 5

    위의 코드에서 변수 ‘x’를 선언하고 초기화한 후에 ‘console.log’로 변수를 출력합니다.
    그러나 변수 ‘x’가 선언되기 전에도 ‘console.log(x)’ 를 호출할 수는 있다. 그렇지만 ‘undefined’가 나온다. 이는 변수 선언 (‘var x’)가 스코프 상단으로 끌어올려졌기 때문이다.

  2. 함수 호이스팅
foo(); // 출력: "Hello, world!"

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

위의 코드에서 ‘foo’함수를 선언하고 호출합니다. 함수 선언은 스코프 상단으로 끌어올려지기 때문에 ‘foo()’를 호출하기 전에도 함수 선언부가 있는 위치와는 상관없이 호출할 수 있다.

여기서 주의할 점은 함수 선언식에만 호이스팅이 적용이 된다. 함수 선언식은 호이스팅되지 않으므로, 변수 선언과 동일한 방식으로 동작이 된다.

함수 표현식 예시 
var add = function(a, b) {
  return a + b;
};

함수 표현식은 변수에 함수를 할당하는 형태이므로, 변수의 호이스팅 규칙에 따라 변수 선언만 호이스팅되고 함수 선언부는 호이스팅되지 않습니다. 따라서 함수 표현식은 변수가 선언되 이후부터 사용할 수 있다.

결론

JavaScript의 호이스팅은 변수 및 함수 선언을 컴파일 시점에서 메모리에 먼저 할당하여 해당 변수 및 함수를 사용하기 전에 선언할 수 있게 해주는 현상입니다. 변수 선언문은 스코프의 최상단으로 끌어올려지지만, 초기값이나 할당은 원래 위치에 그대로 남아있습니다. 호이스팅은 코드를 이해하기 어렵게 만들 수 있으므로, 변수와 함수를 사용하기 전에 선언하고 초기화하는 습관을 가지는 것이 좋습니다. ES6에서 도입된 let과 const는 호이스팅이 발생하지 않는 특징을 가지고 있습니다.

참고자료 및 블로그

  • 스파르타 코딩클럽 강의자료
  • Chat GPT

참고