Array.reverse 사용법

---

JavaScript 내장 함수

JavaScript에는 여러가지 함수가 내장되어있다.

따라서 JavaScript가 제공해주는 함수를, 내가 원하는 때에 사용하면 그만이다.

특별히 Array (=배열) 형태에 사용할 수 있는 함수 중에서,

배열.reverse() 을 알아보자

 

---

우공이산 (愚公移山)

「우공(愚公)이 산을 옮긴다.」는 말로,

남이 보기엔 어리석은 일처럼 보이지만 한 가지 일을 끝까지 밀고 나가면,

언젠가는 목적(目的)을 달성(達成)할 수 있다는 뜻.

하나씩 함수를 알아가보자!

외울 필요도 없다. reverse()가 필요한 때에 지금 이 노트를 기억해서, 필요한 곳에 적용하기만 하면 된다.

 

---

 

Array.reverse()

역할 : 배열의 순서를 역순으로 바꾸어 준다.

const 배열1 = ['하나', '둘', '셋'];

▶ 1. reverse를 적용하지 않고, console.log 찍어보기

console.log(배열1)

// 기대되는 결과 : ['하나', '둘', '셋]

 

▶ 2. reverse를 적용하고, console.log 찍어보기

배열1.reverse()

console.log(배열1)

// 기대되는 결과 : ['셋', '둘', '하나']

 

EASY

 

---

(이건 참고만) 개인적으로 React에서 Array을 가공해서 사용하는 경우가 많던데...

그럴땐 보통 "배열의 얉은 복사"를 통해서,

기존의 배열을 reverse() 해주는 것이 아닌,

새로운 배열을 복사해서 만들어낸 후, reverse() 를 해주는 방법을 사용하는 것이 좋다.

const 배열 = ['하나', '둘', ...]
즉, [...배열].reverse()
와 같은 모양으로 사용하자는 의미

 

React는 변하기 전 DOM과 변할 DOM을 비교하여,

달라지지 않은 것은 그대로 두고,

달라진 것만 바꾸어주는 방식으로 성능의 최적화를 이루는 방식이기 때문.

 

즉 얉은 복사를 하면 => 이전 배열과 다른 새로운 배열을 사용하였으므로, React가 변화했다고 감지할 것이고

얉은 복사를 하지 않으면 => React가 변화를 감지하지 못하거나 Error를 뿜을 확률이 높음 (Feat. Redux같은 애들과 사용할때 특히)