[Javascript] Scope

앞선 글에서 함수 레벨 스코프, 블록 레벨 스코프라는 단어가 사용되었는데, 이 글에서는 여기서 말하는 스코프란 무엇인지에 대해 다루어보도록 하겠습니다. 

 

(1) 스코프란?

스코프란 유효 범위를 의미하는 단어로, 변수 및 매개변수의 접근성과 생존기간을 말합니다. 스코프는 자바스크립트뿐만 아니라 대부분의 프로그래밍 언어의 주요 개념이므로, 개념을 잘 이해하고 있어야 합니다.

 

(2) 전역 스코프

전역 스코프는 자바스크립트에서 가장 바깥 범위(함수 내부에 포함되지 않은), 즉 window 객체(Node.js에서는 global 객체)에 포함된 객체가 가지는 스코프를 의미합니다. 스크립트 내 어느 곳에서든 참조됩니다. 지난 글에서 다루었듯 전역 스코프를 만드는 일은 최대한 지양해야 합니다. ([requireJS] 전역 변수 오염을 어떻게 방지할까? 참조)

 

(3) 지역 스코프 

함수 레벨 스코프와 블록 레벨 스코프가 지역 스코프에 해당합니다. 자바스크립트에는 이 두 가지 지역 스코프가 존재하며, 코드의 특정 부분에서만 사용할 수 있습니다. 

• 함수 레벨 스코프

var 키워드로 선언된 변수나, 함수 선언식으로 만들어진 함수가 가지는 스코프로, 함수 내부에서 유효한 식별자입니다. 함수 외부에서는 접근이 불가능합니다.

• 블록 레벨 스코프

중괄호({}) 내부에서 const 또는 let으로 선언된 변수로, 중괄호 내부에서만 접근이 가능합니다. 

 

(4) 렉시컬 스코프

렉시컬 스코프는 정적 스코프라고도 하는데, 소스코드가 작성된 문맥에서 변수의 값이 결정됩니다. 그 때문에 런타임 도중의 실행 컨텍스트나 호출 컨텍스트에 의해 결정되는 동적 스코프와 많이 비교됩니다. 

즉, 렉시컬 스코프는 함수의 호출 위치가 아니라 선언 위치에 따라 변수의 값이 결정됩니다. 자바스크립트는 렉시컬 스코프 언어입니다.

 

(5) 스코프 체인 

Nested 스코프라고도 하고 스코프 버블이라고 하기도 합니다. 이름 그대로 scope의 연쇄를 의미하며, 스코프에 대한 탐색이 연쇄적으로 일어나는 것을 의미합니다. 현재 렉시컬 환경에서 접근하고자 하는 변수를 찾아보고, 존재하지 않는다면 바깥 렉시컬 환경을 참조하여 찾아보는 식으로 동작합니다. 

자바스크립트의 함수 객체는 [[scope]]라는 프로퍼티를 가지는데, 이 프로퍼티는 Object Reference 정보들을 일종의 정렬 리스트로 저장하고 있습니다. 즉, 변수의 검색은 이 Scope Chain 내에서만 탐색됩니다.

 

스코프에 대해 이해하고 나면 클로저와 실행 컨텍스트를 이해할 준비가 된 것입니다. 다음 글에서는 실행 컨텍스트에 대해 먼저 다루어보겠습니다.

 

 

 

 

[references]

Javascript Scope and Closures

JavaScript Scope and Closures | CSS-Tricks

The Visual Guide To JavaScript Variable Definitions & Scope

An introduction to scope in JavaScript