[모던 자바스크립트 Deep Dive][13] 스코프

스코프란?

스코프: 식별자가 유효한 범위

식별자 결정 : 엔진이 이름이 같은 두 개의 변수 중에서 어떤 변수를 참조할 것인지 결정하는 것

var var1 = 1; // 코드의 가장 바깥 영역에서 선언한 변수

if (true) {
  var var2 = 2; // 코드 블록 내에서 선언한 변수
  if (true) {
    var var3 = 3; // 중첩된 코드 블록 내에서 선언한 변수
  }
}

function foo() {
  var var4 = 4; // 함수 내에서 선언한 변수

  function bar() {
    var var5 = 5; // 중첩된 함수 내에서 선언한 변수
  }
}

console.log(var1); // 1
console.log(var2); // 2
console.log(var3); // 3
console.log(var4); // ReferenceError: var4 is not defined
console.log(var5); // ReferenceError: var5 is not defined

 

 

스코프의 종류

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

 

- 전역 변수는 어디서든 참조할 수 있다.

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

 

스코프 체인

스코프 체인 : 스코프가 계층적으로 연결된 것

함수는 중첩될 수 있으므로 함수의 지역 스코프도 중첩될 수 있다.

변수를 참조할 때, 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하여 선언된 변수를 검색한다.

 

 

함수 레벨 스코프

블록 레벨 스코프 : 함수 몸체만이 아닌 모든 코드 블록( if, for, while, try/catch )이 지역 스코프를 생성 - let, const함수 레벨 스코프 : 함수의 코드 블록( 함수 몸체 ) 만 지역 스코프로 인정 - 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

 

 

렉시컬 스코프

var x = 1;

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

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

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

자바스크립트는 렉시컬 스코프(정적 스코프)를 따른다.

 

렉시컬 스코프 : 함수를 어디서 정의했는지에 따라서 상위 스코프를 결정즉, 함수의 상위 스코프는 언제나 자신이 정의된 스코프다.

 

따라서 위 예제에서 bar 함수는 호출된 곳과 관계없이 자신이 정의된 스코프를 기억하고 있으므로 x의 값 1을 두 번 출력한다.

 

※ 동적 스코프 : 함수를 어디서 호출했는지에 따라 상위 스코프를 결정