제로베이스 네카라쿠배 온라인스쿨 1기 과정(2021. 11 ~ 2021. 12)에서 공부했던 Javascript Deepdive 교재의 내용 요약 및 필자의 생각을 정리한 내용입니다. 원서의 내용 챕터의 일부를 요약한 내용으로 보다 자세한 내용은 원서를 참조 바랍니다.
13장 스코프
13.1 스코프란?
- 스코프(유효범위)는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적이며 중요한 개념이다. 특히 자바스크립트에는 다른 언어 스코프와 구별되는 특징이 있어 주의가 필요하다.
- 함수의 매개변수는 함수 몸체 내부에서만 참조할 수 있고 함수 몸체 외부에서 참조할 수 없다고 했는데 이러한 매개변수를 참조할 수 있는 유효범위, 즉 매개변수의 스코프가 함수 몸체 내부로 한정되기 때문에 그렇다.
- 변수는 자신이 선언된 위치에 의해 자신이 유효한 범위, 즉 다른 코드가 변수 자신을 참조할 수 있는 범위가 결정된다.
- 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정되며 이를 스코프라 한다.
- 스코프는 식별자가 유효한 범위를 말한다.
var x = "global"
function foo() {
var x = "local"
console.log(x)
}
foo()
console.log(x)
- 코드 가장 바깥 영역(전역)과 foo 함수 내부(함수)에 같은 이름을 갖는 x 변수를 선언했고, 각각 x 변수를 참조하는 코드에서 자바스크립트는 두 변수중 어떤 변수를 참조해야 할 것인지를 결정하게 되는데 이를 식별자 결정(identifier resolution)이라 한다.
- 스코프란 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙이라고도 할 수 있다.
코드의 문맥과 환경
-
“코드가 어디서 실행되며 주변에 어떤 코드가 있는지”를 렉시컬 환경(Lexical environment)이라 부른다.
-
코드의 문맥(context)은 렉시컬 환경으로 이뤄지며 이를 구현한 것이 실행 컨텍스트(execution context)이며, 모든 코드는 실행 컨텍스트에서 평가되고 실행된다.
-
위 예시 코드에서 2개의 x는 각각의 유효한 범위(스코프)가 다른 별개의 변수다.
-
식별자는 값을 구별할 수 있어야 하므로 유일해야 한다. 따라서 중복될 수 없다.
-
하지만 사람이 컴퓨터를 사용하다보면 하나의 파일 이름만 사용하는 것이 아니라 여러 파일을 사용하고 그 때마다 새로운 이름을 또 만들다 보면 번거로울 것이 분명하다. 이런 충돌을 방지하기 위해서 컴퓨터에는 폴더라는 개념이 있고 프로그래밍 언어에는 스코프란 개념이 있는 것이다.
-
즉 다른 스코프에는 같은 이름의 식별자를 사용할 수 있어, 스코프도 네임스페이스라고 할 수 있다.
-
var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언이 허용되어 의도치 않게 변수값이 재할당되어 변경되는 부작용을 발생시킨다.(let, const는 이를 방지해줌)
13.2 스코프의 종류
- 코드는 크게 전역(Global)과 지역(Local)로 구분할 수 있다.
13.2.1. 전역과 전역 스코프
- 전역이란 코드의 가장 바깥 영역을 말한다. 전역은 전역 스코프를 만들며, 전역에 선언한 변수는 전역 변수가되고, 전역 변수는 어디서든지 참조할 수 있다.
13.2.2 지역과 지역스코프
- 지역이란 함수 몸체 내부를 말한다. 지역은 지역 스코프를 만들며, 지역에 변수를 선언하면 지역 변수가 된다.
- 지역 변수는 자신의 지역 스코프와 하위 지역 스코프에서 유효하다.
13.3 스코프 체인
- 함수 몸체 내부에서 함수가 정의된 것을 함수의 중첩이라 하고, 이 함수를 중첩 함수, 중첩 함수를 포함하는 함수를 외부 함수라고 한다.
- 함수가 중첩이 되는 것처럼 함수의 지역 스코프도 중첩될 수 있다.
- 이는 스코프가 함수의 중첩에 의해 계층적 구조를 갖는다는 것을 의미한다.
- 외부 함수의 지역 스코프는 중첩 함수의 상위 스코프가 된다.
- 스코프가 계층적으로 연결된 것을 스코프 체인(scope chain)이라 한다.
- 변수를 참조할 때 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하며 상위 스코프 방향으로 이동하며 선언된 변수를 검색한다(identifier resolution).
- 이를 통해 상위 스코프에서 선언한 변수를 하위 스코프에서도 참조할 수 있다.
- 자바스크립트 엔진은 코드를 실행하기 앞서 렉시컬 환경(Lexical Environment)를 생성하여 스코프 체인을 만든다.
- 변수 선언이 실행되면 변수 식별자가 이 자료구조(렉시컬 환경)에 키로 등록되고, 변수 할당이 일어나면 이 자료구조의 변수 식별자에 해당하는 값을 변경한다.
- 변수 검색 역시 렉시컬 환경에서 이뤄진다.
렉시컬 환경(Lexical Environment)
- 스코프 체인은 실행 컨텍스트의 렉시컬 환경을 단방향으로 연결한 것이다.
- 전역 렉시컬 환경은 코드가 로드되면 곧바로 생성되고, 함수 렉시컬 환경은 함수가 호출되면 곧바로 생성된다.
13.3.1 스코프 체인에 의한 변수 검색
- 자바스크립트 엔진은 하위 스코프로 내려가면 식별자를 검색하지 않는다. ⇒ 현재 스코프에 변수가 없으면 상위 스코프로 이동하면서 선언된 변수를 검색한다.
- 상위 스코프에서 유효한 변수는 하위 스코프에서 자유롭게 참조할 수 있지만 하위 스코프에서 유효한 변수는 상위 스코프에서 참조할 수 없다.
Comment: 자바 스코프 개념 배울때도 매우 강조해서 배웠던 부분. 잘 정리해서 말할 수 있도록 기억하자.
13.3.2 스코프 체인에 의한 함수 검색
function foo() {
console.log("global function foo")
}
function bar() {
function foo() {
console.log("local function foo")
}
foo()
}
bar()
- 함수 역시 변수와 동일한 방식으로 작동한다.
- 스코프는 식별자를 검색하는 규칙이라고 말할 수 있다.
13.4 함수 레벨 스코프
- 지역 스코프는 코드 블록이 아닌 함수에 의해서 지역 스코프가 생성된다.
- C나 자바 등 대부분 언어에서는 함수 몸체 뿐 아니라 모든 코드 블록이 지역 스코프를 만들며, 이를 블록 레벨 스코프(Block lebel scope)라 하지만 var 키워드로 선언된 변수는 오로지 함수의 코드 블록(함수 몸체)만을 지역 스코프로 인정한다.
13.5 렉시컬 스코프
- 함수를 어디서 호출했는지에 따라 함수의 상위 스코프를 결정한다.
- 함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정한다.
- 첫번째 방식은 동적 스코프라 하며, 함수가 정의되는 시점에 함수가 어디서 호출될지 알 수 없기 때문에 동적으로 상위 스코프를 결정한다는 의미에서 동적 스코프라 부른다.
- 두번째 방식은 렉시컬 스코프 혹은 정적 스코프라 하며, 함수 정의가 평가되는 시점에 상위 스코프가 정적으로 결정되기 때문에 정적 스코프라 부른다.
- 자바스크립트 포함 대부분 프로그래밍 언어는 렉시컬 스코프를 따른다.
- 즉, 자바스크립트는 렉시컬 스코프를 따르므로 함수를 어디서 정의했는지에 따라 상위 스코프를 결정한다.
- 함수가 호출된 위치는 상위 스코프 결정에 영향을 주지 않는다.
- 함수의 상위 스코프는 언제나 자신이 정의된 스코프다.
- 함수의 상위 스코프는 함수 정의가 실행될 때 정적으로 결정되며, 함수 정의(함수 선언문 또는 함수 표현식)가 실행되어 생성된 함수 객체는 이렇게 결정된 상위 스코프를 기억한다.
var x = 1
function foo() {
var x = 10
bar()
}
function bar() {
console.log(x)
}
foo()
bar()
- 위 코드에서 foo가 호출되고, 내부의 bar함수가 호출되면, bar 함수는 자신의 상위 스코프를 찾는데, 자바스크립트는 렉시컬 스코프를 따르므로, bar가 정의된 시점의 상위 스코프인 전역 스코프를 따른다. 따라서 x 값은 전역 변수 x의 값을 따르게 된다.