Closure
클로저란 함수와 렉시컬(Lexical) 환경의 조합을 말한다.
(렉시컬 환경이란 내부함수가 선언되었을 때의 스코프를 의미한다.
어디에서 호출하였는지가 아닌 어디에서 선언하였는지에 따라 결정된다.)
즉, 함수가 생성될 당시 외부 변수를 기억하며
생성 이후에도 계속 접근이 가능하다.
간단한 예시를 살펴보자
const a = 10;
function add(b) {
return a + b;
}
add(5); //result : 15먼저 간단한 예시로 add 함수를 선언해보았다.
add 함수에 5의 값을 인자로 넘기면 15가 리턴된다.
add 함수의 렉시컬 스코프에서는 b에 대한 값만 얻을 수 있는데 어쨰서 15가 리턴되었을까??
이는 상위 스코프에 a가 선언되었기 때문이다.
add 함수 내에서 a 변수를 찾을 수 없자 상위 스코프에서 이를 찾아낸 것이다.
즉, 상위 스코프의 변수를 가져다 사용한 것이다.
다음 예시를 살펴보자.
function add(a) {
return function(b) {
return function(c) {
return a+b+c;
}
}
}
const add1 = add(10);
const add2 = add1(20);
const add3 = add2(30);
const add4 = add(10)(20)(30);
console.log(add3); //60
console.log(add4); //60내부함수가 여러개일 경우에도 클로저는 동작한다.
add3,4의 결과가 60이 나오는 것은 상위 렉시컬 스코프의 변수에 접근을 했다는 뜻이다.
add3 함수가 생성된 이후에도 add 함수의 a, b에 접근 가능하다.
function counter() {
let cnt = 0; //은닉화
return function() {
return cnt++;
}
}
const plus = counter();
console.log(plus()); //0
console.log(plus()); //1
console.log(plus()); //2위 코드를 살펴보자.
plus 함수가 선언될 때마다 cnt는 증가되는 counter 함수이다.
함수 내부에 선언된 cnt는 외부에서 조작할 수 없다.
즉, 클로저를 통한 은닉화 또한 가능하다.
