자바스크립트에서 스코프(Scope)와 컨텍스트(Context)는 전혀 다른 개념입니다. 많은 개발자가 이 둘을 혼동하기 쉬운데, 함수를 호출할 때는 항상 스코프와 컨텍스트라는 두 가지 요소가 함께 작동합니다. 이번 글에서는 각각의 개념을 명확하게 구분하여 살펴보겠습니다.
스코프(Scope)란 무엇인가?
변수의 스코프란 해당 변수가 프로그램 내에서 정의되어 접근 가능한 영역을 의미합니다. 자바스크립트 변수는 크게 두 가지 스코프를 가집니다.
- 전역 변수(Global Variable): 전역 스코프를 가지며, 코드 어디에서든 정의하고 접근할 수 있습니다.
- 지역 변수(Local Variable): 해당 변수가 정의된 함수 내부에서만 유효하며, 함수 외부에서는 접근할 수 없습니다.
또한 함수의 매개변수(parameter) 역시 항상 그 함수에 지역적인(local) 성격을 가진다는 점을 기억해야 합니다.
컨텍스트(Context)란 무엇인가?
컨텍스트는 함수가 어떻게 호출되었는지에 따라 결정됩니다. 특히 메서드로 호출된 함수 내부에서 this 키워드가 무엇을 가리키는지가 컨텍스트의 핵심입니다. 아래 예제를 통해 확인해 보겠습니다.
예제 코드
var ob1 = {
display: function() {
return this;
}
};
ob1.display() === ob1;위 예제에서 ob1.display()는 객체의 메서드로 호출되었기 때문에 반환값은 true입니다. 이처럼 함수가 객체의 메서드로 호출되면, this 컨텍스트는 해당 메서드가 호출된 객체 자신으로 설정됩니다.
정리
요약하면, 스코프는 변수와 함수에 대한 접근 범위를 다루고, 컨텍스트는 함수가 호출된 방식과 this가 가리키는 대상을 다룹니다. 이 두 개념의 차이를 명확히 이해하면 클로저, 콜백 함수, 객체 지향 프로그래밍 등 자바스크립트의 고급 기능을 훨씬 수월하게 다룰 수 있습니다.