관리 메뉴

틈틈히 메모중

[javascript] ()=>()=>{}를 쓸 때... 본문

[오늘의 공부]/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

커링은 여러 인자를 받는 함수를 여러 단계의 함수로 분리하는 방식
즉, 두 개 이상의 인자를 받는 함수가 있을 때, 그 인자들을 하나씩 받는 함수로 변환하는 기법입

인자를 좀 시간차 공격해서 (?) 받고 싶을 때 씀