자바스크립트 : 스코프 (Scope)

스코프란?

스코프(유효범위)는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적이며 중요한 개념입니다. 스코프의 이해가 부족하면 다른 개념을 이해하기 어렵습니다. 더욱이 자바스크립트의 스코프는 다른 언어의 스코프와 구별되는 특징이 있으므로 주의가 필요합니다. 그리고 var 키워드로 선언한 변수와 let 또는 const 키워드로 선언한 변수의 스코프도 다르게 동작합니다. 스코프는 변수 그리고 함수와 깊은 관련이 있습니다.

 

우리는 스코프를 이미 경험했습니다. 함수의 매개변수는 함수 몸체 내부에서만 참조할 수 있고 함수 몸체 외부에서는 참조할 수 없다고 했습니다. 이것은 매개변수를 참조할 수 있는 유효범위, 즉 매개변수의 스코프가 함수 몸체 내부로 한정되기 때문입니다.

 

변수는 코드의 가장 바깥 영역뿐 아니라 코드 볼릭이나 함수 몸체 내에서도 선언할 수 있습니다. 이때 코드 블록이나 함수는 중첩될 수 있습니다.

변수는 자신이 선언된 위치에 의해 자신이 유효한 범위, 즉 다른 코드가 변수 자신을 참조할 수 있는 범위가 결정됩니다. 변수 뿐만 아니라 모든 식별자가 그렇습니다. 다시 말해, 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정됩니다. 이를 스코프라 합니다. 즉, 스코프는 식별자가 유효현 범위를 말합니다.

 

다음 예제가 어떻게 동작할지 생각해봅시다.

코드의 가장 바깥 영역과 foo 함수 내부에 같은 이름을 갖는 x 변수를 선언했고 1과 2에서 x 변수를 참조합니다. 이때 자바스크립트 엔진은 이름이 같은 두 개의 변수 중에서 어떤 변수를 참조해야 할 것인지를 결정합니다. 이를 식별자 결정(identifier resolution)이라 합니다. 자바스크립트 엔진은 스코프를 통해 어떤 변수를 참조해야 할 것인지 결정합니다. 따라서 스코프란 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙이라고도 할 수 있습니다.

 

자바스크립트 엔진은 코드를 실행할 때 코드의 문맥(context)을 고려합니다. 코드가 어디서 실행되며 주변에 어떤 코드가 있는지에 따라 위 예제의 1과 2처럼 동일한 코드도 다른 결과를 만들어냅니다.

 

위 예제에서 코드의 가장 바깥 영역에 선언된 x변수는 어디서든 참조할 수 있습니다. 하지만 foo함수 내부에서 선언된 x 변수는 foo 함수 내부에서만 참조할 수 있고 foo 함수 외부에서는 참조할 수 없습니다. 이 때 두개의 x변수는 식별자 이름이 동일하지만 자신이 유효한 범위, 즉 스코프가 다른 별개의 변수입니다.

만약 스코프라는 개념이 없다면 같은 이름을 갖는 변수는 충돌을 일으키므로 프로그램 전체에서 하나밖에 사용 할 수 없습니다.