13.1 스코프란?

• 식별자가 유효한 범위
• 모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정
• 스코프를 통해 어떤 변수를 참조해야할 것인지 결정 (스코프는 곧 렉시컬 환경이다)

function add(x, y) {
  // 매개변수는 함수 몸체 내부에서만 참조할 수 있다.
  // 즉, 매개변수의 스코프(유효범위)는 함수 몸체 내부다.
  console.log(x, y); // 2 5
  return x + y;
}

add(2, 5);

// 매개변수는 함수 몸체 내부에서만 참조할 수 있다.
console.log(x, y); // ReferenceError: x is not defined

13.2 스코프의 종류

1. 전역 : 코드의 가장 바깥 영역
   • 전역 변수는 전역 스코프를 갖음
2. 지역 : 함수 몸체 내부
   • 지역 변수는 지역 스코프를 갖음

• 변수는 자신이 선언된 위치에 의해 자신이 유효한 범위인 스코프가 결정

13.2.1 전역과 전역 스코프

• 전역 변수는 전역 스코프를 갖음
• 전역 변수는 어디서든지 참조할 수 있음

13.2.2 지역과 지역 스코프

• 지역 변수는 자신의 지역 스코프와 하위 지역 스코프에서 유효

13.3 스코프 체인

• 스코프가 게층적으로 연결된 것
• 변수 참조 시 현재 스코프에서 시작하여 상위 스코프 방향으로 이동하며 변수를 검색

13.3.1 스코프 체인에 의한 변수 검색

• 스코프 체인은 단방향 연결 리스트, 즉 하위 스코프에서 상위 스코프의 방향으로 연결되어 있기 때문에 하위 스코프에서 유효햔 변수를 상위 스코프에서는 참조할 수 없음

13.3.2 스코프 체인에 의한 함수 검색

// 전역 함수
function foo() {
  console.log('global function foo');
}

function bar() {
  // 중첩 함수
  function foo() {
    console.log('local function foo');
  }

  foo(); // ①
}

bar();

• 함수도 식별자에 할당되므로 스코프를 갖음

13.4 함수 레벨 스코프

• 블록 레벨 스코프 : 모든 코드블록이 지역 스코프를 만듦 (let, const 키워드)
• 함수 레벨 스코프 : 오로지 함수의 코드 블록만을 지역 스코프로 인정 (var 키워드)

var x = 1;

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

console.log(x); // 10

• var로 선언된 변수는 코드 블록 내에서 선언되었다 하더라도 함수 레벨 스코프를 가지기 때문에 전역 변수가 됨

var i = 10;

// for 문에서 선언한 i는 전역 변수다. 이미 선언된 전역 변수 i가 있으므로 중복 선언된다.
for (var i = 0; i < 5; i++) {
  console.log(i); // 0 1 2 3 4
}

// 의도치 않게 변수의 값이 변경되었다.
console.log(i); // 5

13.5 렉시컬 스코프

• 동적 스코프 : 함수를 어디서 호출했는지에 따라 함수의 상위 스코프를 결정
• 렉시컬 스코프 or 정적 스코프 : 함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정
• 자바스크립트는 렉시컬 스코프를 따름

var x = 1;

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

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

foo(); // ?
bar(); // ?

• 전역변수 x의 값 1을 두번 출력함