Modern JavaScript Deep Dive 스터디 - CH13 스코프

참고 자료: ⟪모던 자바스크립트 Deep Dive⟫"(이웅모 지음,위키북스, 2020)

---

1. 스코프(Scope)

• 식별자(identifier)가 유요한 범위
• 자바스크립트 엔진은 스코프에 따라 식별자를 참조

---

2. 전역 스코프 vs 지역 스코프

1) 전역 스코프

• 전역 변수는 어디서든지 참조 가능

2) 지역 스코프

• 지역 변수는 자기 스코프와 하위 지역 스코프에서 참조 가능

---

3. 스코프 체인(scope chain)

• 스코프가 계층적으로 연결된 것
• 하위 스코프에서 상위 스코프의 변수 참조 가능 BUT 상위 스코프에서 하위 스코프 변수 참조 불가

---

4. 함수 레벨 스코프 vs 블록 레벨 스코프

1) 함수 레벨 스코프

• 함수에 의해 생성된 지역 스코프

2) 블록 레벨 스코프:

• 함수를 제외한 코드 블록에 의해 생성된 지역 스코프
• if, for, while, try/catch 등

var x = 1;

if (true) {
  // var 키워드로 선언된 변수는 함수의 코드 블록(함수 몸체)만을 지역 스코프로 인정
  // 함수 밖에서 var 키워드로 선언된 변수는 코드 블록 내에서 선언되었다 할지라도 모두 전역 변수 -> x는 전역 변수
  
  // 이는 의도치 않게 변수 값이 변경되는 부작용을 발생시킬 수 있음.
  var x = 10;
}

console.log(x); // 10

---

5. 렉시컬 스코프

• 함수를 어디서 정의했는지에 따라 상위 스코프를 결정
• == 정적 스코프
• Javascirpt 를 비롯한 대부분의 프로그래밍 언어가 렉시컬 스코프에 해당됨

동적 스코프
함수가 호출되는 시점에 동적으로 상위 스코프를 결정

var x = 1;

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

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

foo(); // 결과? -> 렉시컬 스코프: 10, 정적 스코프: 10
bar(); // 결과? -> 렉시컬 스코프: 1, 정적 스코프: 10