[JS] 렉시컬 스코프(Lexical Scope) 란??

스코프란?

스코프(Scope)란, 유효범위란 뜻으로 자바스크립트를 포함한 모든 프로그래밍 언어에서 사용하는 중요한 개념입니다.

스코프의 개념을 잘 알아야 자바스크립트의 let, const와 var 선언자의 차이 등을 이해하는데 어려움을 덜 수 있습니다.

[추가 글 작성 예정입니다.]

코드는 크게 두 가지의 스코프로 구분할 수 있습니다.

코드의 가장 바깥 영역, 전역 스코프
함수 몸체 내부 영역, 지역 스코프

간단한 예제를 살펴보면,

예제 코드 내부에 위와 같은 스코프가 있는 것을 볼 수 있습니다.

[추가 글 작성 예정입니다.]

아래 코드를 예측 해보려고 합니다. 잠시 스크롤을 멈추고 생각해보길 권해드립니다.

var x = 1;

function foo() {
  var x = 10;
  bar();
}

function bar() {
  console.log(x);
}

foo();		// ??
bar();		// ??

실행결과를 예측해보면, 두 가지의 가설을 세울 수 있습니다.

1번과 같은 스코프 결정 기준을 동적 스코프라고 하며, 상위 스코프를 결정함에 있어 함수가 어디에서 호출됐는지에 따라 결정하여 실행 중에 동적으로 변하는 특징을 가지고 있다.

2번과 같은 스코프 결정 기준을 렉시컬(정적) 스코프라고 하며, 함수의 호출이 아닌 함수의 정의를 기준으로 상위 스코프를 결정한다.

자바스크립트는 렉시컬 스코프를 따르며, 따라서 위의 예제는 아래와 같은 결과가 나온다.

var x = 1;

function foo() {
  var x = 10;
  bar();
}

function bar() {
  console.log(x);
}

foo();		// 1
bar();		// 1

이는 함수의 정의 방식이 바뀌어도 같은 결과를 출력한다.

var x = 1;

function foo() {
  var x = 10;
  bar();
}

const bar = function () {
  console.log(x);
}

foo();		// 1
bar();		// 1

var x = 1;

function foo() {
  var x = 10;
  bar();
}

const bar = () => {
  console.log(x);
}

foo();		// 1
bar();		// 1

자바스크립트의 렉시컬 스코프를 알고 있다고 생각했지만,

함수의 평가 단계에서 스코프가 결정되어 함수 표현식이나 화살표 함수는 다른 결과가 나오지 않을까? 라는 생각을 해봤는데,

이는 함수의 정의단계에서 결정되어서 자바스크립트의 평가, 실행 단계와 상관없이 진행되는 것을 알 수 있었다.

역시 공부는 끝이 없구나..

“모던 자바스크립트 딥다이브”, 이웅모