Question

javascript 에서 호이스팅 현상이 무엇인가요?

자바스크립트 강좌를 보면서 공부하는중에 hoisting 이란 단어를 봤는데, 끌어올려짐 문제?

이해가 되지 않아서 쉽게 설명 부탁드립니다.

Answer 1

호이스팅(Hoisting)은 자바스크립트에서 변수나 함수의 선언 부분이 코드의 최상단으로 끌어올려진 것처럼 동작하는 현상을 말합니다. 하지만, 실제로 코드가 물리적으로 이동하는 것은 아니고, 변수 선언이나 함수 선언이 코드 해석 단계에서 메모리에 미리 저장되기 때문에 발생하는 현상입니다.

1. 호이스팅의 기본 개념

• 자바스크립트는 코드를 실행하기 전에 변수와 함수의 선언을 먼저 메모리에 올립니다.
• 선언만 끌어올려지고, 초기화(값의 할당)는 원래 코드 위치에서 이루어집니다. 따라서 선언된 변수나 함수를 사용하기 전에 초기화되지 않은 상태일 수 있습니다.
• 결과적으로, 코드에서 변수를 선언하기 전에 그 변수를 참조해도 오류가 발생하지 않고 undefined가 출력되는 현상이 나타납니다.

2. 호이스팅 예시

• 다음은 var 변수를 사용한 예시입니다:

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

• 이 코드는 다음과 같은 순서로 해석됩니다:

  var x;           // 선언이 먼저 호이스팅됨 (초기화는 아님)
  console.log(x);  // 선언만 되었고, 값이 할당되지 않았으므로 'undefined'
  x = 5;           // 여기서 변수에 값이 할당됨
  console.log(x);  // 이제 값이 할당되었으므로 '5'
  

• var로 선언된 변수 x의 선언 부분만 호이스팅되어, 코드 상단에서 선언된 것처럼 동작합니다. 초기화는 x = 5; 부분에서 이루어지기 때문에, 첫 번째 console.log에서는 undefined가 출력됩니다.

3. 함수 선언의 호이스팅

• 함수 선언문도 호이스팅됩니다. 함수 선언은 전체가 호이스팅되기 때문에, 함수 호출이 함수 선언보다 앞서 있어도 정상적으로 동작합니다.

• 예시:

  sayHello(); // "Hello, world!" 출력
  
  function sayHello() {
    console.log("Hello, world!");
  }
  

• 이 경우, sayHello 함수의 선언 자체가 코드 상단으로 호이스팅되므로 함수 선언 위치보다 앞에서 호출해도 문제 없이 작동합니다.

4. let과 const의 호이스팅

• let과 const로 선언한 변수도 사실 호이스팅되지만, 이들은 "일시적 사각지대(TDZ, Temporal Dead Zone)"에 놓이게 됩니다.
• TDZ는 변수가 선언된 블록의 시작부터 초기화되기 전까지의 구간을 의미하며, 이 구간에서는 변수를 사용할 수 없습니다.
• 예시:

  console.log(y); // ReferenceError: Cannot access 'y' before initialization
  let y = 10;
  

• let 키워드로 선언한 y 변수는 선언 자체는 호이스팅되지만, 초기화 전에 접근하려 하면 ReferenceError가 발생합니다. 이는 변수의 선언은 호이스팅되었지만 초기화 전에 사용하려 했기 때문입니다.

5. 쉽게 이해하는 호이스팅

• 비유: 호이스팅을 이해하기 쉽게 사무실에서 문서를 처리하는 과정에 비유할 수 있습니다:
  • var로 선언된 변수는 사무실에 도착하자마자 책상 위에 빈 파일을 놓는 것과 같습니다. 하지만 이 파일에 내용을 쓰기 전에는 그냥 빈 파일로 남아있습니다. 누군가가 이 파일에 내용을 적기 전까지는 "아직 내용이 없음(=undefined)"이라고 알려줍니다.
  • let과 const는 사무실에 도착하자마자 파일을 캐비닛에 잠시 보관하는 것과 같습니다. 파일에 내용을 작성하기 전까지는 캐비닛에서 꺼내볼 수 없으므로, 중간에 파일을 찾으려 하면 "아직 준비되지 않음(=ReferenceError)"이라고 오류를 발생시킵니다.
  • 함수 선언은 사무실에 도착하기 전에 책상 위에 미리 작성된 서류가 올라가 있는 것과 같습니다. 그래서 누군가가 이 서류를 찾으면 바로 보여줄 수 있습니다.

var는 선언이 호이스팅되어 undefined 상태로 초기화되지만, let과 const는 선언은 호이스팅되나 "일시적 사각지대"로 인해 초기화 전에 접근하면 오류가 발생합니다. 함수 선언은 전체가 호이스팅되어 코드 어디서든 사용할 수 있지만, 함수 표현식은 변수에 할당되는 형태이므로 그 변수가 초기화되기 전에는 사용할 수 없습니다.

호이스팅 개념을 이해하면 코드가 어떻게 해석되고 실행되는지 더 명확히 이해할 수 있어, 예기치 않은 오류를 예방하는 데 도움이 됩니다!