[javascript] reversed, toReversed | 배열의 순서를 뒤짚는 메서드

자바스크립트에는 배열의 순서를 뒤짚는 메소드로 두 가지를 지원한다. reversed 와 toReversed 이다. 이들 각각은 모두 배열의 순서를 뒤짚는 것은 동일하지만, reversed 는 원본 배열을 파괴한다. 그러나 toReversed 는 원본 배열은 그대로 두고, 복사본을 반전시켜 새로운 배열로 반환하는 점에서 차이가 있다. 이를 각각 살펴 보자.

 

Array.Prototype.reversed()

배열 a 가 있을 때, reversed( ) 를 사용하면 원본 배열 자체를 변형시킨 결과를 반환한다( 파괴적 메소드).

const a = [1, 2, 3];
console.log(a); // [1, 2, 3]

a.reverse();
console.log(a); // [3, 2, 1]

 

reversed 는 희소배열을 반전시키는 경우, 희소배열을 반전시킨 그대로를 반환한다.

참고로 희소배열 이란 연속되지 않는 배열을 의미한다. 즉, 1,2,3,4,5 와 같이 이어지는 것이 아니라 1,  , 2 , 3, 4 와 같이 연속되지 않고 빈 공간이 존재하는 배열을 뜻한다.

const array = [1,2, ,3,4,5]

const reversedArr = array.reverse();

console.log(array) //  [5, 4, 3, 비어 있음, 2, 1]
console.log(reversedArr) //  [5, 4, 3, 비어 있음, 2, 1]

 

Array.Prototype.toReversed()

원본 배열은 원상태로 유지하고, 복사본을 반전시켜 새로운 배열로 반환한다.

const items = [1, 2, 3];
console.log(items); // [1, 2, 3]

const reversedItems = items.toReversed();
console.log(reversedItems); // [3, 2, 1]
console.log(items); // [1, 2, 3]

 

toReserserd 는 눈에 띄는 특징이 존재하는데,  희소배열에 사용하는 경우, 희소배열이 아닌 연속된 배열을 반환한다. 즉, 연속되지 않은 공간(빈 슬릇)의 경우 undefined 로 대체되어, 연속된 배열로서 반환되는 것이다.

const array = [1,2, ,3,4,5]

const reversedArr = array.toReversed();

console.log(reversedArr) // [5, 4, 3, undefined, 2, 1]

 

결론적으로..

 위 두 메소드 모두 배열의 원소를 반전시키는 것은 동일하지만, reversed() 의 경우에는 원본을 파괴하고,  toReversed( )의 경우에는 원본 상태를 유지하며, 새로운 배열을 반환한다.

 

또한, reversed( )의 경우 희소배열에 적용하면, 희소배열을 반환하지만, toReversed () 의 경우 희소배열에서 연속되지 않은 빈공간을 undefined 로 대체하고, 연속된 배열로 변환하여 반환한다.

 

참고자료

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/toReversed

Array.prototype.toReversed() - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse