자바스크립트는 렉시컬 스코프를 따릅니다.
렉시컬 스코프란 함수가 정의 된 스코프의 상위 스코프를 결정하는 것입니다. 호출 된 위치는 상위 스코프의 결정에 영향을 끼치지 않습니다.
예를 들어
단어(함수)는 사전(상위 스코프)의 한 페이지 문단(렉시컬 스코프)에 있는데 그 페이지에서 단어의 뜻를 참조한다는 느낌으로 이해했습니다.
대화를 할때(함수의 호출, 동적 스코프) 우리가 단어(함수)의 뜻을 말해도 단어의 뜻은 사전(상위 스코프)에 있는 느낌으로 이해했습니다.
상위 스코프 결정
let x = 1;
const foo = () => {
let x = 10;
bar();
};
const bar = () => {
console.log(x);
};
foo(); // 1
bar(); // 1위의 실행 결과가 foo,bar 함수를 호출 했을 때 1, 1이 나왔습니다.
실행 결과는 bar 함수의 상위 스코프가 무엇인지에 결정됩니다.
두가지 패턴으로 함수의 상위 스코프를 결정합니다.
- 함수를 어디서 호출했는지
- 함수를 어디서 정의했는지
프로그래밍 언어는 위 두가지 방식중 하나로 상위 스코프를 결정합니다.
1. 함수를 어디서 호출했는지
동적 스코프라 합니다. 함수를 정의하는 시점에는 함수가 어디서 호출 될지 알 수 없기에
함수가 호출되는 시점에서 동적으로 상위 스코프를 결정해야하기 때문에 동적 스코프라 합니다.
2. 함수를 어디서 정의했는지
렉시컬 스코프 또는 정적 스코프라 합니다. 동적 스코프 방식처럼 상위 스코프가 동적으로 변하지 않고 함수 정의가 평가되는 시점에 상위 스코프가 정적으로 결정이 됩니다.
대부분의 프로그래밍 언어는 렉시컬 스코프를 따릅니다.
자바스크립트는 렉시컬 스코프를 따른다.
자바스크립트는 렉시컬 스코프를 따르므로 함수를 어디서 호출 했는지가 아니라 함수를 어디서 정의했는지에 따라 상위 스코프를 결정합니다.
함수가 호출된 위치는 상위 스코프 결정에 어떠한 영향도 주지않습니다.
함수의 상위 스코프는 언제나 자신이 정의된 스코프입니다.
함수의 상위 스코프는 함수가 정의 될 때 정적으로 결정됩니다.
함수 정의가 실행되어 생성된 함수 객체는 이렇게 결정된 상위 스코프를 기억합니다.
함수를 호출할 때마다 함수의 상위스코프를 참조할 필요가 있기 때문입니다.
let x = 1;
const foo = () => {
let x = 10;
bar();
};
const bar = () => {
console.log(x);
};
foo(); // 1
bar(); // 1자바스크립트는 렉시컬 환경을 따르기 때문에 bar 함수를 호출하였을 때 bar 함수가 정의된 상위 스코프인 전역 스코프의 전역 변수인 x=1을 참조하여 1을 출력한 것입니다.
Reference
- 모던 자바스크립트 Deep Dive - 이웅모
- 코어 자바스크립트 - 정재남
