js higher order function에 대하여

이번에는 JavaScript의 고차함수에 대하여 작성해보려고 한다.

 

JavaScript에서 "고차 함수"는 다른 함수를 인자로 받거나 함수를 반환하는 함수를 말합니다. 이러한 기능은 함수형 프로그래밍 스타일을 지원하며, JavaScript에서 함수를 값으로 다룰 수 있는 유연성을 제공합니다.

 

나는 함수를 인자로 받는 방식의 고차함수를 활용해 보았는데 결과가 훌륭했다!

 

 

활용하기 전

---

<CircleIconChip name={'faceWorst'} width={20} height={20} viewBox={'0 0 20 20'}  />
<CircleIconChip name={'faceBad'} width={24} height={24} viewBox={'0 0 24 24'}  />
<CircleIconChip name={'faceNormal'} width={24} height={24} viewBox={'0 0 24 24'}  />
<CircleIconChip name={'faceGood'} width={24} height={24} viewBox={'0 0 24 24'}  />
<CircleIconChip name={'faceBest'} width={20} height={20} viewBox={'0 0 20 20'}  />

이 코드가 나의 원래 코드였다. 5개의 아이콘을 직접 입력하였고 새로운 아이콘을 추가하고 싶다면 직접 추가하면 되었다.

 

 

 

map을 이용한 고차함수를 활용하고 난 후

---

export type IconItem<TName = IconRegistryKey, TBox = ViewBoxSize> = {
  name: TName;
  width: string | number;
  height: string | number;
  viewBox: TBox;
};

export const CIRCLE_ICON_PRESET: Array<IconItem> = [
  { name:'faceWorst' , width:20 , height:20 , viewBox:'0 0 20 20' },
  { name:'faceBad' , width:24 , height:24 , viewBox:'0 0 24 24' },
  { name:'faceNormal' , width:24 , height:24 , viewBox:'0 0 24 24' },
  { name:'faceGood' , width:24 , height:24 , viewBox:'0 0 24 24' },
  { name:'faceBest' , width:20 , height:20 , viewBox:'0 0 20 20' },
];

...

{CIRCLE_ICON_PRESET?.map((icon) => {
	return (
		<CircleIconChip name={icon.name} width={icon.width} height={icon.height} viewBox={icon.viewBox} />
	);
})}

 

 이렇게 작성을 하고 나면 화면에 들어가는 icon의 구성은 CIRCLE_ICON_PRESET에서 확인하면 되고 이를 화면에 띄우는 부분은 밑의 return 구문에서 이뤄지니 코드가 훨씬 짧고 읽기 쉽게 바뀐 것을 알 수 있다.

 

혹시 이 방법 외에도 좋은 방법이 있다면 알려주세요! 읽어주셔서 감사합니다.

 

 

 

 

※밑의 블로그를 참고하면서 공부하였습니다.

https://velog.io/@jakeseo_me/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%9D%BC%EB%A9%B4-%EC%95%8C%EC%95%84%EC%95%BC-%ED%95%A0-33%EA%B0%80%EC%A7%80-%EA%B0%9C%EB%85%90-22-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B3%A0%EC%B0%A8-%ED%95%A8%EC%88%98Higher-Order-Function-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0

자바스크립트 개발자라면 알아야 할 33가지 개념 #22 자바스크립트 : 자바스크립트 고차 함수(Highe