자바스크립트에서 여러 요소를 배열의 맨 앞으로 이동하는 방법

배열과 임의 개수의 문자열을 인수로 받는 함수를 작성해야 하는 경우가 있습니다. 이 함수의 역할은 전달된 문자열이 배열 안에 존재하는지 확인하고, 존재한다면 해당 요소를 배열의 맨 앞으로 이동시키는 것입니다.

이 문제는 Array.prototype.splice()와 Array.prototype.unshift() 메서드를 조합하면 간단하게 해결할 수 있습니다. splice()는 지정한 위치의 요소를 배열에서 제거하면서 그 값을 반환하고, unshift()는 새로운 요소를 배열의 맨 앞에 추가합니다.

예제 코드

const arr = ['The', 'weather', 'today', 'is', 'a', 'bit', 'windy.'];

const pushFront = (arr, ...strings) => {
   strings.forEach(el => {
      const index = arr.indexOf(el);
      if(index !== -1){
         arr.unshift(arr.splice(index, 1)[0]);
      }
   });
};

pushFront(arr, 'today', 'air', 'bit', 'windy.', 'rain');
console.log(arr);

실행 결과

콘솔에는 다음과 같이 출력됩니다.

[ 'windy.', 'bit', 'today', 'The', 'weather', 'is', 'a' ]

코드 동작 원리

1. rest 파라미터 활용: ...strings를 사용해 두 번째 인수부터 전달된 모든 문자열을 하나의 배열로 받습니다.
2. 요소 검색: indexOf()로 각 문자열이 배열 내 어느 위치에 있는지 확인합니다. 존재하지 않으면 -1을 반환하므로, 배열에 없는 'air'와 'rain'은 자연스럽게 무시됩니다.
3. 요소 이동: splice(index, 1)[0]으로 해당 요소를 배열에서 잘라낸 뒤, unshift()로 맨 앞에 삽입합니다.

참고: 문자열은 전달된 순서대로 차례차례 처리되기 때문에, 나중에 처리된 요소일수록 더 앞쪽에 위치하게 됩니다. 실행 결과에서 'windy.'가 가장 앞에 있는 이유가 바로 이것입니다.