[JavaScript] 호이스팅(Hoisting)

📚 호이스팅이란 무엇인가요?

호이스팅이란 자바스크립트에서 변수나 함수 선언이 그들이 속한 스코프의 최상단으로 끌어올려지는 것을 말해요.

 

당신이 한 카페에 들어갔다고 상상해 볼까요?
카페의 메뉴판은 벽에 걸려 있고, 당신은 메뉴를 선택하기 전에 메뉴판을 볼 수 있어요.
여기서 메뉴판이 '호이스팅'된 것과 같아요.
즉, 메뉴판(변수나 함수 선언)은 카페(스코프) 안에서 어디서든 볼 수 있도록 벽(최상단)에 걸려 있는 것과 같아요.

 

---

🖥️ 호이스팅의 예시

자바스크립트에서 호이스팅은 변수와 함수 선언에 적용돼요.
아래 코드를 통해 확인해 볼까요?

console.log(myVar); // 출력: undefined  
var myVar = 5;  
console.log(myVar); // 출력: 5  

위 코드에서 var myVar = 5; 선언이 스크립트의 최상단으로 끌어올려져요.
변수는 선언되었지만, 아직 값을 할당받지 않았기 때문에, 첫 번째 console.log(myVar);는 undefined를 출력해요.

 

여기서 이해해야 할 중요한 개념은 var 키워드로 선언된 변수의 호이스팅 방식이에요.
이를 단계별로 설명하면 아래와 같아요.

 

1. 변수 선언과 호이스팅:

• 자바스크립트는 코드 실행 전에 모든 var 변수 선언을 해당 스코프의 최상단으로 호이스팅 해요.
• 이 과정에서 변수는, 선언은 호이스팅 되지만 할당은 호이스팅 되지 않아요.
• 즉, var myVar = 5;에서 var myVar; 부분만 최상단으로 올라가요.

2. 첫 번째 console.log 실행:

• console.log(myVar);가 실행될 때, myVar는 이미 호이스팅으로 인해 선언되었지만, 아직 값이 할당되지 않았어요.
• 따라서, myVar의 값은 undefined이에요.

3. 변수에 값 할당:

• 코드가 var myVar = 5;에 도달하면, 이제 myVar에 5가 할당돼요.

4. 두 번째 console.log 실행:

• 이 시점에서 myVar에는 5가 할당되었어요.
• 따라서 console.log(myVar);는 5를 출력해요.

반응형

---

🤔 함수 호이스팅

함수 선언도 호이스팅 돼요.

console.log(myFunction()); // 출력: "Hello, World!"

function myFunction() {  
    return "Hello, World!";  
}  

이 경우, myFunction()은 호출되기 전에 호이스팅 되어, 코드의 어느 위치에서든 호출할 수 있어요.

 

---

🚨 주의할 점

let과 const로 선언된 변수는 호이스팅 되지만, 초기화되지 않은 상태에서 접근하려고 하면 오류가 발생해요.
이는 var와의 중요한 차이점이에요.

console.log(myLetVar); // 오류 발생: Cannot access 'myLetVar' before initialization  
let myLetVar = 3;  

 

---

📖 결론

호이스팅은 자바스크립트에서 변수와 함수 선언이 스코프의 최상단으로 끌어올려지는 현상이에요.
이해하면 코드의 동작을 더 명확히 파악하고 예상치 못한 오류를 방지할 수 있어요.

 

---

🔗 추가 정보

자바스크립트 호이스팅에 대한 더 깊은 이해를 원하신다면, MDN Web Docs에서 자세한 정보를 찾아볼 수 있어요.