스코프

• 모든 프로그래밍 언어의 기본적이고 중요한 개념
• 매개변수를 참조할 수 있는 유효범위(매개변수의 스코프가 함수 몸체 내부로 한정)

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

• 변수는 자신이 선언된 위치에 의해 자신이 유효한 범위, 즉 다른 코드가 변수 자신을 참조할 수 있는 범위가 결정된다.

  • 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정되고 이를 스코프라 한다.
    = 스코프 : 식별자가 유효한 범위

동작 예시

var x = 'global';

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

foo();

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

//(1), (2)의 두 개의 x 변수는 식별자 이름이 동일하지만 스코프가 다른 별개의 변수이다.

식별자 결정

• 자바스크립트 엔진은 이름이 같은 두 개의 변수 중 어떤 변수를참조해야 할 것인지를 결정한다.
• 스코프란 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙
• 위 예시처럼 코드가 어디서 실행되며 주변에 어떤 코드가 있는지에 따라 (1),(2)처럼 동일한 코드도 다르 결과를 만들어 낸다.

  ☝🏻 렉시컬 환경 : 코드가 어디서 실행되며 주변에 어떤 코드가 있는지
  ☝🏻 실행 컨텍스트 : 렉시컬 환경을 구현한 것
  => 모든 코드는 실행 컨텍스트에서 평가되고 실행된다.

🔥 만약, 스코프라는 개념이 없다면 같은 이름을 갖는 변수는 충돌을 일으키므로 프로그램 전체에서 하나밖에 사용할 수 없다.

스코프는 네임스페이스이다.
= 스코프 내에서 식별자는 유일해야 하지만 다른 스코프에서는 같은 이름의 식별자를 사용할 수 있다.

스코프의 종류

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

전역

• 코드의 가장 바깥 영역
• 전역 변수는 어디서든지 참조할 수 있다.

지역

• 함수의 몸체 내부
• 자신이 선언된 지역과 하위 지역(중첩 함수)에서만 참조할 수 있다.

스코프 체인

• 함수는 중첩될 수 있으므로 스코프도 중첩될 수 있다.
• 스코프가 함수의 중첩에 의해 계층적 구조를 갖는다.

  전역 스코프 > outer 지역 스코프 > inner 지역 스코프

• 최상위 스코프는 전역 스코프이다.
• 이렇게 계층적으로 연결된 것은 스코프 체인이라고 한다.
• js 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 검색한다.
• 스코프의 계층적 구조는 부자 관계로 이뤄진 상속과 유사하다.

함수 레벨 스코프

• 블록 레벨 스코프 : 모든 코드 블록(if, for, while, try/catch)이 지역 스코프를 만든다

☝🏻 함수 레벨 스코프 : var 키워드로 선언된 변수는 오로지 함수의 코드 블록(함수 몸체)만을 지역 스코프로 인정한다.

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

렉시컬 스코프

• 동적 스코프 : 함수를 어디서 호출했는지에 따라 함수의 상위 스코프를 결정한다.
• 렉시컬 스코프 / 정적 스코프 : 함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정한다.
  => 대부분의 프로그래밍 언어는 렉시컬 스코프를 따른다.
• 함수의 상위 스코프는 언제나 자신이 정의된 스코프다.