TIL_Closer

클로저(Closer)

1. 함수를 리턴하는 함수
2. 외부함수의 변수에 접근할 수 있는 내부함수

Pattern.1

const tagMaker = tag => content => `<${tag}>${content}<${tag}>`

const divMaker = tagMaker('div');

console.log(divMaker('hello')); // <div>hello</div>
console.log(divMaker('world')); // <div>world</div>

tagMaker라는 함수를 화살표함수로 선언했는데, tag와 content를 파라미터로 받고 html태그형식으로 리턴해주는 함수이다.
이 때, divMaker라는 변수에 tagMaker에 'div'를 파라미터로 받는 함수를 할당해주면, 클로저함수의 특성 상, 함수가 호출되지 않아도 지역변수로 tag에 div가 할당되어 있다.

그렇기 때문에, divMaker('hello')라고 함수를 호출했을 때, divMaker의 내부함수인 tagMaker에 div가 고정되어 있고, 리턴값에 따라 위의 코드처럼 출력되는 것이다.

이처럼, 함수 내부에서 또 함수를 호출하고, 외부함수의 변수를 내부함수가 접근하는 형태를 클로저 함수라고 한다.

Pattern.2

const makeCounter = () => {
	let value = 0;
    
    return {
    	increase : () => {
        	value = value + 1;
        },
     	decrease : () => {
        	value = value - 1;
        },
        getValue : () => {
        	value;
        }
    }
}
const counter1 = makeCounter();
counter1.increase(); // value = 1;
counter1.increase(); // value = 2;
counter1.decrease(); // value = 1;

makeCounter에 익명함수가 할당되어 있고, value변수가 선언, 0으로 초기화 된 상태이다.

그리고 객체를 리턴하는 데, 객체의 value값으로 익명함수들이 선언되어 있다.
increase, decrease, getValue라는 키에 할당된 익명함수들은 makeCounter 즉, 외부함수의 변수 value에 접근하여 그 값을 증감하고 리턴하는 함수이다.

이 또한, 함수를 리턴하는 함수의 형태이고, 객체의 익명함수가 외부함수의 변수에 접근하는 형태이기 때문에 클로저 함수이다.

이 때, 위와 같은 함수의 사용은 객체의 value값을 가져오는 것처럼 사용하면 된다.

이러한 방식은 앞으로 여러가지 기능구현을 할 때, 데이터와 연관된 메소드들을 하나의 캡슐처럼 '캡슐화'하여 사용하는데 굉장히 유용할 것으로 판단된다.