<모던 자바스크립트 Deep Dive> 13장 스코프 요약

13. 스코프

1) 스코프(scope)

- 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 유효 범위가 결정됨

- 즉, 스코프는 식별자가 유효한 범위를 뜻함

- 자바스크립트 엔진은 식별자를 검색하여 어떤 식별자를 사용할지 결정할 때에 스코프를 이용함

- 일반적으로 컴퓨터에서 속한 폴더가 다르면 파일명이 같더라도 다르게 취급되는데, 스코프 또한 식별자 이름이 같더라도 스코프가 다르면 다르게 취급됨(스코프 = 네임스페이스)

 

 

2) 스코프의 종류

구분	설명	스코프	변수
전역	코드의 가장 바깥 영역	전역 스코프	전역 변수
지역	함수 몸체 내부	지역 스코프	지역 변수

 

- 전역 변수는 어디에서든지 참조 가능

- 지역 변수는 자신이 선언된 지역과 하위 지역(중첩 함수)에서만 참조 가능

var x = "전역 x";
var y = "전역 y";

function outer() {
	var z = "outer 함수, 지역 z";
    
    console.log(x); // "전역 x"
    console.log(y); // "전역 y"
    console.log(z); // "outer 함수, 지역 z"
    
    function inner() {
    	var x = "inner 함수, 지역 x";
        
        console.log(x); // "inner 함수, 지역 x"
        console.log(y); // "전역 y"
        console.log(z); // "outer 함수, 지역 z"
    }
    
    inner();
}

outer();

console.log(x); // "전역 x"
console.log(z); // ReferenceError: z is not defined

 

 

3) 스코프 체인

- 함수는 중첩이 가능한데, 함수 내부에서 정의된 함수를 중첩 함수, 중첩 함수를 포함하는 함수를 외부 함수라 함

- 함수의 중첩이 가능함에 따라 함수의 지역 스코프도 중첩이 가능함

- 중첩 함수의 지역 스코프는 외부 함수의 스코프와 계층적 구조를 가지게 되며 이를 스코프 체인이라 함(자바스크립트 엔진에 의해 실제로 만들어짐 - 렉시컬 환경 : "코드가 어디서 실행되며 주변에 어떤 코드가 있는지")

- 외부 함수의 스코프는 상위 스코프가 됨

- 자바스크립트 엔진은 변수를 참조할 때 스코프 체인을 통해 상위 스코프 방향으로 이동하며 변수를 검색

- 스코프 체인은 변수 뿐만 아니라 식별자 모두에게 해당

 

 

4) 함수 레벨 스코프

- 코드 블록으로 지역 스코프를 생성하는 특징을 블록 레벨 스코프, 함수의 코드 블록만을 지역 스코프로 인정하는 특징을 함수 레벨 스코프라 함

- var 키워드로 선언된 변수는 같은 스코프 내에서 식별자 이름 중복 허용(부작용 발생), let과 const 키워드로 선언된 변수는 같은 스코     프 내에서 식별자 이름 중복 허용하지 않음

var x = 1;

if (true) {
	var x = 10; // var 키워드의 특징으로 인해 변수 값이 변경되는 부작용 생김
}

console.log(x); // 10

 

 

5) 렉시컬 스코프

- 함수를 어디서 호출했는지에 따라 함수의 상위 스코프를 결정하면 동적 스코프

- 함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정하면 렉시컬 스코프(정적 스코프)

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

var x = 1;

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

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

foo(); // 1
bar(); // 1

 

 

 

 

 

참고 : 도서 <모던 자바스크립트 Deep Dive>