[ECMA 2023 살펴보기] toSorted, findLast (w/ mutation)

• mutation

⚡ mutation, 객체 변이
JavaScript의 객체나 배열을 수정하거나 할당할 때, 예상치 못한 변이가 생기는 것.
참조 잘못 하거나, 메서드 잘못 사용하게 되면서 예상치 못한 버그 양산하게 된다.
(관련 학습 - 깊은 복사, 얕은 복사, 상태관리)

---

추가된 메서드 1 : to어쩌구 메서드

JS는 메서드마다 mutation에 대한 일관성이 매우 떨어짐

• arr.sort() 는 원본의 순서를 바꿔버리고,
• arr.filter() 는 원본에는 변화가 없음.
• reverse() 는 원본을 변화시킴..ㅎㅎㅎ
• 위 세가지 메서드에 대해 Mutation 방지할 수 있게 새로 나옴 : toSorted, toSpliced, toReversed

새로 생긴 toSorted 메서드는 원본에 변화가 없다!

toSpliced도 원본에 영향을 미치지 않는다.
뮤테이션 없이(원 배열 변화없이) splice 이후의 배열을 반환하게 되는 것이다.

arr1 = [1,2,3]
// case1 : toSpliced
arr2 = arr1.toSpliced(0,1) 
// case2 : splice
arr2 = arr1.splice(0,1)

1번 케이스는 toSplice로 반환되는 결과인 arr2는 자른 뒤의 [2,3]이 되고, arr1(원배열)에는 변화가 없다.
2번 케이스는 splice로 반환되는 자른 범위인 [1]이 arr2가 되고, arr1은 자른 나머지인 [2,3]이 된다.

따라서 코드 불변성을 유지하면서, 버그를 최소화하면서 수정할 수 있다.

요약

• toSorted는 정렬한 배열을 반환하는 메서드, 단, 원배열에 변화를 주지 않음
• toSpliced는 잘라낸 뒤의 배열을 반환하는 메서드, 이 또한 원배열에 변화 없음.
  잘라낸 부분을 반환하는 splice와 아주~다름.

---

추가된 메서드 2 : with

언제?

: 어떤 배열을 수정해서 활용하고자 할 때

기존의 문제

: 수정된 배열의 결과를 얻고자 할 때, 원본 배열도 함께 수정됐었음

• [1,2,3] => [1,2,4]

arr1 = [1,2,3]
arr1[2] = 4   // arr1 = [1,2,4]

with를 사용하게 되면
arr1 = [1,2,3]
result = arr1.with(2,4) // arr1 은 변하지 않으면서, 수정된 배열의 결과를 가질 수 있게 됨

문법

with(변경하려는 인덱스와, 값)

---

추가된 메서드 3 : findLast, findLastIndex

언제?

: 어떤 값, 어떤 값의 인덱스를 뒤에서부터 찾을 때

기존의 문제

: find, findIndex 만 있었음. 기존의 find, findIndex 메서드는 앞에서 부터 탐색해서 가장 먼저 나오는 걸 찾았기 때문에 배열의 마지막부터 찾으려면 배열을 뒤집어서 복사하는 등의 추가적인 메모리 소모 과정이 있었으나, findLast, findLastIndex메서드가 생겼으니 안 그래도 된다.

문법

findLast(x=> x===찾을 값) 콜백함수를 인자로 넣어준다
findLastIndex(x=> x===찾을 값)

 

---

그 외

HashBang ( !# )

Symbols as WeakMap keys

---

 

참고

제로초 블로그 포스팅

(ECMAScript) ES2023의 변화

노마드코더 영상

 

공식문서를 찾아보는 과정부터 메서드 상세설명까지 매우 잘 설명되어 있는 양질의 블로그!

[JavaScript] ECMAScript 2023 살펴보기

 

findLast proposal github

GitHub - tc39/proposal-array-find-from-last: Proposal for Array.prototype.findLast and Array.prototype.findLastIndex.

 

ECMA2023 공식 문서

ECMAScript® 2023 Language Specification

 

(23.06.07 추가)
What's new in ECMAScript 2023

What's new in ECMAScript 2023 | pawelgrzybek.com