[2주차 스터디]13장- 스코프

스코프

모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 자신은 참조할 수 있는 유효 범위가 결정된다.
스코프(scope) : 식별자가 유효한 범위

• 자바스크립트는 코드를 실행할 때 코드의 문맥(context)를 고려합니다.
• 이름이 같은 두 변수중 어떤 것을 참조할지 결정하는 것을 식별자 결정이라고 합니다.
• 스코프(scopoe)란 식별자를 검색할 때 사용하는 규칙이라고 할 수 있습니다.

  코드가 어디서 실행되며 주변에 어떤코드가 있는지를 렉시컬 환경(lexical enviroment)라고 합니다. 즉, 코드의 context는 렉시컬 환경으로 구성되고 이를 구현한 것이 실행 컨텍스트입니다.

스코프의 종류

• 코드는 전역(global)과 지역(local)로 구분할 수 있습니다.

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

전역과 전역 스코프

• 전역이란 코드의 가장 바깥 영역을 말한다.
• 전역에 변수를 선언하면 전역변수, 전역 변수는 어디서든 참조 가능

지역과 지역 스코프

• 지역이란 함수 몸체 내부를 말한다.
• 지역 변수는 자신이 선언된 지역과 하위 지역(중첩함수)에서만 참조 가능

스코프 체인

• 함수는 중첩될 수 있으므로 함수의 지역 스코프도 중첩될 수 있습니다.
• 즉, 스코프는 함수의 중첩에 의해 계층적 구조를 갖습니다.
• 모든 지역 스코프의 최상위 스코프는 전역 스코프이고 이렇게 스코프가 계층적으로 연결된 것을 스코프 체인(scope chain)이라고 합니다.

• 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 검색합니다.

  즉, 상위 스코프에서 선언한 변수를 하위 스코프에서 참조할 수 있습니다.

• 자바스크립트 엔진은 코드를 실행하기 앞서 렉시컬 환경을 실제로 생성합니다.

  렉시컬 환경이란 스코프 체인을 구현한 자료구조입니다.
  변수 선언, 할당, 검색도 이 자료구조 상에서 이루어 집니다.

변수 검색

• 변수는 자신의 지역스코프를 먼저 조사하고 검색 되지 않는 경우 스코프 체인을 따라 상위 스코프를 검색합니다.
• 즉, 하위 스코프로 내려가면서 식별자를 검색하는 일은 없습니다.
• 정리 : 하위 스코프에서 상위 스코프의 변수 참조 가능, 상위 스코프에서 하위 스코프를 참조 불가능

함수 검색

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

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

  foo(); // 결과 : local function foo
}

bar();

• 변수 검색과 마찬가지 방식으로 동작

함수 레벨 스코프

• 함수 레벨 스코프 : 코드 블록이 아닌 함수에 의해서만 지역 스코프 생성
• 블록 레벨 스코프 : 모든 코드블록 (함수 포함 if, for, while 등등)이 지역 스코프 생성
• var는 함수 스코프, let & const는 블록 단위 스코프를 가집니다.

var x = 1;

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

console.log(x); // 10

렉시컬 스코프

동적 스코프(dynamic scope) : 함수가 호출 되는 시점에 동적으로 상위 스코프를 결정
렉시컬 스코프(lexical scope) 또는 정적 스코프(static scope) :함수 정의가 평가되는 시점에 상위 스코프가 정적으로 결정

• 자바스크립트는 렉시컬 스코프를 따름
• 즉, 함수 호출 될 때가 아니라 함수 정의가 실행 될 때 상위 스코프가 결정 됨

var x = 1;

function foo() {
  var x = 10;
  console.log(x); // 10
  bar();
}

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

foo(); // 1
bar(); // 1
console.log(x); // 1