[JavaScript] 스코프 : 식별자의 유효범위

들어가며

이번주 면접 스터디 주제가 스코프, 클로저, 프로미스, this, 프로토타입 등 JS 개념들인데
전체적으로 쭉 어보니 스코프를 제대로 알지 못하면 나머지는 이해하기 힘들거라 생각되어
스코프 개념을 우선 공부했고 그중 핵심이라고 생각하는 부분을 요약해봤습니다.

스코프

식별자를 참조할 수 있는 유효범위

유효범위는 식별자가 선언된 위치로 결정된다.

 

Ex)

var x = "global";

function foo() {
  var x = "local";
  console.log(x); // (1)
}

foo();

console.log(x); // (2)

위 예제 코드에서 코드 가장 바깥 영역에서

선언된 x는 전역에서 참조가능하지만

함수 foo 내부에서 선언된 x는 함수 내부에서만 참조 가능

---

스코프 체인

'함수가 중첩되면서 발생한 scope의 계층 구조'

 

JS 엔진은 변수를 참조할 때 변수를 참조하는 스코프에서 시작해서
상위 스코프 방향으로 이동하며 선언된 변수를 검색해서 사용함

 

Ex)

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

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

  console.log(x); // 전역변수 x
  console.log(y); // 전역변수 y
  console.log(z); // outer 지역변수 z

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

    console.log(x); // inner 지역변수 x
    console.log(y); // 전역변수 y
    console.log(z); // outer 지역변수 z
  }

  inner();
}

outer();

console.log(x); // 전역변수 x
console.log(z); // 참조 error : z가 정의되지 않음

---

동적 스코프 VS 렉시컬 스코프

1. 동적 스코프 (dynamic scope)

함수를 어디서 호출했는지에 따라 상위 스코프 결정

2. 렉시컬 스코프 (lexical scope)  -> ✅ JS 엔진이 따르는 스코프 방식

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

Ex)

var x = 1;

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

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

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

함수 bar가 선언된 위치에서
상위 스코프인 x = 1를 참조한다.

참고자료

1. 모던자바스크립트 딥다이브 - 13장 스코프

모던 자바스크립트 Deep Dive - YES24