개발하는데 다 이유가 있겠지

1. 호이스팅이란?

`호이스팅(Hoisting)`은 자바스크립트에서 변수와 함수 선언이 코드의 최상단으로 "끌어올려지는" 것처럼 동작하는 현상을 말합니다. 이는 자바스크립트 엔진의 코드 실행 방식 때문에 발생합니다.

 

---

 

2. 인터프리터 언어인데 호이스팅이 가능한 이유

자바스크립트는 `인터프리터 언어`로 알려져 있지만, 실제로는 코드 실행 전에 두 가지 주요 단계를 거칩니다:

1. 컴파일 단계 (Creation Phase)
2. 실행 단계 (Execution Phase)

 

---

 

3. 실행 과정 상세 분석

3.1 컴파일 단계 (Creation Phase)

이 단계에서는 다음과 같은 작업이 이루어집니다:

1. 변수 선언 처리
   • `var`로 선언된 변수는 `undefined`로 초기화
   • `let`과 `const`로 선언된 변수는 초기화하지 않음 (Temporal Dead Zone 생성)
2. 함수 선언 처리
   • `함수 전체`가 메모리에 할당됨
   • `함수 표현식`은 변수 선언만 처리

console.log(varVariable); // undefined
console.log(letVariable); // ReferenceError
console.log(constVariable); // ReferenceError

var varVariable = "var value";
let letVariable = "let value";
const constVariable = "const value";

3.2 실행 단계 (Execution Phase)

이 단계에서는 다음과 같은 작업이 이루어집니다:

1. 코드가 순차적으로 실행됨
2. 변수에 실제 값이 할당됨
3. 함수가 호출되면 새로운 실행 컨텍스트가 생성됨

 

---

 

4. 호이스팅의 특징

4.1 변수 호이스팅

// var 호이스팅
console.log(x); // undefined
var x = 5;
console.log(x); // 5

// let/const 호이스팅
console.log(y); // ReferenceError
let y = 10;

4.2 함수 호이스팅

// 함수 선언문
sayHello(); // "Hello!" 출력
function sayHello() {
    console.log("Hello!");
}

// 함수 표현식
sayGoodbye(); // TypeError
var sayGoodbye = function() {
    console.log("Goodbye!");
};

 

---

 

5. 실제 동작 방식 예시

다음 코드가 어떻게 처리되는지 살펴보겠습니다.

console.log(name); // undefined
sayHello(); // "Hello, undefined!"

var name = "John";
function sayHello() {
    console.log("Hello, " + name + "!");
}

console.log(name); // "John"
sayHello(); // "Hello, John!"

↓ 컴파일 단계에서의 변환

// 컴파일 단계에서 내부적으로 이렇게 재구성됨
var name;
function sayHello() {
    console.log("Hello, " + name + "!");
}

// 실제 코드 실행
console.log(name);
sayHello();
name = "John";
console.log(name);
sayHello();

 

---

 

6. 모범 사례와 주의사항

• 호이스팅에 의존하지 않는 코드 작성하기
  • 변수와 함수는 사용하기 전에 선언하기
  • let과 const 사용으로 의도치 않은 호이스팅 방지
• 함수 선언시 주의사항
  • 함수 표현식 사용 권장
  • 블록 스코프 내에서 함수 선언 피하기
• 변수 선언시 주의사항
  • var 대신 let과 const 사용하기
  • 전역 변수 사용 최소화하기

결론

자바스크립트의 `호이스팅`은 코드 실행 전 컴파일 단계에서 발생하는 현상으로, 변수와 함수의 선언을 최상단으로 끌어올리는 효과를 만듭니다. 이는 자바스크립트 엔진의 두 단계 실행 과정(컴파일과 실행) 때문에 가능합니다. 하지만 코드의 가독성과 유지보수를 위해서는 호이스팅에 의존하지 않는 코드 작성을 권장합니다.