계기

제목대로 임의의 순서로 배열을 재정렬 해야 할 일이 생겼다.

위는 구현해야 할 장비의 상세정보의 일부이다.
현재 구현 중인 부분은 해당 장비의 세트 효과를 가진 장비의 장착 현황을 나타내는 부분이다. API에 정보를 요청하면 다음과 같은 형태로 응답이 온다.

여기서 문제와 마주쳤다.
세트 효과 장비의 순서는 머리, 어깨, 상의, 하의, 장갑, 무기 이다. 그럼 위의 배열을 어떻게 임의의 순서로 정렬한단 말인가?

어떻게?

1. 결국 결과값은 하나의 배열이어야 하니깐 일단은 두 배열을 합쳐주었다.

[
	...equipment.set.setItemEnableList,
	equipment.set.setItemDisableList,
].flat();

2. 그 다음 정렬을 해야하는데, 나는 1시간 고민한 뒤 다음과 같이 정렬에 성공했다.

[
  ...equipment.set.setItemEnableList,
  equipment.set.setItemDisableList,
]
  .flat()
  .sort((a, b) => {
    let aOrder = 0;
    let bOrder = 0;

    if (a.includes("머리")) aOrder = 0;
    else if (a.includes("어깨")) aOrder = 1;
    else if (a.includes("상의")) aOrder = 2;
    else if (a.includes("하의")) aOrder = 3;
    else if (a.includes("장갑")) aOrder = 4;
    else aOrder = 5;

    if (b.includes("머리")) bOrder = 0;
    else if (b.includes("어깨")) bOrder = 1;
    else if (b.includes("상의")) bOrder = 2;
    else if (b.includes("하의")) bOrder = 3;
    else if (b.includes("장갑")) bOrder = 4;
    else bOrder = 5;

    return aOrder - bOrder;
  })

각각의 요소를 if문으로 구별해낸 뒤 임의의 순서를 매겨줘서 정렬에 성공했다.

좀 더 우아한 방법을 상상하고 이것저것 해보았는데, 하면 할 수록 점점 코드가 더러워졌다. sort 메서드를 사용하지 않고 배열의 순서를 바꾸려면 splice 메서드를 사용해야 하는데, 그렇게 하니 코드가 점점 더 알아보기 힘들어졌다. splice 메서드를 사용한 배열 재정렬은 지금과 같은 상황에선 좋지 못했다.