[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
클로저 모듈 패턴에서는 리턴된 객체가 서로에게 영향을 미치지 않습니다. 따라서 값을 보존하고 있을 수 있습니다.
클로저 함수를 통해 재사용성을 극대화하면, 함수 하나를 독립적인 부품 형태로 분리하고 모듈화할 수 있습니다.
Author And Source
이 문제에 관하여([CS] 클로저 Day-16), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@cptkuk91/CS30저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)