JavaScript 배열의 마지막 n개 요소를 맨 앞으로 이동하는 방법

배열의 마지막 요소들을 맨 앞으로 옮겨야 하는 상황을 생각해 봅시다. 예를 들어 prependN()이라는 배열 함수를 작성한다고 가정해 보겠습니다. 이 함수는 숫자 n(n은 해당 배열의 길이보다 작거나 같아야 함)을 인자로 받아, 배열 끝에서 n개의 요소를 잘라내어 배열의 맨 앞으로 이동시킵니다.

여기서 중요한 조건은 두 가지입니다. 첫째, 원본 배열 자체를 직접 변경(in-place)해야 하고, 둘째, 함수는 작업 성공 여부에 따라 불리언 값만 반환해야 합니다.

예시로 이해하기

// 입력 배열이 다음과 같을 때:
const arr = ["blue", "red", "green", "orange", "yellow", "magenta", "cyan"];
// n = 3이라면,
// 배열은 아래와 같이 재배열되어야 합니다:
const output = ["yellow", "magenta", "cyan", "blue", "red", "green", "orange"];
// 이때 함수의 반환값은 true가 되어야 합니다

그럼 이제 실제 코드를 작성해 보겠습니다. splice() 메서드로 배열 끝의 요소를 추출한 뒤, unshift() 메서드로 맨 앞에 삽입하는 방식을 사용합니다.

구현 코드

const arr = ["blue", "red", "green", "orange", "yellow", "magenta", "cyan"];

Array.prototype.reshuffle = function(num){
   const { length: len } = this;
   // 요청한 개수가 배열 길이보다 크면 실패 처리
   if(num > len){
      return false;
   };
   // 배열 끝에서 num개의 요소를 잘라냄
   const deleted = this.splice(len - num, num);
   // 잘라낸 요소들을 맨 앞에 삽입
   this.unshift(...deleted);
   return true;
};

console.log(arr.reshuffle(4));
console.log(arr);

실행 결과

콘솔에 출력되는 결과는 다음과 같습니다.

true
[
   'orange', 'yellow',
   'magenta', 'cyan',
   'blue', 'red',
   'green'
]

코드 동작 원리

이 함수의 핵심 로직을 단계별로 살펴보면 다음과 같습니다.

1. 유효성 검사: 전달받은 num이 배열 길이보다 크면 요소를 이동할 수 없으므로 즉시 false를 반환합니다.

2. splice()로 요소 추출: this.splice(len - num, num)은 시작 인덱스 len - num부터 num개의 요소를 제거하고 그 요소들을 새 배열로 반환합니다. 이 과정에서 원본 배열은 이미 변경됩니다.

3. unshift()로 앞쪽 삽입: 스프레드 연산자(...)를 사용해 잘라낸 요소들을 배열 맨 앞에 한 번에 삽입합니다.

4. 성공 반환: 모든 작업이 완료되면 true를 반환합니다.

이처럼 splice()와 unshift()를 조합하면 추가 배열을 생성하지 않고도 원본 배열을 제자리에서 효율적으로 재배열할 수 있습니다.