자바스크립트에서 중요한 개념 중 하나인 Scope, 스코프는 변수와 상수, 매개변수가 언제 어디에서 정의되는지를 결정한다. 쉽게 받아들이기 위해서는 스코프를 시야, 범위라고 해석해도 된다(책에서 알려준 설명임). * 본 글에서는 ES6버전을 기준으로 작성할 것이기 때문에, let, const 키워드를 기본으로 변수를 선언할 것이다.
# 스코프와 존재
변수가 존재하지 않으면 스코프 안에 있지 않다는 것은 직관적으로 이해할 수 있다. 하지만 역이 성립하는 것은 아니다. 다시 말해
스코프 안에 있지 않다고 해서 변수가 존재하지 않는 것이 아니라는 의미이다. 스코프는 가시성(Visibility)라고도 불리는데, 프로그램의 현재 실행 중인 부분, 즉 실행 컨텍스트(execution context)에서 현재 보이고 접근할 수 있는 식별자를 말한다. 반면에 '존재한다'는 것은 그 식별자가 메모리가 할당된(예약된) 무언가를 가리키고 있다는 뜻이다.
그렇다면, 존재하지만 스코프 안에 없는 변수는 무엇일까?
자바스크립트에서는 무언가가 더 존재하지 않는다고 해도 메모리를 바로 회수하지 않는다. 메모리에 계속 유지할 필요가 없다고 표시해두면, 주기적으로 일어나는 가비지 콜렉션(garbage collection) 프로세스에서 메모리를 회수한다. 이는 자동으로 일어나며, CPU와 메모리를 심각하게 많이 쓰는 경우가 아니면 프로그래머가 고려하지 않아도 된다.
# 정적 스코프, 동적 스코프
정적 스코프는 다른 이름으로 렉시컬(lexical) 스코프라고 한다. lexical은 한국말로 '어휘적'이라는 뜻을 가지고 있다. 소스코드적으로 살펴본다는 의미로 해석하면 될 것 같다.
function f1() {
console.log('1');
}
function f2() {
console.log('2');
}
f2();
f1();
f2();
위 프로그램은 정적으로 보았을 때, 위에서 아래로 읽어내리는 단순한 흐름을 가지고 있지만 실행했을 때에는 그렇지 않다. f1()이 f2()보다 먼저 정의되었지만 f2()의 바디가 먼저 실행 된 후에 f1(), 다시 f2()의 바디가 실행되는 순서를 가진다.
자바스크립트의 스코프는 정적이기 때문에, 소스코드만 보아도 변수가 스코프에 있는지 판단할 수 있다. 물론 보자마자 스코프를 바로 명확히 알 수 있다는 뜻은 아니다. 정적 스코프는
어떤 변수가 함수 스코프 안에 있는지 함수를 정의할 때 알 수 있다는 의미이다. (호출할 때 알 수 있는것이 아니다.)
const x = 3;
function f() {
console.log(x);
console.log(y);
}
{ // new scope
const y = 5;
f();
}
변수 x는 함수를 정의할 때 존재하지만, y는 존재하지 않는다. 즉, y는 다른 스코프에 존재한다. 다른 스코프에서 y를 선언하고 그 스코프에서 f를 호출해도, x는 그 바디 안의 스코프에 있지만 y는 아니다. 함수 y는 자신이 정의될 때 접근할 수 있던 식별자에 여전히 접근할 수 있지만, 호출할 때 스코프에 있는 식별자에 접근할 수는 없다. 이것이 정적 스코프이다.
자바스크립트의 정적 스코프는 전역 스코프(global scope), 블록 스코프(block scope), 함수 스코프(function scope)에 적용된다.
1. 전역 스코프
스코프는 계층적이며, 프로그램을 시작할 때 암시적으로 주어지는, 바탕이 되는 스코프가 필요하다. 이 기본이 되는 스코프를 전역 스코프라고 한다. 자바스크립트 프로그램을 시작할 때 어떤 함수도 호출 하지 않은 상태에서 실행 흐름은 전역 스코프에 있다. 따라서 전역 스코프에서 선언한 것은 무엇이든 간에 모든 스코프에서 볼 수 있다. 전역 스코프에서 선언한 변수는 모든 스코프에서 접근할 수 있기 때문에, 잘 생각하고 써야한다. 남용하지 말 것.
2. 블록 스코프
let과 const 키워드는 식별자를 블록 스코프에서 선언한다. 블록 스코프란, 그 블록의 스코프에서만 보이는 식별자를 의미한다.
# 함수, 클로저, 정적 스코프
함수가 특정 스코프에 접근할 수 있도록 의도적으로 그 스코프에서 정의하는 경우를 클로저(Closure)라고 부른다.
let globalFunc; // 정의되지 않은 전역 함수
{
let blockVar = 'a'; // 블록스코프에 있는 변수
globalFunc = function() {
console.log(blockVar);
}
}
globalFunc(); // print: a
globalFunc()는 블록 안에서 값을 할당받았다. 이 블록 스코프와 그 부모인 전역 스코프가 클로저를 형성한다. globalFunc()를 호출하면 스코프에서 빠져나왔음에도 불구하고 blockVar에 접근이 가능하다. 즉, globalFunc()를 어디에서 호출하든, 이 함수는 클로저에 든 식별자에 접근이 가능하다.
일반적으로 스코프에서 빠져나가면 해당 스코프에서 선언한 변수는 메모리에서 제거해도 안전하지만, 여기에서는 스코프 안에서 함수를 정의했고 해당 함수는 스코프 밖에서도 참조할 수 있기 때문에 자바스크립트는 스코프를 계속 유지하게 된다. 스코프 내부에서 함수를 정의하면, 해당 스코프가 더 오래 유지된다. 또 일반적으로는 접근이 불가한 것에 접근할 수 있는 효과도 있다.
let f;
{
let o = { note: 'Safe' };
f = function() {
return o;
}
}
let oRef = f();
oRef.note = "Not so safe after all!";
일반적으로는 스코프 바깥에서 스코프 내부의 요소에 접근할 수 없었지만, 위 예시처럼 클로저를 통해 가능하다.
댓글
댓글 쓰기