Javascript에서 자주 언급되는 것 중에 Context와 Scope라는 개념이 있습니다. 얼핏 생각해보면 이 두 개념은 비슷한 것 같이 느껴질 수 있습니다. 서로 관련이 있긴 하지만 각각의 의미와 역할이 다른데요, 이번 글에서는 Context와 Scope가 어떤 부분에 차이가 있는지 알아보겠습니다.
컨텍스트 (Context)
컨텍스트는 함수가 호출되는 방법, 특히 this와 관련이 있습니다. 컨텍스트의 뜻은 문맥 인데, 함수가 실행될 때 내부에서 this 가 어떤 객체를 참조하고 있는지에 대한 것을 나타냅니다.
"오다가 메로나 사왔는데, 이거 진짜 맛있어."
이 문장에서
이거는 메로나를 의미한다는 것을문맥을 통해 자연스럽게 알 수 있습니다.
컨텍스트를 표현하는 방식은 두 가지가 있는데, 함수 호출 컨텍스트 와 명시적 컨텍스트 바인딩 입니다.
- 함수 호출 컨텍스트
this는 기본적으로 전역 객체(window또는global)를 참조합니다. 하지만 함수가 객체의 메서드로 호출이 되는 경우, this는 메서드를 호출한 객체를 참조합니다. (this에 대한 내용은 이 글을 참고해주세요.)
function showThis() {
console.log(this);
}
const obj = {
showThis: showThis,
};
showThis(); // 전역 객체 (브라우저에서는 window)
obj.showThis(); // obj 객체- 명시적 컨텍스트 바인딩
apply,bind,call등의 메서드를 사용하면, 함수 호출 시this를 명시적으로 지정할 수 있습니다.
function greet() {
console.log(`Hello, ${this.name}`);
}
const user = { name: 'ttoottie' };
greet.call(user); // Hello, ttoottie스코프 (Scope)
스코프는 변수와 함수가 어디에서 정의되었고, 어느 범위에서 사용 가능한지를 결정하는 규칙입니다. Javascript는 렉시컬 스코프(Lexical Scope) 를 사용하는데, 코드 작성 시에 스코프가 결정된다는 의미입니다.
스코프는 크게 세 가지로 나눌 수 있는데, 전역 스코프, 지역 스코프, 블록 스코프 입니다.
- 전역 스코프
코드 어디에서든 접근할 수 있는 전역 변수와 함수가 속하는 범위입니다.
const globalVariable = "I am global";
function foo() {
console.log(globalVariable); // "I am global"
}
foo();- 지역 스코프
함수 내부에서 정의된 변수와 함수는 함수 내부에서만 사용할 수 있고, 외부에서는 접근할 수 없습니다.
function bar() {
const localVariable = "I am local";
console.log(localVariable); // "I am local"
}
bar();
console.log(localVariable); // ReferenceError: localVariable is not defined- 블록 스코프
const와let으로 정의한 변수와 함수는 블록 스코프를 가지며,{}블록 안에서만 접근할 수 있습니다.
if (true) {
let blockVariable = "I am block";
console.log(blockVariable); // "I am block"
}
console.log(blockVariable); // ReferenceError: blockVariable is not defined정리
Context: 주로 함수 내에서 this가 참조하는 객체를 나타냅니다. 함수가 호출되는 방법에 따라 this의 값이 결정됩니다.
Scope: 변수와 함수가 정의된 위치에 따라 접근할 수 있는 범위를 나타냅니다. Javascript는 전역 스코프, 지역 스코프, 블록 스코프를 사용합니다.
마무리
개발을 하다보면 비슷한 여러 개념들을 마주하는 경우가 의외로 많습니다. 제 입장에서 컨텍스트와 스코프도 그랬던 경우인데요, 차이점을 알아두면 각각의 상황에서 변수와 함수가 왜 그렇게 동작하는지 이해하는데 도움이 많이 됩니다.
