Javascript 스코프(Scope)

1. var (function-level scope)

 

- 함수 안에서 선언된 변수는 함수 안에서만 유효하다. 외부는 X

function varScope() {
  if (true) {
    var a = "var 스코프";
    console.log(a);
  }
  console.log(a);
}
func();
console.log(a); // 에러발생 

/* === 실행 결과 ===
var 스코프
var 스코프
Uncaught ReferenceError: a is not defined
*/

---

2. let / const (block-level scope)

 

- 코드 블록 {} 내부에서 선언된 변수는 블록안에서만 유효. 외부는 X

function blockScope() {
  if (true) {
    let a = "block scope";
    console.log(a);
  }
  console.log(a); // 에러발생
}
blockScope();
console.log(a); // 에러발생

/* === 실행결과 ===
block scope
Uncaught ReferenceError: a is not defined
*/

---

스코프 체인

함수는 중첩될 수 있다. 때문에 함수의 지역 스코프도 중첩될 수 있다.

스코프가 함수의 중첩에 의해 계층적 구조를 갖는다.

모든 지역 스코프의 최상위 스코프는 전역 스코프다. 이 스코프가 계층적으로 연결된 것을 스코프 체인이라고 한다.

var x = "전역 x";
var y = "전역 y";

function outer() {
  var z = "outer의 지역 z";

  console.log(x);
  console.log(y);
  console.log(z);

  function inner() {
    var x = "inner 의 지역 x";

    console.log(x);
    console.log(y);
    console.log(z);
  }
  inner();
}

outer();

console.log(x);
console.log(y);

/*
전역 x
전역 y
outer의 지역 z
inner 의 지역 x
전역 y
outer의 지역 z
전역 x
전역 y
*/

스코프 체인은 실제로 존재한다. 자바스크립트 엔진은 코드(전역 코드와 함수 코드) 를 실행하기에 앞서 위 그림과 유사한 자료구조인 렉시컬 환경을 실제로 생성한다. 변수 선언이 실행되면 변수 식별자가 이 자료구조(렉시컬 환경)에 키로 등록되고, 변수 할당이 일어나면 이 자료구조의 변수 식별자에 해당하는 값을 변경한다.

렉시컬 환경 : 스코프 체인은 실행 컨텍스트의 렉시컬 환경을 단방향으로 연결한 것이다. 전역 렉시컬 환경은 코드가 로드되면 곧바로 생성되고 함수의 렉시컬 환경은 호출되면 곧바로 생성된다.

스코프 체인으로 연결된 스코프의 계층적 구조는 부자 관계로 이뤄진 상속과 유사하다. 상속을 통해 부모의 자산을 자식이 자유롭게 사용할 수 있지만 자식의 자산을 부모가 사용할 수는 없다. 스코프 체인도 마찬가지의 개념이다.

자바스크립트는 렉시컬 스코프를 따른다. 즉 함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정한다.