스코프란?

JavaScript 에서 Scope(스코프)는 식별자(변수 이름, 함수이름, 클래스 이름) 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위를 말한다.

스코프의 종류

아래 예제를 보자

예제에 나온 전역은 코드의 가장 바깥 영역을 말한다.
전역은 전역 스코프를 만들며
전역에 변수를 선언 할시 전역 스코프를 갖는 전역 변수가 되고
전역 변수는 코드 위치와 상관없이 어디에서든지 참조할 수 있다.

지역과 지역 스코프

지역은 함수 몸체 내부를 말한다.
지역은 지역 스코프를 만들며
지역 변수를 선언하면 지역 스코프를 갖는 지역 변수가 된다.
지역 변수는 자신이 선언된 지역과 하위 지역에서만 참조 할 수 있으며
"지역 변수는 자신이 지역 스코프와 하위 지역 스코프에서 유효하다"

그림을 보면 outer 함수 내부에 선언된 식별자 z는 지역 변수다.
하지만 전역 변수가 선언된 x, y 환경에서 outer 함수 내부에 선언된 식별자 지역변수 z를 참조할 경우 참조 에러가 발생한다.
innter 함수 내부에 선언된 x 변수도 동일하다.

스코프 체인

앞장에서 중첩 함수에 대해 다뤄 봤다.
즉 함수가 중첩이 될 수 있으므로 함수의 지역 스코프도 중첩이 될 수 있다.

이는 "스코프가 함수의 중첩에 의해 계층적 구조를 갖는다" 것을 의미 한다.

즉 중첩 함수의 지역 스코프는 중첩 함수를 포함하는 외부 함수의 지역 스코프와 계층적 구조를 갖으며, 이때 외부 함수의 지역 스코프를 중첩 함수의 상위 스코프라 한다.

스코프 종류에 업로드한 사진을 보았을시
outer, inner는 함수의 지역이 있으며 innter 함수는 outer 함수의 중첩 함수이다.

이때 outer 함수가 만든 지역 스코프는 innter 함수가 만든 지역 스코프의 상위 스코프다.
그리고 outer 함수의 지역 스코프의 상위 스코프는 전역 스코프이며
이러한 계층 구조를 그림으로 나타내면 아래의 그림이다.

이처럼 모든 스코프는 하나의 계층적 구조로 연결되고
모든 지역 스코프의 최상위 스코프는 전역 스코프라 한다.
그리고 위 그림처럼 계층적 구조로 연결된 것을 "스코프 체인"이라고 한다.

스코프 체인은 아주 중요한 내용이기 때문에 프론트엔드 개발자라면 꼭 알고 있자

스코프체인 동작원리

변수를 참조할때 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는
코드의 스코프에서 시작하여
상위 스코프 방향으로 이동하여 선언된 변수를 검색한다

렉시컬 스코프

렉시컬 스코프란 ?

렉시컬 스코프란 중첩된 함수 그룹에서 내부 함수가 상위 범위의 변수 및 기타 리소스에 액세스 할 수 있음을 의미한다.
즉, 함수를 어디서 선언하였는지에 따라 상위 스코프를 결정한다는 뜻이며, 가장 중요한 점은
함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정되며
다른 말로, 정적 스코프(Static Scope)라 부르기도 한다.

아래 예제를 보자

var x = 1;

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

function bar() {
  console.log(x);
}
foo(); // 1
bar(); // 1

위 예제를 보듯 Javascript는 렉시컬 스코프를 따르기에 함수를 선언한 시점에 상위 스코프가 결정 되고. 함수를 어디서 호출하였는지는 스코프 결정에 아무런 영향을 주지 않는다.
위 예제의 bar 함수는 전역에 선언되었기에 bar 함수의 상위 스코프는 전역 스코프이고, 따라서 전역 변수 x의 값 1을 두번 출력한다.

정리하자면

렉시컬 스코프(Lexical Scope)는 함수를 어디서 호출하는지가 아닌 어디에 선언하였는지에 따라 결정됨.