1. 스코프(Scope)
스코프(Scope)는 변수에 접근할 수 있는 범위를 의미한다.
JavaScript에서 변수는 프로그램 어디에서든 사용할 수 있는 것이 아니라
변수가 선언된 위치에 따라 접근 가능한 영역이 결정된다.
즉 코드에는 다음과 같은 접근 범위 구조가 존재한다.
전역 스코프
⎿ 함수 스코프
⎿ 내부 함수 스코프상위 스코프에 선언된 변수는 하위 스코프에서 접근할 수 있지만
하위 스코프에서 선언된 변수는 상위 스코프에서 접근할 수 없다.
let a = 10;
function test() {
let b = 20;
console.log(a);
}
test();이 코드에서 변수의 스코프는 다음과 같다.
- a → 전역 스코프
- b → test 함수 내부 스코프
따라서 test 함수 내부에서는 전역 변수 a에 접근할 수 있지만
전역에서는 b에 접근할 수 없다.
console.log(b); // ReferenceError이처럼 변수의 접근 가능 범위를 결정하는 개념을 스코프(Scope)라고 한다.
2. 렉시컬 스코프 (Lexical Scope)
JavaScript에서는 스코프가 코드가 작성된 위치에 의해 결정된다.
이러한 스코프 결정 방식을 렉시컬 스코프(Lexical Scope) 라고 한다.
여기서 Lexical은 "코드의 문자적 위치"를 의미한다.
즉 JavaScript는 함수가 어디서 호출되었는지가 아니라
함수가 어디에서 선언되었는지에 따라 스코프가 결정된다.
let x = 10;
function outer() {
let x = 20;
function inner() {
console.log(x);
}
inner();
}
outer();이 코드의 실행 결과는 20이다.
그 이유는 inner 함수가 outer 함수 내부에서 선언되었기 때문이다.
코드의 구조를 보면 다음과 같다.
global
⎿ outer
⎿ innerJavaScript에서는 함수가 선언될 때
자신이 선언된 위치의 스코프를 기준으로 변수에 접근한다.
따라서 inner 함수는 outer의 스코프에 접근할 수 있고
outer에 선언된 x = 20을 참조하게 된다.
이처럼 함수가 선언된 위치를 기준으로 스코프가 결정되는 규칙을
렉시컬 스코프라고 한다.
3. 스코프 체인 (Scope Chain)
JavaScript에서 변수를 사용할 때
엔진은 해당 변수를 현재 스코프에서 먼저 찾는다.
만약 현재 스코프에 해당 변수가 없다면
상위 스코프로 올라가면서 변수를 탐색한다.
이 과정을 스코프 체인(Scope Chain) 이라고 한다.
즉 변수 탐색은 다음과 같은 순서로 이루어진다.
현재 스코프
→ 부모 스코프
→ 전역 스코프앞서 살펴본 예제를 다시 보자.
let x = 10;
function outer() {
let x = 20;
function inner() {
console.log(x);
}
inner();
}
outer();이 코드의 스코프 구조는 다음과 같다.
global
⎿ outer
⎿ innerinner 함수에서 x를 찾는 과정은 다음과 같다.
1. inner 스코프 확인
2. outer 스코프 확인
3. global 스코프 확인inner 스코프에는 x가 존재하지 않기 때문에
상위 스코프인 outer로 올라가게 된다.
그 결과 outer에 선언된 x = 20을 찾게 되고
console.log(x)의 결과는 20이 된다.
JavaScript는 현재 스코프에서 시작해 상위 스코프로 이동하며 변수를 탐색한다.
이러한 탐색 구조를 스코프 체인(Scope Chain)이라고 한다.
4. 렉시컬 스코프의 특징
스코프는 코드 구조로 결정된다.
JavaScript에서 스코프는 코드가 작성된 위치,
즉 함수가 선언된 위치에 의해 결정된다.
따라서 함수가 어디에서 실행되었는지가 아니라
어디에서 선언되었는지가 변수 접근 범위를 결정한다.
함수 호출 위치는 스코프에 영향을 주지 않는다.
렉시컬 스코프에서는 함수가 호출된 위치는 중요하지 않다.
함수는 실행되는 위치와 관계없이
자신이 선언된 위치의 스코프를 기준으로 변수에 접근한다.
예를 들어 함수가 다른 스코프에서 실행되더라도
자신이 정의된 환경의 스코프를 기준으로 동작한다.
함수는 자신이 선언된 환경을 따른다.
JavaScript의 함수는 선언될 때
자신이 선언된 스코프를 함께 기억한다.
그래서 함수가 다른 곳에서 실행되더라도
원래 선언되었던 스코프의 변수에 접근할 수 있다.
이러한 특성은 이후 클로저(Closure)라는 개념으로 이어진다.
5. 렉시컬 스코프와 this의 차이
JavaScript에서 렉시컬 스코프와 this는 기준이 서로 다르다.
렉시컬 스코프는 함수가 선언된 위치를 기준으로 결정되지만
this는 함수가 호출되는 방식에 따라 결정된다.
즉 두 개념은 다음과 같은 차이를 가진다.
- 렉시컬 스코프 → 선언 위치 기준
- this → 호출 방식 기준
예를 들어 다음 코드를 보자.
const person = {
name: "홍길동",
greet() {
console.log(this.name);
},
};
person.greet();이 코드에서 this는 person을 가리킨다.
그 이유는 greet 함수가 person 객체를 통해 호출되었기 때문이다.
즉 this는 함수가 어디에서 선언되었는지가 아니라
어떤 방식으로 호출되었는지에 따라 결정된다.
반면 렉시컬 스코프는
함수가 선언된 위치를 기준으로 스코프가 결정된다.
이처럼 JavaScript에서는
선언 위치를 기준으로 하는 렉시컬 스코프와
호출 방식을 기준으로 하는 this 규칙이 동시에 존재한다.
이 두 개념은 모두 함수와 관련된 개념이지만
동작 기준이 전혀 다르기 때문에 자주 혼동되는 개념이다.
6. 핵심 정리
- 스코프는 변수에 접근할 수 있는 범위를 의미한다.
- JavaScript는 렉시컬 스코프 규칙을 사용한다.
- 스코프는 함수가 선언된 위치(코드 구조)에 의해 결정된다.
- 변수는 현재 스코프에서 시작해 상위 스코프로 이동하며 탐색되는 스코프 체인 구조를 따른다.
- 렉시컬 스코프는 선언 위치 기준,
this는 호출 방식 기준이라는 차이를 가진다.
이로써 JavaScript에서 변수의 접근 범위가 어떻게 결정되고 탐색되는지를 이해할 수 있다.
