클로저

Achievement Goals

• 클로저 함수의 정의와 특징에 대해서 이해할 수 있다
• 클로저가 갖는 스코프 범위를 이해할 수 있다
• 클로저를 이용해 유용하게 쓰이는 몇 가지 코딩 패턴을 이해할 수 있다

클로저 함수의 특징(1)

화살표 함수를 이용한 간단한 덧셈 함수

const add = (x, y) => x + y;
add(5, 7);

이 함수를 조금 다른 방식으로 구현해봅시다. 아래와 같이 화살표를 두 번 사용합니다. 앞서 본 코드와는 다르게, 함수의 호출(invocation) 이 두 번 발생합니다.

 

함수의 호출(invocation)이 두 번 발생

const adder = x => y => x + y;
adder(5)(7);

const adder = x => y => x + y;
adder(5)(7);//12

typeof adder(5) // 'function'
adder(5) // y => x + y

adder(5) 의 리턴값이 곧 함수의 형태임을 의미합니다.

// const adder = x => y => x + y

// 위의 코드와 동일하게 작동하는 코드
const adder = function(x){
	return function(y){
    		return x + y;
            	}
}

이를 통해 알아볼 수 있는 첫번째 특징은, 클로저 함수는 "함수를 리턴하는 함수" 라는 점입니다. 함수를 리턴하는 함수가 클로저의 형태를 만듭니다.

 

클로저의 활용

데이터를 보존하는 함수

const adder = function(x){
	return function(y){
    	return x + y;
    }
}

const add = adder(5);

일반적인 함수는, 함수 실행이 끝나고 나면 함수 내부의 변수를 사용할 수 없습니다. 이와 다르게, 클로저는 외부 함수의 실행이 끝나더라도, 외부 함수 내 변수가 메모리 상에 저장됩니다.

 

외부 함수(adder)의 실행이 끝나더라도 외부 함수 내 변수(x)를 사용할 수 있다.

 

const adder = function(x){
	return function(y){
    	return x + y;
    }
}

const add = adder(5);
add(7)//12
add(10)//15

이때의 7과 10은 y의 값에 할당이 된다.

 

보다 실용적인 사용방법은 이렇다.

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

const divMaker = tagMaker('div');
divMaker('hello') // <div>hello</div>
divMaker('code')//<div>code</div>

const anchorMaker = tagMaker('a');
anchorMaker('go')//<a>go</a>
anchorMaker('class')//<a>class</a>

 

클로저 모듈 패턴

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

const counter = makeCounter();

클로저를 이용해 여러개의 내부 함수를 리턴할 수 있습니다.

makeCounter 함수는 increase, decrease, getValue메소드를 포함한 객체 하나를 리턴합니다. 따라서, counter1은 객체입니다.