호이스팅에 대해 설명해주세요.

면접용

호이스팅(Hoisting)은 자바스크립트에서 변수와 함수 선언이 스코프 내의 최상단으로 끌어올려지는 현상입니다. 중요한 점은 선언만 끌어올려지고, 초기화는 실행 시점에서 이루어진다는 것입니다.

예를 들어, var로 선언된 변수는 호이스팅되지만 초기화가 나중에 이루어지므로, 초기화 전에는 undefined가 출력됩니다.

예시를 들자면 코드에서:

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

이 코드에서 a는 호이스팅되어 최상단으로 올라가지만, 초기화 a = 10은 실행 시점에 이루어지기 때문에 첫 번째 console.log에서는 undefined가 출력됩니다.

하지만 let이나 const는 호이스팅되긴 하지만, 초기화 전에 접근하려고 하면 ReferenceError가 발생합니다.

예를 들어:

console.log(b)
let b = 20;

이는 '일시적 사각지대(TDZ)' 때문인데, let과 const는 선언된 시점까지 초기화되지 않기 때문에 접근할 수 없습니다.

그리고 함수 선언문은 변수와 다르게 선언, 초기화, 할당이 동시에 이루어지기 때문에, 선언 전에 호출해도 정상적으로 실행됩니다.

결론적으로, 호이스팅은 변수나 함수의 선언을 최상단으로 끌어올려 주지만, 초기화 시점은 따로 처리되기 때문에 var, let, const, 함수 선언의 차이를 잘 이해하고 사용하는 것이 중요합니다.

---

개념 설명

1. 스코프란?

• 범위( 함수 범위, 블록 범위, 전역 범위)

• 변수나 함수가 유효한 범위를 의미합니다.

function funcB() {
 let a = 1;
}
console.log(a);

[ 오류 발생 ] a 라는 변수 모르겠다는 에러가 발생합니다.

호이스팅과 스코프가 어떤 관계가 있을까요??

호이스팅은 선언을 스코프 내에서 이동시키는 과정이며, 스코프는 그 선언에 접근 가능한 경계를 정의합니다.

예를 들어, 함수 내부에서 선언된 변수는 해당 함수의 스코프를 벗어나면 접근할 수 없게됩니다.

2. 호이스팅이란?

• 변수와 함수가 초기화 되기전에 메모리 상에 먼저 올라가는 현상을 의미합니다.

• 실행 시점에서 선언된 변수와 함수가 미리 메모리에 할당됩니다.

• 변수와 함수의 선언은 호이스팅되지만, 초기화는 선언 방식에 따라 다르게 처리됩니다.

• 변수나 함수 선언이 해당 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 자바스크립트의 특징입니다.

단 , es6에서 등장한 방식인 let과 const 선언한 변수들은 호이스팅이 되지만 초기화 전에 접근 할 수 없습니다.

1️. 변수와 함수의 호이스팅 차이

변수와 함수 모두 호이스팅이 동일하게 동작할까요?

변수 호이스팅

• 변수 선언이 코드의 최상단으로 끌어올려지는 현상을 의미합니다.

• 초기화는 실행 단계에서 이루어지므로, 초기화 전에 참조하면 undefined를 반환합니다.

• var 변수: 선언과 동시에 초기화됩니다.

console.log(a); // undefined
var a = 10;// 변수의 선언과 초기화가 동시에!
console.log(a); // 10

[호이스팅]
var a;//변수 선언
console.log(a); 
a = 10;//변수 초기화
console.log(a); 

• let과 const 변수: 선언은 호이스팅되지만, 초기화 전에 참조하면 ReferenceError 발생합니다.

• 변수를 선언할 때, 해당 선언이 코드의 최상단으로 끌어올려집니다. 하지만 변수의 값은 초기화되지 않습니다.

console.log(b); // ReferenceError
let b = 20;

왜 선언문 이전에 접근하면 에러가 발생할까요???

⇒일시적 사각지대(TDZ)때문입니다.

• let과 const 변수는 일시적 사각지대(TDZ, Temporal Dead Zone)에 놓여 있습니다.

  • 선언부터 초기화가 이루어지기 전까지의 구간을 의미합니다.

  • TDZ는 프로그래머가 초기화되지 않은 변수에 접근하지 못하게 됩니다.

함수 호이스팅

• 함수 선언문은 선언, 초기화, 할당이 동시에 호이스팅됩니다;

• 따라서 선언 이전에 호출해도 정상적으로 실행 가능합니다.

2️. 그럼 왜 함수는 선언과 초기화 모두 호이스팅 되는 것일까요??

function 키워드로 선언한 함수

• 선언, 초기화, 할당 단계가 내부적으로 동시에 진행됩니다.

변수

• 선언과 초기화를 한 구문으로 코딩했어도 내부적으로는 두 단계에 걸쳐서 실행됩니다.

var Food = "음식 맛있어";

// 내부적으로 이렇게 동작
var Food;           // 선언이 먼저 호이스팅됨
Food = "음식 맛있어"; // 초기화

3️. 자바스크립트는 인터프리터 언어인데 어떻게 호이스팅 현상이 일어날 수 있을까요?

• js 엔진은 평가와 실행이라는 두 단계를 거쳐 코드를 실행하기 때문입니다.

• 1.실행 전 자바스크립트 코드를 먼저 한번 읽게됩니다. (코드 평가)

• 2.호이스팅이 처리되는 파싱 단계에서는 호이스팅뿐만 아니라, 구문트리와 실행 컨텍스트를 생성하는 작업도 함께 수행됩니다.

• 코드 평가 단계: 코드를 읽고, 선언 정보를 등록하며, 실행 환경을 준비합니다.

• 실행 단계: 실제로 코드를 실행하면서 값을 할당하거나 연산 수행합니다.

=>코드평가단계 및 실행 단계에 대한 예제

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

1. 코드 평가 단계:

   • var x; 선언이 메모리에 등록, 값은 아직 undefined로 초기화됩니다.

   • 첫 번째 console.log(x);는 undefined를 출력합니다.

   • 이후 x = 5; 할당 코드가 실행 단계에서 처리합니다.

2. 실행 단계:

   • 첫 번째 console.log(x); 실행: x의 값은 undefined로 출력합니다.

   • x = 5; 실행: 변수 x에 5가 할당됩니다.

   • 두 번째 console.log(x); 실행: x의 값은 5가 됩니다.