toSorted, toReverse, toSpliced, with

devjieun·2024년 4월 24일

🦎JavaScript

목록 보기
11/11
post-thumbnail

기존 메서드 sort(), reverse(), splice() 사용하는 대신 새로나온 메서드인 toSorted(), toReverse(), toSpliced(), with() 를 사용한다.

리액트 문서에서도 원본 배열을 변경하는 것을 금지한다. 왜냐하면 리액트에서는 상태를 불변적으로 관리해야 컴포넌트가 문제 없이 리렌더링되기 때문이다. 이 문제를 해결하기 위해 배열을 먼저 복사하고나서 변경해야 했다. 하지만 매번 복사본을 만드는 메서드를 사용하는 것은 번거로운 일이다.이것이 새로운 메서드들이 등장하게 된 이유이다.

toSorted(), toReverse(), toSpliced(), with()는 원본 배열을 복사하고, 이를 변경해서 반환한다. 이때 원본 배열은 변경되지 않는다.


  • toSorted()는 정렬된 새로운 배열을 반환한다.
  • toReverse()는 반대로 나열된 새로운 배열을 반환한다.
  • toSpliced()는 배열을 복사한 후 주어진 인덱스가 삭제되거나 대체된 새로운 배열을 반환한다.
  • with()는 주어진 인덱스의 요소가 주어진 값으로 변경된 후 배열을 반환한다.

복사된 배열을 변경하기 때문에 데이터 불변성을 유지하면서 프로그래밍을 더 안전하고 효율적으로 할 수 있다.


sort()
reverse()
splice()
toSorted()
toReversed()
toSpliced()
.with()

profile
Front-End Developer👩🏻‍💻 미래 준비생 🌱

0개의 댓글