[JavaScript] 명칭 중복시 SeqNum 추가하기

내용

카테고리 리스트 중 카테고리를 추가 할 시 "새 카테고리"라는 명칭으로 기본 텍스트를 제공한다.
이때 이미 카테고리 리스트에 "새 카테고리"라는 제목이 있다면 "새 카테고리(Num)"라는 명칭으로 기본 텍스트를 제공할 수 있도록 요청이 왔다.
또한, 카테고리 리스트는 순서 변경도 가능하기에 이점도 유의해야한다.

조건1)

[before]
카테고리 리스트

• 공부
• 게임
• 새 카테고리

이렇게 리스트가 존재할 시 추가 버튼을 누르면 Input내용에 "새 카테고리(2)"가 나타나야한다.

[after]
카테고리 리스트

• 공부
• 게임
• 새 카테고리
• 새 카테고리(2)

조건2)

seqNum 중 빈값이 있을경우 그 값을 seqNum으로 지정해야한다.

카테고리 리스트

• 공부
• 게임
• 새 카테고리
• 새 카테고리(2)
• 새 카테고리(5)
• 새 카테고리(4)

카테고리 추가시 Input 내용에 "새 카테고리(3)"이 나타나야한다.

코드

const categoryBasicTitle = '새 카테고리'
const categoryList = [
  {labelText : '공부'},
  {labelText : '게임'},
  {labelText : '새 카테고리(2)'},
   {labelText : '새 카테고리(5)'},
  {labelText : '새 카테고리(4)'},
];

//중복 카테고리명 리스트 추출
const categoryReg = new RegExp(`^${categoryBasicTitle}\\([0-9]+\\)$`)
const categoryBasicTitleList = categoryList.filter((cor) => {
  return cor.labelText.match(categoryReg);
  });

/*
[
    {
        "labelText": "새 카테고리(2)"
    },
    {
        "labelText": "새 카테고리(5)"
    },
    {
        "labelText": "새 카테고리(4)"
    }
]
*/

//카테고리 Seq 리스트 추출
const seqReg = new RegExp(/[^0-9]/, "g");
const categorySeqList = categoryBasicTitleList.map((cor) => {
  return Number(cor.labelText.replace(seqReg,""));
  });
/*
[2, 5, 4]
*/

//Seq 리스트 오름차순 정렬
categorySeqList.sort(function(a, b)  {
  return a - b;
});
/*
[2, 4, 5]
*/

//Seq 값 설정
const newSeq = categorySeqList.reduce((acc, cur, i) => {
  return (cur-(i+2) === 0)? ++cur : acc
},2);
// 3

const categoryNewTitle = `${categoryBasicTitle}(${newSeq})`
console.log(categoryNewTitle); 
// "새 카테고리(3)"

느낀점

• 어떻게 보면 쉬울수도 있지만 처음 로직을 짤때는 reduce, map에 대해 잘 몰라 헤맸다.
• 초기 로직 : if문 여러개로 구분하여 return하는 구조
• 위의 해당 코드 역시 잘 작성했다고는 못하겠지만 나중엔 조금더 간결하게 짤 수 있는지 고민해봐야 할 듯,,,