[Deep Dive] 스코프와 스코프 체인

✔️ 이번 정독을 통해 알게 된 것
스코프란 무엇인가요?
블록 레벨 스코프를 설명해보세요.
스코프 체인이 무엇인가요?

 

<답 미리보기>

🤔 스코프가 무엇인가요? 

🤓 스코프는 식별자가 유효한 범위를 말합니다. 모든 식별자(변수명, 함수명, 클래스명 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 스코프가 결정됩니다. 

 

🤔 블록 레벨 스코프를 설명해보세요.

🤓 함수 내부 뿐만 아니라 모든 코드 블럭(if, for, while, try/catch)이 지역 스코프를 만드는 것이 블록 레벨 스코프이고 let, const 가 이에 해당됩니다. 

 

🤔 스코프 체인이 무엇인가요?

🤓 스코프가 계층적으로 연결된 것을 스코프 체인이라고 하는데, 모든 지역 스코프의 최상위 스코프는 전역 스코프입니다.

변수를 참조할 때 자바스크립트 엔진은 스코프 체인을 통해 해당 코드의 스코프에서 시작해서 상위 스코프 방향으로 이동하며 선언된 변수를 검색합니다.

 

 

---

✔️ 스코프

스코프는 식별자가 유효한 범위를 말합니다. 

 

모든 식별자(변수명, 함수명, 클래스명 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정됩니다. 

 

 

스코프(유효범위)를 통해 식별자인 변수 이름의 충돌을 방지하여 같은 이름의 변수를 사용할 수 있게 합니다. 

스코프 내에서 식별자는 유일해야 하지만 다른  스코프에는 같은  이름의 식별자를 사용할 수 있습니다. 

 

■ 함수의 매개변수는 함수 몸체 내부에서만 참조할 수 있고 함수 외부에서는 참조할 수 없다. 

===> 매개변수를 참조할 수 있는 유효범위(스코프)가 함수 내부로 한정되기 때문이다. 

 

■

let x = 'global';

function foo() {
	let x = 'local';
    console.log(x); // local
}

foo();

console.log(x); // global

👉 코드의 가장 바깥 영역에 선언된 변수 x는 어디서든  참조할 수 있습니다. 하지만 foo 함수 내부에 선언된 변수 x는 foo 함수 내부에서만 참조할 수 있고 foo 함수 외부에서는 참조할 수 없습니다. 이때 두개의 변수 x는 식별자 이름이 동일하지만 자신이 유효한 범위, 즉 스코프가 다른 별개의 변수입니다. 

 

 

참고)

var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언이 허용되서 많은 부작용을 일으킵니다. 

const, let 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용하지 않습니다. 

 

---

✔️ 스코프 체인

모든 스코프는 하나의 계층적 구조로 연결되며, 모든 지역 스코프의 최상위 스코프는 전역 스코프입니다. 이렇게 스코프가 계층적으로 연결된 것을 스코프 체인이라고 합니다. 

 

 

변수를 참조할 때 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여
상위 스코프 방향으로 이동하며 선언된 변수를 검색합니다.

 

===> 상위 스코프에서 유효한 변수는 하위 스코프에서 자유롭게 참조할 수 있지만 하위 스코프에서 유효한 변수를 상위 스코프에서 참조할 수 없습니다.

 

 

---

✔️ var 와 함수 레벨 스코프 // let, const 와 블록 레벨 스코프

★ var 키워드로 선언된 변수는 함수 레벨 스코프만 인정하기 때문에 코드 블록 내에서 선언되었어도 모두 전역 변수가 된다. ==> 의도치 않게 값이 재할당되는 부작용이 생길 수 있다. 

★ let, const 키워드는 블록 레벨 스코프를 지원하여, 함수 내부 뿐만 아니라 모든 코드 블럭(if, for, while, try/catch)이 지역 스코프를 만든다. 

 

 

---

✔️ 렉시컬 스코프 (정적 스코프)

var x = 1;

function foo(){
	var x = 10;
    bar();
}

function bar(){
    console.log(x);
}

foo(); 
bar();

 

자바스크립트는 렉시컬 스코프를 따른다. 그래서 함수를 어디서 정의했는지에 따라 상위 스코프를 결정한다. 

===> 함수의 상위 스코프는 언제나 자신이 정의된 스코프이다. 

 

따라서 위 예제를 실행하면 전역 변수 x의 값 1을 두 번 출력한다. 

 

(함수가 호출된 위치는 상위 스코프 결정에 어떤한 영향을 주지 않는다. )

 

 

추가 공부하기

렉시컬 스코프는 클로저와 깊은 관계가 있다. 

 

 

 

 

👩‍💻 모던 자바스크립트 Deep Dive를 정독하고 제가 이해한 내용을 정리한 글입니다 👩‍💻