[오늘의 공부]/Javascript
[javascript] ()=>()=>{}를 쓸 때...
개피곤씨
2025. 4. 16. 00:05
1. 함수의 실행순서를 보장한다. 이거하고나서 저거하자가 가능해짐
const a = () => (id: string) => {
console.log(`Received ID: ${id}`);
};
const b = a(); // 여기서 a()가 두 번째 함수를 반환
b("123"); // 출력: "Received ID: 123"
2. 상태를 유지하는 클로저
const counter = () => {
let count = 0;
return () => {
count += 1;
console.log(count);
};
};
const increment = counter();
increment(); // 출력: 1
increment(); // 출력: 2
increment(); // 출력: 3
counter() 함수에서 count 변수는 increment() 함수가 호출될 때마다 증가함
이 예시에서 increment()는 counter() 함수의 클로저로, count 변수에 접근할 수 있음.
즉, 상위 함수에서 관리되는 상태를 하위 함수에서 유지하며 사용할 수 있는 점이 클로저의 장점
하위 함수에 실제 값을 전달하지 않고도
상위 함수의 데이터를 계속 사용할 수 있게 되기 때문에,
재사용하거나 수정하는 시 데이터는 상위함수에서만 수정, 관리하면 되어 편함
또, 하위함수에서 상위 함수의 상태를 그대로 유지할수 있음( == 상위 함수의 변수,상태 스코프를 하위에서 기억한다)
하위에는 껍데기만 전달하고 상위에서 알맹이를 주입하는 형태라서 응집도높고, 결합도 느슨한 좋은코드가 됨:)
3. 커링
const add = (a: number) => (b: number) => a + b;
const add5 = add(5); // add5는 이제 b값만 받는 함수가 됨
console.log(add5(3)); // 출력: 8
커링은 여러 인자를 받는 함수를 여러 단계의 함수로 분리하는 방식
즉, 두 개 이상의 인자를 받는 함수가 있을 때, 그 인자들을 하나씩 받는 함수로 변환하는 기법입
인자를 좀 시간차 공격해서 (?) 받고 싶을 때 씀