[JavaScript] 스코프(Scope)

스코프란?

특정 장소에 변수를 저장하고, 나중에 다시 그 변수를 찾을 때에 잘 정의된 규칙이 필요한데 이 규칙을 '스코프'라고 한다.

이 규칙을 통하여 변수가 어디에 저장되는지, 변수를 어떻게 찾는지 알 수 있다.

변수를 찾는 이유는 변수에 값을 대입하거나 변수의 값을 얻어오기 위해서다.

스코프는 전역스코프와 지역 스코프 두 가지 종류가 있다.

 

스코프 체인

대상 변수를  현재 스코프에서 발견하지 못하면 엔진은 다음 바깥의 스코프로 넘어가는 식으로 변수를 찾거나 글로벌 스코프에 도달할 때까지 계속하고, 글로벌 스코프에 도달하면 변수를 찾든 못 찾든 검색을 멈추고 에러를 발생시킨다.

function foo() {
  var color = "blue";
  function bar() {
    console.log(color);
  }
  bar();
}
foo(); 

6행에서 bar 함수가 실행되고 bar 함수 내부에 color변수를 찾기 위해 먼저 자신의 스코프에서 찾고 없으면 상위 스코프인 foo 함수의 스코프에서 찾고, 없으면 결국 전역 스코프에서 찾게 된다.

이처럼 상위 스코프를 탐색하는 방식을 스코프 체인이라고 부른다.

 

전역 스코프 (Global scope)

전역에 변수를 선언하면 이변수는 어디서든지 참조할 수 있는 전역 스코프를 갖는다.

var x = "global";
function ex() {
  var x = "local";
  x = "change";
}
ex();
console.log(x); // global

x는 전역 변수이고 ex함수 내부에 있는 x는 지역변수이다

지역변수는 전역 변수에 영향을 끼치지 않기 때문에 x의 값은 변경되지 않는다.

이것은 함수 스코프 때문이다 함수 안에서 선언된 변수는 해당 함수 안에서만 사용할 수 있다.

 

지역 스코프 (Local scope)

지역 스코프에는 함수 스코프랑 블록 스코프가 있다.

지바 스크립트에서는 함수 스코프를 지원해왔는데 최근 ES6에서 블록 스코프를 지원하고 있다.

 

• 함수 레벨 스코프 (Function level scope)

var 키워드로 선언된 변수나 함수 선언식으로 만들어진 함수는 함수 레벨 스코프를 갖는다.

function foo() {
  if (true) {
    var color = "blue";
  }
  console.log(color); // blue
}
foo(); 

var가 블록 레벨 스코프였다면, color는 if문이 끝날 때 소멸됨으로 console.log는 에러가 발생할 것이다.

하지만 color는 var 키워드를 사용한 함수 레벨 스코프이므로, foo 함수 내부 어디서든 참조할 수 있다.

 

 

• 블록 레벨 스코프 (Blcok level scope)

ES6의 let, const 키워드를 통하여 블록 스코프를 지원하고 있다.

function foo() {
  if (true) {
    let color = "blue";
    console.log(color); // blue
  }
  console.log(color); // ReferenceError: color is not defined
}
foo(); 

color는 let 키워드를 사용했기 때문에 블록 레벨 스코프를 가진다.

즉, color 변수를 if문 블록 내부에서만 참조할 수 있다.

그러므로 if문 바깥에서 color를 참조하려고 할 때, 6행과 같이 오류가 난다.

 

• 렉시컬 스코프 

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

결과는 bar의 상위 스코프가 무엇인지에 따라 달라진다.

상위 스코프를 결정하는 것은 두 가지 패턴이 있다

- 함수를 호출한 곳 : foo, 전역

- 함수를 선언한 곳 : 전역

프로그래밍 언어는 이 두 가지 방식 중 하나의 방식으로 함수의 상위 스코프를 결정한다.

첫 번째는 동적 스코프, 두 번째 방식을 렉시컬 스코프라 고한다(또는 정적 스코프)

자바스크립트를 비롯한 대부분의 언어는 렉시컬 스코프를 따른다.

 

렉시컬 스코프는 함수의 선언 위치에 따라 결정된다.

함수를 선언한 시점에 상위 스코프가 결정된다. 어디서 호출했는지는 스코프 결정에 아무 영향이 없다.

위 예제는 bar는 전역에 선언되었다. 

따라서 bar의 상위 스코프는 전역 스코프이고 x의 값은 1이 된다.

 

 

[참고]

https://poiemaweb.com/js-scope

https://meetup.toast.com/posts/86