원본코드

state.linkList = [
  { key: 'brandUrl', label: '브랜드 홈' },
  { key: 'youtube', label: '유튜브' },
  { key: 'facebook', label: '페이스북' },
  { key: 'kakaotalk', label: '카카오톡' },
  { key: 'twitter', label: '트위터' },
].reduce((acc, { key, label }) => {
  if (brandInfo[key]) {
    acc.push({
      value: brandInfo[key],
      label,
    });
  }
  return acc;
}, []);

• 실로 신묘한 코드가 아닐 수 없다. state.linkList 에 Key, Label로 구성된 Array를 대입하는가 싶었더니만 사실은 reduce를 돌리기 위한 술책이었다!
• 실제로 linkList에 들어가는 값은 brandInfo에서 추출되는 값이다. 저 코드로는 가독성이 너무 떨어진다.
• 후임이 욕심이 너무 많아서 함수 하나에 너무 많은 일을 시키고 있다. 저 위 아래로도 로직이 꽤 길게 이어져 있다.

리펙토링

const linkLabels = {
  brandUrl: '브랜드 홈',
  youtube: '유튜브',
  facebook: '페이스북',
  kakaotalk: '카카오톡',
  twitter: '트위터',
};

const getLinkList = (brandInfo, linkLabels) => {
  return fp.flow(
    fp.toPairs,
    fp.map(([key, label]) => ({
      label,
      value: brandInfo[key],
    })),
    fp.filter(link => link.value),
  )({...linkLabels});
};

state.linkList = getLinkList(brandInfo, linkLabels);

라벨 테이블을 함수 안에 넣어도 되겠지만 차후 수정을 위해서도 저렇게 하는 것이 깔끔하고 가독성도 좋다고 판단했다. 사실 flow에 라벨 테이블이 아니라 brandInfo를 넣고 돌리고 싶었지만 워낙 잡다한 데이터들이 많았고, 구조 분해로 가져올 수도 있지만 그렇게까지해서 코드 라인수를 늘릴 필요는 없을 것 같았다.