전역변수는 위치에 상관없이 모든 함수가 접근 가능하지만 지역변수는 해당 스코프 내부에서만 접근이 가능합니다.
하지만 클로저를 사용하면 전역변수처럼 지역변수를 사용할 수 있어요. 안전성을 보장하면서요.
–
전역변수
함수는 함수 내 선언된 모든 변수에 접근할 수 있어요.
샘플1
function testFunction( ) {
let abc = 10;
return abc * 2;
}
또한 함수 외부의 변수에도 접근할 수 있어요.
샘플2
let abc = 10;
function testFunction( ) {
return abc * 2;
}
샘플2에서 abc는 전역변수입니다. 웹 페이지에서 전역 변수는 window 객체에 속합니다.
전역변수는 페이지 내 모든 스크립트가 접근하여 사용하거나 변경할 수 있어요.
샘플1에서 abc는 지역변수입니다. 지역변수는 변수를 선언한 함수 내에서만 사용이 가능해요.
다른 함수나 스크립트 코드에게는 감춰져 있는 것이죠.
전역변수와 지역변수는 이름이 같아도 다른 변수입니다. 하나를 수정해도 다른 변수는 영향을 받지 않죠.
선언자(var, let, const) 없이 생성된 변수는 모두 전역변수입니다. 특정 함수 안에서 생성 되었다고 해도 말이죠.
function testFunction() {
abc = 10;
}
–
변수의 생명 주기(lifetime)
전역변수는 페이지가 종료될 때(다른 페이지로 넘어가거나 윈도우 창을 종료)까지 유효합니다.
그리고 지역변수는 함수가 호출될 때 생성되어 함수가 종료될 때까지 유효합니다.
–
숫자 카운팅의 문제
모든 함수에서 접근이 가능한 변수를 만들어 숫자 카운팅에 사용해보도록 하겠습니다.
전역 변수와 함수를 사용해 숫자를 카운팅합니다.
샘플3
let cnt = 0;
function addNum(){
cnt += 1;
}
addNum();
addNum();
// 결과:2
하지만 위의 코드는 addNum() 함수가 아닌 다른 코드로도 cnt 변수에 접근하여 수정이 가능합니다.
따라서 cnt 변수는 addNum() 함수 내부에 존재해야 다른 코드에서 접근할 수 없습니다.
샘플4
let cnt = 0;
function addNum() {
let cnt = 0;
cnt += 1;
}
addNum();
addNum();
// 결과는 2일 것 같지만 0이 반환
같은 이름의 전역변수를 선언하였기 때문에 결과는 2가 아닌 0이 됩니다.
그럼 함수의 반환값을 사용해 전역변수를 사용하지 않는 접근 방법을 확인해보겠습니다.
샘플5
function addNum() {
let cnt = 0;
cnt += 1;
return cnt;
}
addNum();
addNum();
// cnt는 2가 되어야 하지만 결과는 1이 반환
함수 내부에 선언한 지역변수는 함수 호출 시마다 리셋되므로 의도한대로 작동하지 않습니다.
자바스크립트는 이 문제를 내부 함수(inner function)를 사용해 해결합니다.
–
자바스크립트의 중첩 함수(Nested function)
모든 함수는 전역 스코프에 접근할 수 있습니다.
그리고 자바스크립트의 모든 함수는 자신을 감싸고 있는 부모 스코프에 접근이 가능합니다.
자바스크립트는 중첩 함수를 지원하며, 중첩 함수 역시 자신을 감싸고 있는 부모 스코프에 접근이 가능합니다.
아래 샘플을 확인해보면 내부함수 plus()는 부모 함수에 있는 cnt 변수에 접근이 가능합니다.
샘플6
function addNum() {
let cnt = 0;
function plus() {
cnt += 1;
}
plus();
return cnt;
}
cnt = 0을 한번만 선언할 방법과 plus() 함수에 접근할 수 있는 방법을 찾으면 위에서 확인한 숫자 카운팅의 딜레마 문제를 해결할 수 있습니다.
여기서 우리는 클로저를 사용할 수 있습니다.
클로저를 확인하기 전에 먼저 즉시실행함수(IIFE, Immediately Invoked Function Expressions)에 대해 간략히 알아보겠습니다.
즉시실행함수는 호출없이 자동으로 실행되는 함수로, 함수를 괄호로 묶고 반드시 끝에 ()를 붙여야 합니다.
아래는 즉시실행함수의 표현식 샘플입니다.
샘플7
(function() {
let abc = “self-invoking”;
})();
그럼 이제 클로저를 확인해보겠습니다.
Austria(2013)
자바스크립트 클로저(Closure)
클로저는 즉시실행함수를 이용합니다.
샘플8
const addNum = (function() {
let cnt = 0;
return function() {
cnt += 1;
return cnt;
})();
addNum();
addNum();
// 결과:2
addNum 변수에는 즉시실행함수의 반환값이 할당됩니다.
즉시실행함수는 한번만 실행되며, cnt를 0으로 선언한 후 함수 표현식을 반환합니다.
이를 통해 addNum은 함수가 되며, 부모 스코프가 종료되어도 부모 스코프에 존재하는 cnt 변수에 접근이 가능하게 됩니다.
이것이 바로 자바스크립트의 클로저입니다. 클로저는 이와 같이 함수에서 상태 유지가 가능한 개별적인 변수들을 갖도록 합니다.
cnt는 익명함수의 스코프에 의해 보호받으며, 오직 addNum 함수만을 사용해 접근이 가능합니다.
클로저는 부모 함수가 종료된 후에도 부모 스코프의 변수에 접근이 가능한 함수로, 특정 함수만 변수에 접근할 수 있도록 하기 위한 안전 장치라고 보면 됩니다. 참고로 클로저로 접근하는 변수와 부모 스코프에 존재했던 변수는 완전히 같은 공간을 참조하는 것은 아니고 각각 독립적인 객체입니다.
