📌 호이스팅이란?
"선언과 할당이 분리되어 선언부가 코드의 최상단으로 끌어올려지는 현상"이다. 코드 평가 단계에서 발생하며, 예상치 못한 동작의 주요 원인이 된다.
1️⃣ 변수 호이스팅 살펴보기 🎯
var global = 0;
function outer(){
console.log(global); // undefined
var global = 5;
function inner(){
var global = 10;
console.log(global); // 10
}
inner();
global = 1;
console.log(global); // 1
}
outer();🤔 왜 첫 번째 console.log가 undefined일까?
자바스크립트 엔진은 이 코드를 실제로 다음과 같이 해석한다
function outer(){
var global; // 호이스팅 발생
console.log(global); // undefined
global = 5; // 여기서 할당
...
}2️⃣ 함수 호이스팅 살펴보기 🎯
2.1 변수와 함수 선언문의 충돌
var sum;
function sum(){
return 1 + 2;
}
console.log(sum()); // 3
- 변수 선언과 같은 이름의 함수를 선언
- 함수 선언문이 우선되어 정상적으로 함수가 호출됨
2.2 호이스팅 우선순위 확인
var sum;
console.log(typeof sum); // function
function sum(){
return 1 + 2;
}
- 첫 줄에서 변수를 선언했지만 typeof 검사 시 'undefined'가 아닌 'function'이 출력됨
- 이는 함수 선언문이 변수 선언보다 호이스팅 우선순위가 높기 때문
2.3 함수 중복 선언의 동작
var sum;
console.log(sum()); // 11
function sum(){
return 1 + 2;
}
function sum(){
return 1 + 2 + 3;
}
function sum(){
return 1 + 2 + 3 + 5;
}🚨 주의할 점
- 함수 선언문은 모두 호이스팅이 된다
- 여러 개의 같은 이름 함수가 있으면 마지막 함수가 이전 것들을 덮어쓴다
- 코드 실행 전에 이미 마지막 함수가 적용되므로 항상 11이 출력됨
3️⃣ 함수 정의 방식과 호이스팅
3.1 함수 선언식(Function Declaration)
// 함수 선언 전 호출 가능
console.log(sum(1, 2)); // 3
function sum(a, b){
return a + b;
}
- 호이스팅o (함수 전체가 끌어올려짐)
- 함수 전체가 호이스팅 되어 선언 전에도 호출 가능
- 코드 위치와 상관없이 동작
- 예측하기 어려운 코드 흐름을 만들 수 있음
3.2 함수 표현식(Function Expression)
// 함수 선언 전 호출 불가
console.log(sum(1, 2)); // Error: sum is not a function
const sum = function(a, b){
return a + b;
}
- 호이스팅x (변수 선언만 호이스팅)
- 선언 이후에만 사용 가능
- 코드 흐름을 예측하기 쉬움
- 클린코드 관점에서 권장됨
3.3 화살표 함수(Arrow Function)
// 함수 선언 전 호출 불가
console.log(sum(1, 2)); // Error: sum is not a function
const sum = (a, b) => a + b;
- 호이스팅x (함수 표현식과 동일)
- 더 간결한 문법
3.4 호이스팅 관점에서 본 차이 🤔
// 1. 함수 선언식
sayHello(); // "Hello" - 정상 동작
function sayHello() {
console.log("Hello");
}
// 2. 함수 표현식
sayHi(); // Error!
const sayHi = function() {
console.log("Hi");
}
// 3. 화살표 함수
sayBye(); // Error!
const sayBye = () => {
console.log("Bye");
}🎯 정리
📍 변수 호이스팅
- 선언부만 끌어올려짐
- var는 undefined로 초기화
- let/const는 TDZ 적용
🔧 함수 호이스팅
- 함수 전체(선언과 구현)가 끌어올려짐
- 변수 호이스팅보다 우선순위가 높음
- 중복 선언 시 마지막 선언이 적용
✨ 권장되는 해결 방법
- var 대신 const 사용을 기본으로
- 필요한 경우에만 let 사용
- 함수는 표현식으로 선언
- 코드는 위에서 아래로 읽히는 순서대로 작성
Hello