[CS] 클로저 Day-16

클로저란?

함수와 함수가 선언된 어휘적(lexical) 환경의 조합을 뜻합니다. 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성됩니다.

"외부함수의 변수에 접근할 수 있는 내부함수"를 클로저라 부르기도 합니다.

클로저 함수의 특징

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

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

함수 호출 방식

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

클로저 함수의 기본 형태

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

클로저 함수의 특징은 함수를 리턴하는 함수라는 점입니다.

함수를 리턴하는 특징이 있는 만큼 스코프, 변수의 접근 범위를 닫는 (closure;), 함수 리턴, 변수 선언 위치가 중요합니다.

ex)

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

• 외부 함수는 y에 접근이 불가능합니다.
• 내부 함수는 x에 접근이 가능합니다.
  따라서 function (x) x의 값은 return x 의 값으로 가게 됩니다.

클로저 함수는 함수가 끝난 후에도 데이터를 보존한다.

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

const add5 = adder(5);

add5에는 클로저를 통해 리턴한 함수가 담겨 있습니다. 인자로 넘기 5라는 값이 x 변수에 계속 담겨있는 상태로 남아있습니다.

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

const add5 = adder(5); // 여기에서 x에 5를 담았고 저장됩니다.
add5(7); //  따라서 add5(7) 7은 y 값으로 들어가고 5+7 => 12를 출력
add5(10) // add5는 계속 5를 저장하고 있는 상태고 y값에 10을 넣어 15를 출력합니다.

클로저를 통해 HTML 문자열 에 사용할 수 있습니다.

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

const divMaker = tagMaker('div');
divMaker('Hello') // '<div>Hello</div>
divMaker('KAKAOGG') // `<div>KAKAOGG</div>

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

잘 읽어보고 이해하자..

클로저 모듈 패턴

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

const counter1 = makeCounter();
counter1 // {increase: , decrease: , getValue: } 객체로 구성됩니다.

클로저 모듈 패턴을 이용하면 내부 함수를 객체에 담아 여러 개의 내부 함수를 리턴하도록 만들 수 있습니다.

하지만 클로저 모듈 패턴에서는 value 라는 값에 새로운 값을 할당할 수 없습니다.
(외부 스코프에서 내부 스코프 변수에 접근할 수 없습니다.) 따라서 value 값이 수정이 불가능하기 때문에 객체에 영향을 줘 value 값을 수정해야 합니다.

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

const counter1 = makeCounter();
counter1.increase();
counter1.increase();
counter1.increase();
counter1.getValue(); // 3

const counter2 = makeCounter();
counter2.decrease();
counter2.decrease();
counter2.decrease();
counter2.getValue(); // -3

클로저 모듈 패턴에서는 리턴된 객체가 서로에게 영향을 미치지 않습니다. 따라서 값을 보존하고 있을 수 있습니다.

클로저 함수를 통해 재사용성을 극대화하면, 함수 하나를 독립적인 부품 형태로 분리하고 모듈화할 수 있습니다.