스코프

 

자바스크립트는 var, let, const로 변수를 선언할 수 있습니다.

var와 let, const는 스코프가 다르게 동작하며 변수와 함수 모두 관련이 있는 매우 중요한 요소입니다.

오늘은 스코프에 대해 정리해보겠습니다.

 

스코프

var a = 'global';

function foo(){
    var a = 'inner';
    console.log(a); // 'inner'
}

console.log(a); // 'global'

 

스코프는 유효 범위로 모든 식별자(변수, 함수, 클래스 등)가 선언된 위치에 따라 다른 코드가 참조할 수 있는 지 결정됩니다.

 

외부에서 선언한 변수 a와 함수 내부에서 선언한 변수 a는 식별자 이름은 같지만 엄연히 다른 스코프를 가지고 있습니다.

이 경우 자바스크립트 엔진이 코드를 실행할 때 어떤 변수를 참조할지 스코프를 통해 결정하며 이를 식별자 결정이라고 합니다.

 

이와 같은 동작은 자바스크립트의 실행 컨텍스트와 깊이 관련되어 있으며 모든 코드는 실행 콘텍스트를 통해 식별자를 결정하고 실행하게 됩니다.

 

 

스코프 종류

• 전역 스코프
• 지역 스코프
• 함수 레벨 스코프
• 렉시컬 스코프

전역 스코프 (Global scope)

전역은 코드의 가장 외부 영역을 말하며 전역 범위에서 만든 식별자는 어디서든 참조가 가능합니다.

때문에 어디서든 쉽게 사용할 수 있지만 반대로는 변수의 사이드 이펙트, 중복된 변수 이름의 사용 등 예측하기 힘든 문제점이 발생할 수 있습니다.

지역 스코프 (Local scope)

지역은 함수 내부를 말하며 지역 범위의 식별자는 선언된 지역과 하위 지역에서만 참조할 수 있습니다.

하위 지역은 함수 내부에 선언된 중첩 함수를 말하며 동일한 이름을 가진 변수의 경우 스코프 체인을 통해 참조할 변수를 결정합니다.

 

스코프 체인
스코프는 함수가 중첩됨에 따라서 같이 중첩되며 상위 스코프, 하위 스코프로 나뉘는 계층적인 구조를 갖습니다.
스코프가 연결된 것을 스코프 체인이라고 하며 자바스크립트 엔진은 실행 컨텍스트의 렉시컬 환경을 생성하고 현재의 스코프에서 상위 스코프에 선언된 변수가 있는지 검색하며 참조하게 되어서 하위 스코프에서 상위 스코프의 변수를 참조할 수 있게 됩니다.
이때 스코프의 참조는 하위에서 상위로 올라가므로 상위 스코프에서 하위 스코프의 식별자를 참조할 수는 없습니다.

 

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

var a = 10; // 전역 스코프

if (true){
  var a = 20; // 전역 스코프
}

console.log(a); // 20

 

자바의 경우 if, for, while 문 등 모든 코드 블록이 블록 레벨의 지역 스코프를 만들지만 자바스크립트는 기존의 var 키워드로 선언한 변수의 경우 함수에 의해서만 지역 스코프가 생성됩니다.

위 코드를 보면 다른 프로그래밍 언어였다면 10이 출력되었겠지만 var 키워드는 오로지 함수 내부에서 선언되어야만 지역 스코프를 가지므로 20이 출력된 것을 볼 수 있습니다.

 

때문에 var는 중복 선언, 의도치 않은 재할당으로 인해 발생하는 문제가 많았고 ES6에서 새로 생긴 let과 const 키워드는 이를 보완하기 위해 블록 레벨 스코프를 지원하고 있습니다.

 

렉시컬 스코프 (Lexical scope)

var x = 1;

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

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

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

동적 스코프를 따른다면 함수를 호출한 위치에 따라 스코프가 결정될 테니 bar 함수는 foo 함수를 상위 스코프로 가지게 될 것입니다.

그럼 상위 스코프의 x를 참조하여 10을 호출해야 하지만 1을 호출한 모습입니다.

 

자바스크립트는 렉시컬 스코프 또는 정적 스코프를 따릅니다. 함수를 정의한 위치에 따라 상위 스코프를 결정하며 bar 함수는 전역 범위에서 정의되었기 때문에 전역 스코프의 x를 참조하게 됩니다. 함수가 호출된 위치는 스코프 결정에 아무런 영향을 미치지 않습니다.

 

정리

• 자바스크립트는 크게 전역 스코프와 지역 스코프로 나뉩니다.
• 식별자는 선언된 위치에 따라 스코프를 가지게 되며 스코프 체인에 의해 현재 스코프에 필요한 식별자가 없다면 상위 스코프에서 식별자를 검색해서 참조하게 됩니다.
• 스코프는 ES6의 let과 const, 실행 컨텍스트, 클로저와 깊은 관련이 있습니다.