📖 9 . 스코프, 호이스팅(Hoisting) , TDZ

Lee Jino·2022년 9월 23일

📖 스코프, 호이스팅 , TDZ

🚀 1. 스코프의 정의

참조 대상 식별자(identifier, 변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름)를 찾아내기 위한 규칙이다.
자바스크립트는 이 규칙대로 식별자를 찾는다.

🚀 1-1 . 스코프의 구분

▶️ 자바스크립트에서 스코프를 구분해보면 다음과 같이 2가지로 나눌 수 있다.

전역 스코프 (Global scope)
코드 어디에서든지 참조할 수 있다.
지역 스코프 (Local scope or Function-level scope)
함수 코드 블록이 만든 스코프로 함수 자신과 하위 함수에서만 참조할 수 있다.

▶️ 모든 변수는 스코프를 갖는다. 변수의 관점에서 스코프를 구분하면 다음과 같이 2가지로 나눌 수 있다.

변수는 선언 위치(전역 또는 지역)에 의해 스코프를 가지게 된다. 즉, 전역에서 선언된 변수는 전역 스코프를 갖는 전역 변수이고, 지역(자바스크립트의 경우 함수 내부)에서 선언된 변수는 지역 스코프를 갖는 지역 변수가 된다.
전역 스코프를 갖는 전역 변수는 전역(코드 어디서든지)에서 참조할 수 있다. 지역(함수 내부)에서 선언된 지역 변수는 그 지역과 그 지역의 하부 지역에서만 참조할 수 있다.

🚀 2. 호이스팅의 정의

자바스크립트 엔진이 전체 코드를 먼저 스캔한 후, 변수 선언 정보를실행 컨텍스트에 기록해놓는데, 이러한 작업 때문에 선언문이 유효한 스코프 내에서 최상단으로 끌어 올려지는 듯한 현상을 말한다.

🚀 2-1. 호이스팅 가볍게 짚어보기

호이스팅을 통해 선언과 할당을 분리한다.
모든 변수/함수 선언을 해당 스코프의 최상단으로 끌어올린 듯 한 현상이 일어난다.
🔥 여기서 주의할 점은
모든 변수, 함수 선언을 코드 상에서 실제로, 물리적으로 최상단으로 끌어올리는 것이 아닌 내부적으로 끌어올리는 것이다.
메모리의 변화 또한 없다.

🚀 2-2. 내부적으로 어떤 일이 발생하는가?

🚀 2-3. 호이스팅에 대한 잘못된 상식

▶️ 호이스팅은 var 선언만 일어난다? Nope!! ❌

"var을 이용한 변수 선언은 호이스팅이 일어나지만, const,let을 이용한 변수 선언은 호이스팅이 일어나지 않는다" 라는 정보가 많이 나온다.
저것은 잘못된 표현이다... 🙄
var, const, let 상관없이 모든 선언에서 호이스팅이 이루어진다.
1-1 에서 내부적으로 모든 선언이 우선적으로 메모리에 저장된다고 하였는데, 여기에 집중해야한다.
호이스팅은 모든 변수/함수 선언을 내부적으로 최상단으로 끌어올리는 것이고, 내부적으로는 모든 선언이 우선적으로 메모리에 저장된다는 것이다.
이 말은 var, const, let 상관없이 모든 선언에서 호이스팅이 일어난다는 것을 얘기하는 것이다.
🔥 그렇다면 왜 const, let은 호이스팅이 일어나지 않는 것 처럼 보였을까? 예시 코드를 확인해보자.

myname을 찍어보면 에러가 나지 않고 undefined가 출력이 되고, myname2를 찍어보면 레퍼런스 에러가 난다.
이 결과를 보면 마치 var 선언은 호이스팅이 일어났기 때문에 에러가 나지않고 const, let 선언은 호이스팅이 일어나지 않기 때문에 에러가 발생한다고 생각할 수도 있다. ❌하지만 아니다.❌
var과 const, let 간에 결정적인 차이 때문에 이러한 현상이 발생한다.차이를 알아보자.

🚀 2-4. var과 const, let의 차이

🚀 2-5. let은 왜 레퍼런스 에러가 나는가?

🚀 2-6. 종합

const, let은 호이스팅이 일어난 후 어떠한 값으로도 초기화가 되지 않으며, 초기화되지 않은 변수는 참조할 수 없기 때문에 console.log( ) 코드를 실행하지 못하고 레퍼런스 에러가 나는 것이다.
이러한 현상 때문에 const, let은 호이스팅이 되지 않는다는 오해를 불러왔던 것이다.

🚀 3. TDZ ( Temporal Dead Zone )의 정의

🔎 일시적 사각지대 ❓

안녕하세요