📖Today I Learned

✅ 호이스팅이란?

• 코드가 실행하기 전에 변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 것처럼 동작하는 현상
  • JS의 모든 선언은 선언이 먼저 메모리에 저장된다.

    scope : 변수에 접근할 수 있는 범위
    global(전역)과 local(지역) 두가지 타입으로 나뉜다.

         var a = 1;	// 전역스코프
          function localscope() { // 지역스코프 - 함수를 선언 할 때마다 새로운 함수 스코프가 생김
            var a = 111;
            console.log(a);
          }
        console.log(a);

• 하지만 let, const, class 를 이용한 선언문은 호이스팅이 되었지만, 안 된 것처럼 보인다.
  • 일시적 사각지대(Temporal Dead Zone)에 빠지기 때문이다.
  • var은 선언과 함께 undefined로 초기화 된다.
  • let과 const는 초기화 되지 않은 상태로 선언만 메모리에 저장된다.

✅ 변수의 생성 단계

✔ 1단계: 선언 단계(Declaration phase)

• 변수를 실행 컨텍스트의 변수 객체에 등록

✔ 2단계: 초기화 단계(Initializaion phase)

• 변수 객체에 등록된 변수를 위한 메모리 공간 확보
• 변수를 undefined로 초기화

✔ 3단계: 할당 단계(Assignment phase)

• undefined로 초기화된 변수에 실제 값 할당

var키워드로 선언한 변수는 선언 단계와 초기화 단계가 한번에 이루어짐
👉 스코프에 변수를 등록하고 변수를 위한 메모리 공간을 확보한 후, undefined로 초기화
👉 선언문 이전에 변수에 접근하여도 스코프에 변수가 존재하므로 에러가 발생하지 않고 undefined를 반환

let키워드로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행됨
👉 스코프에 변수를 등록하지만 초기화 단계는 변수 선언문에 도달했을 때 이루어짐
👉 초기화 이전에 변수에 접근하려고 하면 참조 에러가 발생
👉 스코프의 시작 지점부터 초기화 시작 지점(TDZ)까지는 변수를 참조할 수 없음

✅ 함수 호이스팅?

• 함수의 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징

✔ add1, add2 👉 함수 선언문에서는 호이스팅이 일어난다.
✔ mul1 👉 var 라서 초기화값인 undefined
✔ mul1(10, 20) 👉 호이스팅이 되었지만, 함수 표현식이므로 not a function 오류 출력
✔ mul2 👉 let 이라서 not defined라는 오류 출력