자바스크립트의 호이스팅(Hoisting)

답변 확인

1. 호이스팅(Hoisting)이란?

• 호이스팅은 자바스크립트가 코드를 실행하기 전에 변수와 함수의 선언을 코드의 최상단으로 끌어올리는 것처럼 동작하는 특징
• 이로인해, 코드에서 변수를 선언하기 전에 사용할 수 있는 것처럼 보일 수 있지만 값이 할당은 호이스팅되지 않음

2. var, let, const와 호이스팅

var와 호이스팅

• var는 선언과 초기화가 동시에 호이스팅됨
• 선언된 변수는 초기화 시점 이전까지 undefined로 평가됨

console.log(myVar); // undefined (호이스팅됨)
 
var myVar = 10;
console.log(myVar); // 10

let과 const와 호이스팅

• let과 const도 선언은 호이스팅되지만, 초기화는 호이스팅되지 않음
• **TDZ(Temporal Dead Zone)**가 존재하여, 선언된 시점부터 초기화되기 전까지 변수에 접근하면 ReferenceError가 발생

console.log(myLet); // ReferenceError 발생
let myLet = 10; // 초기화
console.log(myLet); // 10

3. 함수와 호이스팅

• 함수 선언식

  • 함수 선언식은 함수 전체가 호이스팅 되므로 선언 이전에 호출이 가능함

console.log(myFunction()); // 'Hello World' 출력
 
function myFunction() {
  return 'Hello World';
}

• 함수 표현식 (var, let, const 사용)
  • 함수 표현식은 변수의 호이스팅 규칙을 따름
  • var는 undefined로 평가되고, let과 const는 TDZ로 인해 ReferenceError가 발생

console.log(myFunc); // undefined (var 사용)
var myFunc = function () {
  return 'Hi';
};
 
console.log(myFunc()); // 'Hi'
 
console.log(myLetFunc); // ReferenceError 발생
let myLetFunc = function () {
  return 'Hello';
};

4. Temporal Dead Zone (TDZ)

• TDZ는 변수가 선언된 시점부터 초기화되기 전까지의 구간
• 이 구간에서는 변수에 접근할 경우 ReferenceError가 발생
• TDZ는 let과 const의 주요 특징 중 하나로, 코드의 안전성을 높여줌

{
  // TDZ 시작
  console.log(myLet); // ReferenceError 발생
  let myLet = 20; // 초기화
  console.log(myLet); // 20
  // TDZ 종료
}

결론

1. 호이스팅이란?

• 변수와 함수 선언이 코드 최상단으로 끌어올려지는 자바스크립트의 특징

2. var, let, const와 호이스팅

• var: 선언과 초기화가 동시에 호이스팅 (undefined로 초기화)
• let/const: 선언만 호이스팅되고 초기화는 나중에 이루어짐 (TDZ 존재)

3. 함수

• 함수 선언식: 선언 이전에 호출 가능.
• 함수 표현식: 변수가 호이스팅 규칙을 따름 (var: undefined, let/const: ReferenceError).

4. 최선의 사용법

• 기본적으로 const를 사용.
• 재할당이 필요한 경우에만 let 사용.
• var는 사용을 지양하여 의도치 않은 오류를 방지.