Array.prototype.reverse() 사용법

reverse() 함수는
배열의 요소 순서를 역순(reverse)으로 정렬하는 함수입니다.
즉, 첫 번째 요소는 마지막 요소가 되고 마지막 요소는 첫 번째 요소가 됩니다.

reverse() 함수는 원본 배열을 직접 수정하며, 새로운 배열을 반환하지 않습니다.

JavaScript 
const arr = [1, 2, 3, 4, 5];
const reversedArr = arr.reverse();

/* 배열의 요소 순서를 역순으로 정렬합니다. */
console.log(reversedArr); // 출력: [5, 4, 3, 2, 1]

/* 원본 배열을 직접 수정합니다. */
console.log(arr); // 출력: [5, 4, 3, 2, 1]

reverse() 함수의 형식은 다음과 같습니다.

구문

JavaScript 
arr.reverse()

arr: reverse() 함수를 적용할 원본 배열입니다.

매개변수

없습니다.

반환 값

원본 배열의 요소 순서를 역순으로 변경하고, 그 결과로 해당 배열을 반환합니다.
반환 값은 변경된 원본 배열 자체입니다. 새로운 배열을 반환하지 않습니다.

주의할 점

주의할 점은 reverse() 함수가 기존 원본 배열을 직접 수정한다는 것입니다. 즉, reverse() 함수를 호출하면 호출한 원본 배열 자체가 역순으로 변경되며, 새로운 배열이나 복사본이 생성되지 않습니다. 따라서 이 함수를 사용하는 경우 원본 배열이 변경되는 것을 고려해야 합니다. 만약 원본 배열을 변경하고 동시에 원본 배열을 유지하고 싶다면, 복사본을 만들어서 reverse()를 적용하거나 toReversed() 함수를 사용하세요.

복사본을 만들어서 reverse()를 적용하기 - 1

JavaScript slice() 함수를 사용해서 원본 배열 복사하기 
const originalArray = [1, 2, 3, 4, 5];

// 원본 배열의 복사본을 생성
const copiedArray = originalArray.slice();

// 복사본에 reverse() 함수를 적용
copiedArray.reverse();

console.log(originalArray); // [1, 2, 3, 4, 5] (원본 배열은 변경되지 않음)
console.log(copiedArray);   // [5, 4, 3, 2, 1] (역순으로 된 배열)
자바스크립트 배열 slice() 함수

복사본을 만들어서 reverse()를 적용하기 - 2

JavaScript 스프레드(…) 문법을 사용해서 원본 배열 복사하기 
const originalArray = [1, 2, 3, 4, 5];

// 원본 배열 복사
const copiedArray = [...originalArray];

// 복사본에 reverse() 함수를 적용
copiedArray.reverse();

console.log(originalArray); // [1, 2, 3, 4, 5] (원본 배열은 변경되지 않음)
console.log(copiedArray);   // [5, 4, 3, 2, 1] (역순으로 된 배열)
자바스크립트 스프레드(…) 문법

toReversed() 함수 사용하기

toReversed() 함수는 reverse() 함수와 모든 기능이 동일하지만 원본 배열을 변경하지 않습니다.

toReversed() 함수는 reverse() 함수의 단점을 보완하기 위해 ECMAScript 2023에서 처음으로 도입되었습니다. 이전에는 reverse() 함수만 사용하여 배열의 요소 순서를 역순으로 정렬할 수 있었습니다.

reverse() 함수는 원본 배열을 변경하기 때문에 원본 배열의 요소를 유지해야 하는 경우 사용할 수 없습니다. toReversed() 함수는 새 배열을 생성하여 요소를 변경하기 때문에 이러한 문제를 해결할 수 있습니다.

JavaScript 
const originalArray = [1, 2, 3, 4, 5];

/* 배열의 요소 순서를 역순으로 정렬합니다. */
const reversedArray = originalArray.toReversed();

console.log(reversedArray); // [5, 4, 3, 2, 1] (역순으로 된 배열)

/* 원본 배열은 바뀌지 않습니다. */
console.log(originalArray);   // [1, 2, 3, 4, 5]

주의하세요!
toReversed() 함수는 2023년도에 도입된 것으로 사용 시 브라우저 호환성을 확인해야 합니다.

toReversed() 함수의 브라우저 호환성
메서드
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
toReversed() 110 110 115 16

caniuse.com에서 더 자세한 정보를 확인해 보세요.

다양한 예시

reverse() 함수는 여러 상황에서 다양하게 활용될 수 있습니다. 몇 가지 예시를 살펴보겠습니다.

순서 반전 후 반복

JavaScript 
const numbers = [1, 2, 3, 4, 5];

// 배열 순서를 역순으로 변경하고 각 요소 출력
numbers.reverse().forEach(number => {
    console.log(number);
});

// 출력: 5, 4, 3, 2, 1
자바스크립트 forEach() 함수

문자열을 뒤집기

JavaScript 
const str = 'Hello, World!';

// 문자열을 배열로 변환하고 역순으로 변경한 후 다시 문자열로 조립
const reversedStr = str.split('').reverse().join('');

console.log(reversedStr);
// 출력: '!dlroW ,olleH'
자바스크립트 문자열 split() 함수
자바스크립트 sort() 함수
자바스크립트 join() 함수

역순으로 필터링

JavaScript 
const numbers = [1, 2, 3, 4, 5];

// 배열을 역순으로 변경하고 특정 조건을 만족하는 요소만 필터링
const filteredNumbers = numbers.reverse().filter(number => number % 2 === 0);

console.log(filteredNumbers);
// 출력: [4, 2]
자바스크립트 filter() 함수

브라우저 호환성

배열 reverse() 함수의 브라우저 호환성
메서드
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
reverse() 1 12 1 1

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

배열 reverse() 함수의 명세서 사양
명세서 사양
reverse() ECMAScript Language Specification
#sec-array.prototype.reverse

참고문헌

같이 보기