scope
의 연장 개념
function outFn(){
let outVar = 'out';
console.log(outVar);
function inFn(){
let inVar ='in';
console.log(inVar);
}
return inFn;
}
**예제 실행**
outFn ()();
out
in
let inFn =outFn();
out
inFn
ƒ inFn(){
let inVar ='in';
console.log(inVar);
}
inFn()
in
외부 함수의 변수에 접근할 수 있는 내부 함수
(또는,이러한 작동 원리를 일컫는 용어)
위 예제에 inFn() 부분이 클로저
함수 이다.
클로저 함수 안에서는 지역 변수
외부 함수의 변수
전역 변수
의 접근이 전부 가능하다.
커링 : 함수 하나가 n개의 인자를 받는 대신, n개의 함수를 만들어 각각 인자를 받게
하는 방법
function adder(x) {
return function(y) {
return x + y;
}
}
adder(2)(3); // 5
x의 값을 고정해놓고 재사용할 수 있다.
let add100 = adder(100);
add100(2);//102
add100(10);//110
let add5 = adder(5);
add5(2); //7
function htmlMaker(tag){
let startTag = '<' + tag + '>';
let endTag = '<' + tag + '>';
return function(content) {
return startTag + content + endTag;
}
}
let divMaker = htmlMaker('div'); // inner 함수 만들었당
undefined
divMaker //inner 확인
ƒ (content) {
return startTag + content + endTag;
}
divMaker('HI'); //inner 에 인자 넣기
"<div>HI<div>"
divMaker('다른값')
"<div>다른값<div>
let spanMaker = htmlMaker('span')
undefined
spanMaker('스펜이지롱')
"<span>스펜이지롱<span>"
변수를 스코프 안쪽에 가두어 함수 밖으로 노출 시키지 않는 방법
function makeCounter() {
let privateCounter = 0;
return {
increment : function() {
privateCounter++;
},
decrement: function() {
privateCounter--;
},
getValue: function() {
return privateCounter;
}
}
}
let ct = makeCounter()
undefined
ct.increment();
undefined
ct.increment();
undefined
ct.increment();
undefined
ct.getValue();
3
let ct2 = makeCounter()
undefined
ct2.increment();
undefined
ct2.increment();
undefined
ct2.getValue();
2
ct.getValue();
3
//서로 영향을 주지않는다. 각각 의 privateCounter 의 값을 가진다.
'함수를 리턴하는 함수'가 클로저의 정의라고 오해하는 경우가 많은데, 이는 정의가 아니라 클로저 패턴의 일반적인 특징입니다. '외부함수의 컨텍스트에 접근할 수 있는 내부함수' 가 클로저라는 사실을 꼭 기억해 주세요.