[JavaScript] 자바스크립트 reverse 함수

 

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

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

 

구문

arr.reverse()

 

arr은 reverse() 함수를 적용할 원본 배열입니다.
매개변수는 없습니다.

 

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() 함수는 기존 원본 배열을 직접 수정합니다.
즉, reverse() 함수를 호출하면 호출한 원본 배열 자체가 역순으로 변경되며, 새로운 배열이나 복사본이 
생성되지 않습니다. 따라서 이 함수를 사용하는 경우 원본 배열이 변경된다는 것을 알아야 합니다. 
만약 원본 배열을 변경하고 동시에 원본 배열을 유지하고 싶다면, 복사본을 만들어서 reverse()를 적용하거나 
toReversed() 함수를 사용해야 합니다.

 

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] (역순으로 된 배열)

 

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() 함수의 단점을 보완하기 위해 2023년도에 도입되었습니다. 
이전에는 reverse() 함수만 사용하여 배열의 요소 순서를 역순으로 정렬할 수 있었습니다.

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

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]

 

 

활용 사례

 

● 순서 반전 후 반복

const numbers = [1, 2, 3, 4, 5];
// 배열 순서를 역순으로 변경하고 각 요소 출력
numbers.reverse().forEach(number => {
    console.log(number);
});
//  5, 4, 3, 2, 1

 

 

● 문자열 뒤집기

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

 

 

● 역순으로 필터링

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