[JS] 스코프(Scope)란?

스코프의 구분

 

스코프(Scope)란?

스코프란 변수 이름이나 함수 이름과 같은 식별자(identifier)의 수명을 결정하고 확인할 수 있는 범위를 뜻한다. 변수나 함수와 같은 모든 식별자들은 어느 위치에서 선언되었느냐에 따라 다른 코드가 자신을 참조할 수 있는지 여부가 결정되며, 이를 스코프라고 하는 것이다. 즉, 스코프는 변수나 함수가 유효할 수 있는 범위를 뜻하는데, 그렇기 때문에 스코프는 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙으로 작용한다. 이와 같이 특정 시점에서 참조할 변수를 결정하는 것을 식별자 결정(identifier resolution)이라고 한다.

 

식별자(Intentifier)
어떤 값을 구별해서 식별할 수 있는 고유한 이름 (출처).

 

 

스코프의 종류

스코프는 전역(global)과 지역(local) 두가지로 구분할 수 있다. 전역(Global)은 가장 밖의 범위를 뜻한다. 아래 예제에서, 토르는 지구 출신이 아니여서 가장 바깥 구역에 정의되어 있다. 반면, 지역(local) 스코프는 함수 몸체 내부를 뜻한다. 전역 변수는 전역 변수 안의 지역 변수 어디에서도 사용이 가능하지만, 지역 변수는 자신의 지역 스코프와, 자신 아래에 있는 스코프에서밖에 유효하지 않다.

 

const thor = 'Asgardian'

function earth () {
  const captainAmerica = 'American'
  
  // 토르는 지구에서 유효하다
  
  function myHome () {
    const leo = 'my dog'
    
    //토르와 캡틴아메리카는 우리집에서도 환영한다(?)
  }
}

// 우리집 멍멍이는 우리집에선 환영이지만, 다른 곳에선 아닐 수 있다

 

 

 

 

스코프 체인(Scope chain)

위 예제와 같이 함수 안에 함수가 정의되는 것을 함수의 중첩이라고 한다. 함수 내부에 또 다른 함수가 정의되면 스코프에도 계층적 구조가 생기게 되는데, 이렇게 계층적으로 연결된 스코프를 스코프 체인(scope chain)이라고 한다. 

 

자바스크립트 엔진이 변수를 참조할 땐, 이러한 스코프 체인을 타고 상위 스코프로 올라가면서 변수를 검색한다. 하위 스코프에서 점차 위로 올라가는 방식이기 때문에, 상위 스코프에서 정의된 (= 상위 스코프에서 유효한) 변수를 하위 스코프에서 참조할 순 있지만, 그 반대는 불가능한 것이다.

 

 

 

참고: 모던 자바스크립트 Deep Dive