scope

🧑🏻‍💻 scope (유효범위)

---

✅ scope란?

• scope는 폴더와 같이 식별자가 유효한 범위를 말한다.

• scope 내에서 식별자는 유일해야 하지만 다른 scope에는 같은 이름의 식별자를 사용할 수 있다. 이를 scope namespace 한다.

• 이때 var는 스코프 내에서 중복 이름 선언이 가능하다.

• 또한 var는 함수의 코드 블록만을 지역 scope로 인정한다.

• 한편 let, const는 블록 레벨 scope를 지원한다.

// var는 같은 스코프 내에서 중복 이름 선언이 가능지만 부작용을 발생시킨다.
function foo() {
  var x = 1;
  var x = 2;
  console.log(x); //2

  let y = 1;
  let y = 2; // SyntaxError
}

// var는 함수의 코드 블록만을 지역 scope로 인정한다.
var z = 1;

if(true) {
  var x= 10;
}

console.log(x); // 10

✅ scope의 종류

구분	설명	스코프	변수
전역	코드의 가장 바깥 영역	전역 스코프	전역 변수
지역	함수 몸체 내부	지역 스코프	지역 변수

• 전역(지역)에서 선언된 변수는 전역(지역) scope를 갖는 전역(지역) 변수이다.

• 전역이란 코드의 가장 바깥 영역을 말하고, 전역 변수는 어디서든지 참조할 수 있다.

• 지역이란 함수 몸체 내부를 말하고, 지역 변수는 자신의 지역 scope와 하위 지역 scope에서 유효하다.

✅ scope chain과 식별자 검색 규칙

• 함수는 중첩될 수 있으므로 함수의지역 scope도 중첩될 수 있다.

• 이에 따라 scope가 함수의 중첩에 의해 계층적으로 연결된 것을 scope chain이라 한다.

• 외부 함수의 지역 scope를 중첩 함수의 상위 scope라 부른다.

• 변수를 참조할 때 JS 엔진은 scope chain을 통해 변수를 참조하는 코드의 scope에서 시작하여 상위 scope 방향으로 선언된 변수를 검색 한다.

• 즉 상위 scope에서 선언한 변수를 하위 scope에서도 참조할 수 있다.

✅ lexical scope

• JS는 lexical scope를 따르므로 함수를 어디서 ‘정의’ 했는지에 따라 상위 스코프를 결정한다.

• 따라서 함수의 상위 스코프는 함수 정의가 실행될 때 정적으로 결정되고 상위 스코프를 기억한다.

• 아래 코드는 1을 두 번 출력한다.

var x = 1;

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

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

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

---

참고 자료

• 모던 자바스크립트 Deep Dive (사진 출처)