스코프(Scope)란❓
“식별자에 대한 유효범위”, "변수에 접근할 수 있는 유효범위" , 중괄호
{}로 구분
스코프(scope)는 말 그대로 “범위”라는 의미를 담고 있습니다. 변수 이름, 함수 이름, 클래스 이름 과 같은 “식별자”가 본인이 선언된 위치에 따라 어디까지 접근이 가능 할 수 있는지를 결정하는 기준이 되는 범위입니다.
스코프(scope)의 한가지 큰 특징은 스코프 안에서 또 다른 스코프를 가질 수 있다는 것입니다. 즉, 계층적인 구조를 가지고 있다는 의미입니다.
이러한 계층적인 구조를 가지고 있기 때문에 어떤 A 라는 스코프(scope)의 경계의 밖에서 선언한 변수는 A의 외부뿐 아니라, A 내부에서도 접근이 가능합니다.
반면에 A 내부에서 선언된 변수는 내부에서 접근이 당연히 가능하지만, A의 외부에서는 접근할 수 없습니다.
// 전역 스코프
const out = "hello";
// 지역 스코프
function sum(){
const inner = "world";
console.log(out) // 접근 가능
}
...
console.log(inner) // 접근 불가*특징
하위 스코프 → 상위 스코프에 접근 가능 ⭕️
상위 스코프 → 하위 스코프에 접근 불가 ❌
변수가 선언되는 위치에 따라 스코프(Scope)는 크게 2가지로 나눌 수 있습니다.
"전역 스코프 (Global Scope)"
: 말 그대로 전역 적인 범위를 의미
"지역 스코프 (Local Scope)"
: 지역 스코프는 조건문, 반복문, 함수 등을 통해 생성된 지역적인 스코프를 의미
스코프 체인(Scope Chain)
함수는 전역(global)에서 선언될 수 있지만, 함수 내부에서도 선언 될 수 있습니다. 이렇게 아래의 그림 같이 함수 안에 함수가 선언되는 것을 “함수의 중첩” 이라고 이야기 합니다.
함수가 중첩된 것은 같은 의미로 “스코프(scope) 가 중첩” 되어 있다고 말할 수 있습니다.
여기서 전역 스코프에서 선언된 변수 X 가 있다고 하고, 함수 B가 변수 X를 사용한다고 했을 때 어떤 순서로 변수를 찾게 될까요??
우리는 앞서 자바스크립트는 함수를 호출하게 되면, 내부적으로 실행 컨텍스트()를 생성한다고 배웠습니다. → 실행 컨텍스트
자바스크립트 코드가 실행되면 엔진 내부에 있는 callstack에 다음과 같이 실행 컨텍스트가 쌓이게 됩니다.
가장 먼저, 변수 X를 사용하는 함수 B 내부에서 형성된 스코프(scope)에서 변수 X가 있는지 찾아볼 것입니다. 찾다가 없으면 그 다음은 함수 B가 선언된 장소인 함수 A의 스코프를 찾아가 탐색 합니다. 함수 A에도 없기 때문에 그 다음 스코프인 전역 스코프에 찾아가 변수 X가 있는지 탐색하게 됩니다.
이렇게 어떠한 식별자를 찾기 위해서 상위 스코프로 계속해서 찾아가는 것을 “스코프 체인”이라고 합니다.
이 “스코프 체인”은 앞서 간단하게 보았던 실행 컨텍스트의 개념을 자바스크립트의 엔진을 통해 물리적으로 가지고 있습니다.
이를 가능하게 하는 것이 바로 실행 컨텍스트의 “LexicalEnvironment” 의 수집 자료인 “outerEnvironmentReference” 입니다.
함수 B의 outerEnvironmentReference는 함수 A의 LexicalEnvironment를 참조합니다. 그리고 함수 A의 LexicalEnvironment에 있는 outerEnvironmentReference는 다시 함수 A가 선언되던 때인 전역 컨텍스트의 LexicalEnvironment를 참조 할 것입니다.
여기서 가장 중요한 점은 " 각 함수의 컨텍스트의 outerEnvironmentReference는 "선언된 시점의 LexicalEnvironment"만을 참조하고 있다" 는 것입니다.
스코프 체인과 함께 언급되는 개념이 바로 “렉시컬 스코프” 와 “클로저(closer)” 입니다. 다음 포스트를 통해서 이 두가지에 대해 더 자세히 알아보겠습니다.
정리
스코프(Scope)는 변수 이름, 함수 이름과 같은 식별자를 구분하고, 참조하여 사용하기 위해 고안된 개념입니다
자바스크립트에서 스코프는 계층적으로 중첩되어 생성될 수 있습니다.
이렇게 중첩되어 생성된 상태에서 하위 스코프에서 참조할 변수를 상위 스코프로 찾아나갈 수 있는데, 이렇게 서로 스코프가 연결되어 있는 것을 “스코프 체인” 이라고 합니다.
참고
책 <코어 자바스크립트>
