🥸 모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효범위가 결정되는데, 이때 이 범위를 스코프라고 합니다. 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙이라고도 할 수 있습니다.
특징
- 코드 블록이나 함수는 중첩될 수 있으며, 함수의 매개변수는 함수 몸체 내부에서만 참조할 수 있고 함수 몸체 외부에서는 참조할 수 없다.
const num1 = 1;
if (true) {
const num2 = 2;
if (true) {
const num3 =3;
}
}
function foo() {
const num4 = 4;
function bar() {
const num5 = 5;
}
}
console.log(num1); // 1
console.log(num2); // 2
console.log(num3); // 3
console.log(num4); // ReferenceError: num4 is not defined
console.log(num5); // ReferenceError: num5 is not defined🌟 코드가 어디서 실행되며 주변에 어떤 코드가 있는지를
렉시컬 환경이라고 부른다. 코드의 문맥은 렉시컬 환경으로 이루어지며, 이를 구현한 것이실행 컨텍스트이다. 모든 코드는 실행 컨텍스트에서 평가되고 실행된다.
- 스코프 내에서 식별자는 유일해야 하지만 다른 스코프에는 같은 이름의 식별자를 사용할 수 있다.
하지만 var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언이 허용된다.
// var 키워드
function foo() {
var x = 1;
var x = 2;
console.log(x); // 2
}
foo();
// let/const 키워드
function bar() {
let x = 1;
let x = 2; // SyntaxError: Identifier 'x' has already been declared
}
bar();🍒 스코프의 종류
1. 전역 스코프
코드의 가장 바깥 영역을 전역이라고 하며, 전역은 전역 스코프를 만든다. 전역에 변수를 선언하면 전역 스코프를 갖는 전역 변수가 된다.
- 전역 변수는 어디서든지 참조할 수 있다.
- 함수 내부에서도 참조할 수 있다.
2. 지역 스코프
함수 몸체 내부를 지역이라고 하며, 지역은 지역 스코프를 만든다. 지역에 변수를 선언하면 지역 스코프를 갖는 지역 변수가 된다.
- 지역 변수는 자신의 지역 스코프와 하위 지역 스코프에서 유효하다.
- 지역 변수를 전역에서 참조하면 참조 에러가 발생한다.
🍒 스코프 체인
스코프가 계층적으로 연결된 것을 스코프 체인이라고 하며, 변수를 참조할 때 자바스크립트 엔진은 스코프체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 검색한다. 이를 통해 상위 스코프에서 선언한 변수를 하위 스코프에서도 참조할 수 있다.
스코프 체인에 의한 변수 검색
const x = "global x";
const y = "global y";
function outer() {
const z = "outer's local z";
console.log(x); // global x
console.log(y); // global y
console.log(z); // outer's local z
function inner() {
const x = "inner's local x";
console.log(x); // inner's local x
console.log(y); // global y
console.log(z); // outer's local z
}
inner();
}
outer();
console.log(x); // global x
console.log(z); // RefernceError: z is not defined
스코프 체인에 의한 함수 검색
function foo() {
console.log('global');
}
function bar() {
function foo() {
console.log('local');
}
foo();
}
bar(); // local🍒 함수 레벨 스코프
var 키워드로 선언된 변수는 오로지 함수의 코드 블록(함수 몸체)만을 지역 스코프로 인정한다. 이러한 특성을 함수 레벨 스코프라 한다.
if, for, while, try/catch 등의 지역 스코프는 블록 레벨 스코프라 하며, var 키워드를 사용하여 전역 변수와 지역 변수에 같은 변수명을 사용하면 의도치 않은 값의 재할당을 야기할 수 있다.
var x = 1;
if (true) {
var x = 10;
}
console.log(x); // 10🍒 렉시컬 스코프
함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정하는 방식을 렉시컬 스코프라고 한다. 함수 정의가 평가되는 시점에 상위 스코프가 정적으로 결정되기 때문에 정적 스코프라고 부른다. 자바스크립트를 비롯한 대부분의 프로그래밍 언어는 렉시컬 스코프를 따른다.
const x = 1;
function foo() {
const x = 10;
bar();
}
function bar() {
console.log(x);
}
foo(); // 1
bar(); // 1🌟 함수의 상위 스코프를 결정하는 방법에는 한 가지가 더 있는데, 함수를 어디서 호출했는지에 따라 함수의 상위 스코프를 결정하는 동적 스코프 방식이 있다. Perl, Bash Shell 등에서 사용한다.
🧐 해당 글은 책
모던 자바스크립트 deep dive를 참고하여 작성하였습니다.
