JS : 스코프, 스코프 체이닝, 호이스팅

스코프란?

- 어떠한 변수나 함수가 선언된 공간 또는 환경이다.

- 특정 변수나 함수의 스코프는 해당 변수, 함수를 참조할 수 있는 범위를 뜻한다.

 

---

스코프 체이닝이란?

- 스코프 체이닝은 코드에서 변수나 함수를 찾을 때 현재 스코프에서 시작하여 해당 변수 또는 함수를 찾을 때까지 상위 스코프로 이동하는 과정을 뜻한다.

// name은 전역 스코프이기 때문에 어디에서든지 접근이 가능하다.
const name = "daniel";

const firstFunction = () => {
    // human은 함수 스코프로 함수 내부에서 접근이 가능하다.
    const human = true;
    
    if(human) {
        // var로 선언된 변수는 함수 스코프로 if문 안에 있지만 호이스팅으로 인해 firstFunction 스코프 내 어디에서든 접근이 가능하다.
        var address = "서울";
        // let으로 선언된 변수는 블록 스코프{}로 if문 안의 블록 내에서만 접근 가능하다.
        let age = 32;
    }

    const secondFunction = () => {
        // const로 선언된 변수는 블록 스코프{}로 secondFunction 안에서만 접근 가능하다.
        const isAdult = true;
    }
    
    secondFunction();
}

 

---

호이스팅

- 호이스팅은 인터프리터가 코드를 실행하기 전 함수 또는 변수의 선언문을 해당 범위의 맨 위로 끌어올리는 작업을 뜻한다.

 

 

# 변수, 함수마다 호이스팅이 되는 방식

 

- var : 호이스팅과 동시에 undefined로 초기화가 일어난다.

- let, const : 선언부만 호이스팅이 일어나고 별도의 초기화 과정이 없기때문에 개발자가 초기화해준 구간까지 TDZ (일시적 사각지대) 구간이 발생한다.

- 함수 선언 : 화살표 함수, 함수 표현식은 호이스팅의 영향을 받지 않지만 함수 선언식은 호이스팅에 영향을 받는다.

 

 

# var와 함수 선언식을 지양해야 좋은 이유

 

- 개발자가 변수, 함수를 초기화한 구간 전에도 접근이 가능하기때문에 개발자의 의도와 다르게 코드의 흐름이 흘러갈 수 있다.