Javascript Curring

eunji hwang·2020년 8월 15일
0

Javascript

목록 보기
8/8
post-custom-banner

Curring

  • 커링(curring), 커리 함수(curried function)
  • 함수 내부에서 변수선언 없이 바로 함수를 리턴
  • JS에서는 클로져의 원리로 구현되지만, 이런 패턴의 코드를 커링이라고 구분지어 부름
  • 화살표함수가 값을 바로 리턴한다면 중괄호와 return 키워드를 생략하여 작성
// () 와 {}, return 키워드를 사용한 curring 작성
const curring = (arg1) => {
  return (arg2) => {
    return arg1 + arg2;
  }
}
// 생략할 것 다 생략한 curring 작성
const curring = arg1 => arg2 => arg1+arg2;

🤔 그래서, 언제 쓰는거니?

함수가 인자를 여러번에 걸쳐 받아 실행해야 하는 상황!

왜 써?

함수의 재사용성을 높일수 있음
라이브러리와 같이 타인이 작성한 함수를 수정하지 않고 사용할 때 유용

  • 커리함수가 처음 받는 인자 : 설정 or 옵션 등에 해당하는 값
  • 나중에 받는 인자 : 적용대상, 등에 해당

배열메서드 커링으로 구현

map(),filter(),reduce(),sort(),reverse(),slice()를 커링으로 구현해보자!

  • 원본 배열을 변경하지 않고 새로운 배열 리턴하도록 구현
  • map(),filter(),reduce(),sort()CB 인자를 받도록
  • reverse() : 인자 없음
  • slice() : 2개의 숫자 값을 인자로 받음
const mapArray = (func) => (arr) => {
  return arr.map(func);
};

const filterArray = (func) => (arr) => {
  return arr.filter(func);
};

const reduceArray = (func, init) => (arr) => {
  return arr.reduce(func, init);
};

const sortArray = (func) => (arr) => {
  const newArr = [...arr];
  return newArr.sort(func);
};

const reverseArray = () => (arr) => {
  const newArr = [...arr];
  return newArr.reverse();
};

const sliceArray = (start, end) => (arr) => {
  return arr.slice(start, end);
};

const numberNames = mapArray((e, i) => {
  return `${i + 1}. ${e}`;
});

음.. 책에 수록된 내용을 따라해봤지만, 실제로 어떻게 활용되는지 감이 잘 안잡힌다 😱... 실무에 쓰는 날이 오길

profile
TIL 기록 블로그 :: 문제가 있는 글엔 댓글 부탁드려요!
post-custom-banner

0개의 댓글