[Tistory] js higher order function에 대하여

원글 페이지 : 바로가기

이번에는 JavaScript의 고차함수에 대하여 작성해보려고 한다. JavaScript에서 “고차 함수”는 다른 함수를 인자로 받거나 함수를 반환하는 함수를 말합니다. 이러한 기능은 함수형 프로그래밍 스타일을 지원하며, JavaScript에서 함수를 값으로 다룰 수 있는 유연성을 제공합니다. 나는 함수를 인자로 받는 방식의 고차함수를 활용해 보았는데 결과가 훌륭했다! 활용하기 전



이 코드가 나의 원래 코드였다. 5개의 아이콘을 직접 입력하였고 새로운 아이콘을 추가하고 싶다면 직접 추가하면 되었다. map을 이용한 고차함수를 활용하고 난 후 export type IconItem = {
name: TName;
width: string | number;
height: string | number;
viewBox: TBox;
};

export const CIRCLE_ICON_PRESET: Array = [
{ 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 (

);
})} 이렇게 작성을 하고 나면 화면에 들어가는 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 들어가기 전에 이 포스팅은 https://blog.bitsrc.io/understanding-higher-order-functions-in-javascript-75461803bad 에 있는 포스팅을 번역한 것입니다. 오역이나 의역이 있을 수 있습니다. 지적해주시면 확인 후 바로 velog.io