[JS] 모던 자바스크립트 - 08. 스코프(전역 변수와 지역 변수, 스코프 체인, 렉시컬 스코프)

스코프

---

- 식별자가 유효한 범위

- 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙

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

- 자바스크립트 엔진은 스코프를 통해 어떤 변수를 참조해야 할 것인지 결정

- 식별자 이름이 같아도 스코프가 다르다면 별개의 변수

- var로 선언된 변수는 같은 스코프 내에서 중복 선언 허용, 중복 선언 시 변수값 재할당

 

전역 변수

- 전역(코드의 가장 바깥 영역)에서 선언된 변수

- 어디서든지 참조할 수 있음

※ 참고 - 전역 변수의 문제점

[JS] 자바스크립트 개념 - 09. 전역 변수의 문제점

 

지역 변수

- 지역(함수 몸체 내부)에서 선언된 변수

- 자신의 지역 스코프와 하위 지역 스코프에서 유효

 

스코프 체인

---

- 스코프는 함수의 중첩에 의해 계층적 구조를 가짐, 스코프가 계층적으로 연결된 것이 스코프 체인(scope chain)

- 모든 스코프는 하나의 계층적 구조로 연결되며, 모든 지역 스코프의 최상위 스코프는 전역 스코프

- 변수 참조 시, 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 변수를 검색

- 상위 스코프에서 유효한 변수는 하위 스코프에서 자유롭게 참조

- 하위 스코프에서 유효한 변수를 상위 스코프에서는 참조 불가

 

함수 레벨 스코프

---

- 함수에 의해서만 지역 스코프가 생성

- var 키워드로 선언된 변수는 함수의 코드 블록만을 지역 스코프로 인정, 코드 블록 내에서 선언되었다 해도 모두 전역 변수

var i = 10;

// for문에서 선언한 i도 전역 변수. 이미 선언된 i가 있으므로 중복 선언.
for (var i = 0; i < 5; i++) {
    console.log(i); // 0 1 2 3 4
}

// 의도치 않게 값 변경
console.log(i); // 5

- ES6에서 도입된 let, const 키워드는 블록 레벨 스코프 지원

 

블록 레벨 스코프

---

- 함수 몸체 뿐만 아니라 모든 코드 블록(if, for, while, try/catch 등)에서 지역 스코프를 만드는 것

- C나 자바 등을 비롯한 대부분의 프로그래밍 언어에서 사용

 

렉시컬 스코프

---

동적 스코프

- 함수가 호출되는 시점에 동적으로 상위 스코프를 결정

 

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

- 함수 정의가 평가되는 시점에 상위 스코프가 정적으로 결정, 언제나 함수를 어디서 정의했는지에 따라 상위 스코프가 결정

-  상위 스코프가 동적으로 변하지 않음, 함수가 호출된 위치는 상위 스코프 결정에 어떠한 영향도 주지 않음

- 자바스크립트를 비롯한 대부분의 프로그래밍 언어가 렉시컬 스코프를 따름

- 함수 정의(함수 선언문, 함수 표현식)가 실행되어 생성된 함수 객체는 상위 스코프를 기억, 함수가 호출될 때마다 상위 스코프를 참조하기 위해

- 전역에서 정의된 함수는 언제나 전역 스코프를 상위 스코프로 사용

 

 

 

 

 

출처

- 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리