(JS)클린 코드 시리즈3 - Named Callback Function #명명된 콜백 함수

보통 콜백 함수로 익명함수를 자주 많이 씁니다. .reduce(),  .map(),  .foreach()... 등 안에 () => {} 익명의 함수를
콜백 함수로 넣습니다.

편하고 필요할때 적시 적소에 쓰이기 때문에 매우 유용합니다. 예를들어 객체 배열 안에 든 값을 map으로
아래처럼 가공하여 보여줄 수 있습니다.

  interface IGoblin {
    name: string
    hp: number
    attack: number
  }

  const goblins: Array<IGoblin> = [
    {
      name: 'goblin warrior',
      hp: 200,
      attack: 30
    },
    {
      name: 'goblin archer',
      hp: 120,
      attack: 40
    },
    {
      name: 'goblin magicion',
      hp: 100,
      attack: 50
    },
  ]

  const goblinsViewModels = goblins.map(goblin => ({
    show: `${goblin.name}  HP/${goblin.hp}  Attack/${goblin.attack}`
  }));
  
  console.log('goblinsViewModels : ', goblinsViewModels);

  결과 : 
  goblinsViewModels :  [
        {show: "goblin warrior  HP/200  Attack/30"}
        {show: "goblin archer  HP/120  Attack/40"}
        {show: "goblin magicion  HP/100  Attack/50"}
      ]

 

하지만 익명함수는 일회성으로 필요한 경우에는 유용하지만 반복적으로 쓰일때는 익명의 함수를 명명된 함수로 선언해주는게 좋습니다.

명명된 함수를 사용하면 재사용도 가능해질 뿐만 아니라 내가 짠 코드를 다른 사람이 볼때도 이름을 보고 어떤 함수 인지 빠르게

파악이 가능하여 협업시에도 유용합니다. 가독성 좋고 이해하기 쉬운 코드가 결국엔 생산성을 증가 시켜줄 것입니다.

아래는 명명된 콜백 함수를 쓴 예제입니다.

 

  interface IGoblin {
    name: string
    hp: number
    attack: number
  }

  const goblins: Array<IGoblin> = [
    {
      name: 'goblin warrior',
      hp: 200,
      attack: 30
    },
    {
      name: 'goblin archer',
      hp: 120,
      attack: 40
    },
    {
      name: 'goblin magicion',
      hp: 100,
      attack: 50
    },
  ]
  
  const toGoblinViewModel = (goblin: IGoblin) => ({
    show: `${goblin.name}  HP/${goblin.hp}  Attack/${goblin.attack}`
  })

  const goblinsViewModels = goblins.map(toGoblinViewModel)
  
  console.log('goblinsViewModels :',goblinsViewModels);
  
  
  결과 : 
  goblinsViewModels :  [
        {show: "goblin warrior  HP/200  Attack/30"}
        {show: "goblin archer  HP/120  Attack/40"}
        {show: "goblin magicion  HP/100  Attack/50"}
      ]