자바스크립트로 배열의 앞 n개 요소만 반전시키는 방법

문제 상황

다음과 같은 숫자 배열이 있다고 가정해 보겠습니다.

const arr = [3, 5, 5, 2, 23, 4, 7, 8, 8, 9];

여기서 우리는 이러한 배열과 하나의 숫자 n(n은 배열 길이보다 작거나 같아야 함)을 입력받아, 배열의 처음 n개 요소만 제자리에서 반전(뒤집기)하는 자바스크립트 함수를 작성해야 합니다. 중요한 점은 나머지 요소들은 원래 순서를 그대로 유지해야 한다는 것입니다.

예를 들어, 위 배열에서 n이 4라고 해보겠습니다.

const arr = [3, 5, 5, 2, 23, 4, 7, 8, 8, 9];

그렇다면 출력 결과는 다음과 같아야 합니다. 처음 4개 요소인 [3, 5, 5, 2]가 [2, 5, 5, 3]으로 뒤집히고, 나머지 요소들은 그대로 유지됩니다.

const output = [2, 5, 5, 3, 23, 4, 7, 8, 8, 9];

구현 방법

이 문제는 자바스크립트 내장 메서드인 slice(), reverse(), splice()를 조합하면 간단하게 해결할 수 있습니다. 먼저 slice()로 앞의 n개 요소를 추출하고, reverse()로 뒤집은 뒤, splice()를 사용해 원본 배열에 다시 반영하는 방식입니다.

코드 예제

const arr = [3, 5, 5, 2, 23, 4, 7, 8, 8, 9];

const partialReverse = (arr = [], num = 0) => {
    // 1. 앞의 num개 요소를 새 배열로 추출
    const partialArr = arr.slice(0, num);
    // 2. 추출한 부분 배열을 뒤집기
    partialArr.reverse();
    // 3. 원본 배열의 해당 구간을 뒤집힌 값으로 교체
    arr.splice(0, num, ...partialArr);
};

partialReverse(arr, 5);
console.log(arr);

실행 결과

위 코드를 실행하면 콘솔에 다음과 같이 출력됩니다. 처음 5개 요소가 뒤집힌 것을 확인할 수 있습니다.

[
    23, 2, 5, 5, 3,
    4, 7, 8, 8, 9
]

동작 원리 살펴보기

partialReverse(arr, 5)가 호출되면 내부적으로 다음 단계가 순서대로 진행됩니다.

1. arr.slice(0, 5) → [3, 5, 5, 2, 23]: 앞의 5개 요소를 복사합니다. 원본 배열은 영향받지 않습니다.
2. reverse() → [23, 2, 5, 5, 3]: 복사된 배열을 뒤집습니다.
3. arr.splice(0, 5, ...partialArr): 원본 배열의 첫 5개 요소를 제거하고, 뒤집힌 요소들을 같은 위치에 삽입합니다.

이 방식은 원본 배열을 직접 수정(in-place)하며, 추가 배열 없이 효율적으로 동작합니다. 만약 원본 배열을 변경하지 않고 새 배열을 반환받고 싶다면, 함수 시작 부분에서 arr = [...arr]처럼 배열을 복사한 뒤 처리하면 됩니다.