1. 🗺️ 개념 지도 (Overview)

이 주제를 한 문장으로 설명하면? (예: "브라우저가 HTML을 받아서 화면에 그리는 전체 과정")

자바스크립트 코드 실행 전에 변수와 함수 선언이 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 개념

이 주제가 왜 중요한가?

• 실행 순서 이해
  • 코드가 작성된 순서대로 실행되지 않는 이유를 설명할 수 있음
• 버그 방지
  • 잘못된 참조로 인해 발생되는 문제, undefined, ReferenceError 발생 원인을 정확히 파악 가능

2. 📖 핵심 개념 정리

2-1. 호이스팅

동작 원리 / 흐름을 포함하여 설명해주세요.

1. 실행 컨텍스트 생성
2. 변수, 함수, 클래스 등의 선언문을 먼저 처리
3. 생성된 식별자를 실행 컨텍스트의 스코프에 등록

console.log(a); // undefined
var a = 10;

// 실제로는 아래처럼 해석되어 동작
var a;           // 선언 먼저
console.log(a);  // undefined
a = 10

핵심 포인트:

• 실행 전에 선언이 먼저 처리되는 것
• 선언만 먼저 처리되고 초기화는 제자리에 남는다

2-2. 변수 호이스팅

동작 원리 / 흐름을 포함하여 설명해주세요.

1. var: 호이스팅 직후 undefined로 초기화됩니다. 즉, 런타임 이전에 선언 단계와 초기화 단계가 함께 진행됩니다. 따라서, 선언 이전에도 참조가 가능합니다.

   실제 코드 예시:

   console.log(a); //undefined
   var a = 1;

2. let/ const: 호이스팅은 되지만 초기화는 선언문에 도달했을 때 수행됩니다. 값 할당 전 참조하면 ReferenceError가 발생합니다

   실제 코드 예시:

   console.log(a)

핵심 포인트:

• 초기화에 차이가 있음
• var → undefined
• let/const → ReferenceError (TDZ 때문)

2-3. 함수 호이스팅

동작 원리 / 흐름을 포함하여 설명해주세요.

foo(); // 실행됨

function foo() {
  console.log("hello");
}

// var에 할당
foo(); // TypeError: foo is not a function

var foo = function() {
  console.log("hello");
};

// let/const에 할당

핵심 포인트:

• 함수 선언문 → 완전히 호이스팅
• 함수 표현식 → 변수 호이스팅 규칙 따름

3. 🔍 깊이 이해하기

왜 이렇게 설계됐을까? (Design Decision)

이 기술/개념이 왜 이런 방식으로 만들어졌는지 배경을 이해해봅시다

실무에서는 어떻게 쓰이나?

실제 프로젝트에서 마주칠 수 있는 상황을 생각해봅시다

• var 사용 지양

  // var 사용으로 인한 의도치 않은 동작 유발
  
  if (!user) {
    var user = "guest";
  }
  console.log(user); // 의도치 않은 동작

4. 🎤 구두 설명 연습

면접관 앞에서 말하듯이 작성. 읽는 용도가 아니라 말하는 연습을 위한 섹션입니다

"~이 뭔가요?" 질문에 대한 답변 스크립트

호이스팅은 자바스크립트 엔진이 코드를 실행하기 전에 변수와 함수 선언을 먼저 처리하는 동작입니다. 

이 과정에서 var는 undefined로 초기화되지만, let과 const는 TDZ 때문에 초기화 전까지 접근할 수 없습니다. let과 const는 선언 전 접근 시 ReferenceError가 발생합니다.

또한 함수 선언문은 전체가 호이스팅되어 어디서든 호출이 가능하지만, 함수 표현식은 변수 호이스팅 규칙을 따르기 때문에 선언 전 호출을 하면 에러가 발생합니다. 

⏱️ 1분 요약 버전

면접관이 바쁠 때, 딱 1분 안에 설명하는 버전도 만들어봅시다

호이스팅은 자바스크립트에서 코드 실행 전에 선언문이 먼저 처리되는 동작입니다. 
var는 undefined로 초기화되고, let과 const는 TDZ 때문에 접근 시 에러가 발생합니다. 
또한 함수 선언문은 완전히 호이스팅되지만 함수 표현식은 변수처럼 동작합니다.

5. ❓ 예상 면접 질문 & 답변

각 질문에 대해 STAR 구조 혹은 두 문장 요약으로 작성

기본 질문

A: 자바스크립트 엔진이 코드 실행 전 단계에서 변수와 함수 선언을 먼저 처리하는 동작입니다. 단, 선언만 처리되고 초기화는 원래 위치에 남아 있습니다.

A: 세 키워드 모두 호이스팅은 됩니다. var는 undefined로 자동 초기화되어 선언 전 접근해도 에러가 발생하지 않지만, let과 const는 TDZ에 의해 선언 전 접근 시 ReferenceError가 발생합니다.

A: 네. 있습니다. 함수 선언식은 함수의 이름과 본문 전체가 호이스팅되어 선언 전에 호출해도 정상 동작합니다. 함수 표현식은 변수에 함수를 담는 방식이라 변수 호이스팅 규칙을 따릅니다. var로 선언된 함수 표현식을 선언 전에 호출하면 TypeError가, let/const면 ReferenceError가 발생합니다.

심화 질문 (꼬리질문 대비)

A: 아닙니다. 코드가 물리적으로 이동하는 것이 아니라 실행 컨텍스트 생성 시 엔진이 변수 및 함수 선언을 미리 메모리에 등록하는 것입니다. 코드 원본은 변하지 않으며 엔진의 내부 처리 순서가 다를 뿐입니다.

A: var처럼 선언 전 접근 시 undefined를 반환하면 개발자가 버그를 인지하지 못한 채 코드를 짜기 쉽습니다. TDZ는 선언 전 사용을 명시적 에러로 알려주어 의도치 않은 사용을 방지하고 코드 예측 가능성을 높이기 위해 ES6에서 도입되었습니다.

🧨 함정/난이도 높은 질문

let x = 10;

{
  // 만약 호이스팅이 안 된다면 10이 출력되어야 함
  console.log(x); // ReferenceError: Cannot access 'x' before initialization
  
  let x = 20; 
}

실습 코드

// 아래 코드의 출력 결과를 예측하고 실제로 실행해보세요

console.log(a)
console.log(b)
console.log(c())
console.log(d)

var a 

실습하면서 깨달은 점

• 코드 순서 ≠ 실행 순서
• var는 undefined로 나오지만 let은 아예 접근이 안됨

7. 📝 나만의 요약 노트

공부하고 나서 진짜 내 머릿속에 남은 것들만 정리해봅시다

오늘 이 주제에서 가장 중요한 것 3가지

1. 호이스팅은 실행 전에 선언이 먼저 처리되는 것
2. var와 let/const 차이는 TDZ
3. 함수 선언문과 표현식에도 호이스팅 차이가 존재

헷갈렸던 부분 & 해결

더 공부하고 싶은 것

8. 📚 참고 자료