[javascript]자바스크립트 리스트 reverse / 기존 array에 영향을 미치지 않게 하려면?

 

자바스크립트의 reverse() 기능을 알아봅시다.

const arrayOne = ['a', 'b', 'c']
const arrayTwo = arrayOne.reverse()

console.log(arrayTwo) //['c', 'b', 'a']

다른 언어와 마찬가지로, 자바스크립트도 아주 쉽게 reverse() 를 통해 리스트를 역으로 만드는 게 가능합니다. 그런데, 여기서 주의할 점이 있습니다. 요 Array.prototype.reverse() 는 기존 리스트에게 영향을 줍니다.

 

 

즉, arrayTwo를 만들어도 arrayOne도 리버스 되어 있다는 소리입니다.

기존 리스트에 영향을 주지 않고 reverse하는 몇가지 방법

slice 사용하기

const arrayOne = ['a', 'b', 'c'];
const arrayTwo = arrayOne.slice().reverse();
console.log(arrayOne); // ['a', 'b', 'c']
console.log(arrayTwo); // [ 'c', 'b', 'a' ]

spread 사용하기

const arrayOne = ['a', 'b', 'c'];
const arrayTwo = [...arrayOne].reverse();
console.log(arrayOne); // ['a', 'b', 'c']
console.log(arrayTwo); // [ 'c', 'b', 'a' ]

reduceRight 사용하기

const arrayOne = ['a', 'b', 'c'];
const arrayTwo = arrayOne.reduceRight((accumulator, value) => {
  accumulator.push(value);
  return accumulator
}, []);
console.log(arrayOne); // ['a', 'b', 'c']
console.log(arrayTwo); // [ 'c', 'b', 'a' ]

이 세가지의 속도를 비교한 것은 다음과 같습니다. 다음 테스트 케이스는 이 링크를 통해 테스트 가능합니다. ….reverse vs .slice.reverse · jsPerf