1. 클로저
1 - 1) 클로저란 외부 함수의 변수에 접근할 수 있는 내부 함수 또는 이러한 작동 원리를 일컫는 용어이다.
1 - 2) 클로저 함수는 자기 자신의 스코프, 외부 함수 스코프, 전역 스코프 총 3가지의 스코프에 접근이 가능하다
예시를 통해 클로저에 대해 구체적으로 알아보자!
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
//closure
function outerFn(a) {
return function innerFn(b) {
return a + b;
}
}
let sum = outerFn(3)
console.log(sum(2))
// 5
// 위와 같은 예가 클로저이다
// innerFn의 a는 outerFn의 지역 변수로서
// innerFn에서 접근해 사용되었기 때문이다
|
cs |
2. 유용한 클로저 예제
2 - 1) 커링 : 함수 하나가 n개의 인자를 받는 대신, n개의 함수를 만들어 각각 인자를 받게 하는 방법.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
function adder(x) {
return function (y) {
console.log(x + y);
};
}
adder(2)(5); //7
let num = adder(100);
// x의 값을 고정시켜서 사용할 수도 있다!
num(5); // 105
num(10); // 110
|
cs |
2 - 2) 클로저 모듈 패턴 : 변수를 스코프 안쪽에 가두어 함수 밖으로 노출시키지 않기 위한 방법.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
function makeCounter() {
let privateCnt = 0;
return {
increment: function () {
privateCnt++;
},
decrement: function () {
privateCnt--;
},
getCnt: function () {
console.log(privateCnt);
}
};
}
let cnt1 = makeCounter();
cnt1.increment();
cnt1.increment();
cnt1.increment();
cnt1.decrement();
cnt1.getCnt(); // 2
let cnt2 = makeCounter();
cnt2.decrement();
cnt2.increment();
cnt2.decrement();
cnt2.decrement();
cnt2.getCnt(); // -2
|
cs |
'Programming Language > Javascript' 카테고리의 다른 글
| Rest Parameter & Spread Syntax (0) | 2020.11.06 |
|---|---|
| Object Oriented Programming (0) | 2020.11.05 |
| Scope (0) | 2020.11.04 |
| 2020/09/30 - JS - 반복문 (0) | 2020.09.30 |
| 2020/09/18 - JS - 문자열과 관련 메소드 (0) | 2020.09.18 |