[자바스크립트 Deep Dive] 13. 스코프

13.1 스코프란?

식별자가 유효한 범위

• 모든 식별자는 자신이 선언된 위치에 따라 스코프가 결정됨

• 식별자는 스코프 내에서 유일해야 하지만, 다른 스코프에는 같은 이름의 식별자가 존재할 수 있음 -> 스코프는 네임스페이스임

cf) 네임스페이스: 모든 식별자가 고유하도록 보장하는 코드 영역

13.2 스코프의 종류

13.2.1 전역과 전역 스코프

• 전역: 코드의 가장 바깥 영역
  전역변수: 전역 스코프를 갖는 변수로, 어디에서든 참조할 수 있음

13.2.2 지역과 지역 스코프

• 지역: 함수 몸체 내부
  지역변수: 지역 스코프를 갖는 변수로, 자신의 지역 스코프와 하위 지역 스코프에서 유효함

// 전역 스코프
const x = "global x";
const y = "global y";

function outer() {
  // 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() {
    // 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); // Uncaught ReferenceError: z is not defined

13.3 스코프 체인

스코프가 계층적으로 연결된 것

• 변수를 참조할 때, JS 엔진은 스코프 체인을 통해 현재 스코프에서 상위 스코프로 이동하며 선언된 변수를 검색함
  -> 상위 스코프에서 선언된 변수를 하위 스코프에서 참조할 수 있음

13.4 함수 레벨 스코프

• 함수의 코드 블록만을 지역 스코프로 인정하는 것
  e.g. var 키워드로 선언된 변수

var x = 1;

if (true) {
  var x = 2; // 전역변수 중복 선언
}

console.log(x); // 2

13.5 렉시컬 스코프

함수를 어디서 정의했는지에 따라 상위 스코프가 결정되는 것

• 자바스크립트는 렉시컬 스코프 방식을 따름
  -> 함수의 상위 스코프는 자신이 정의된 스코프임

const x = 1;

function foo() {
  const x = 2;
  bar();
}

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

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