ECMAScript 2023

ECMAScript 2023 살펴보기 👀

스터디원 분의 블로그를 보던 중 알게 되어 새로 추가된 자바스크립트 문법들을 

공부하며 내 블로그에도 정리하고 싶어 양해를 구하고 🙌 나도 분석해보게 되었다.

 

 

toSorted, toReversed, with, findLast, findLastIndex, toSpliced ...

 

1. to ~

✔ toSorted

자바스크립트는 메서드마다 mutation 에 대한 일관성이 없다. 

예를 들면  sort() 과 reverse() 는 원본을 바꿔버리고, filter 는 원본에 변화가 없다.

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

 

 

 

 

이렇게 sort 를 사용하면 원본 배열이 변화가 된다

새로생긴 toSorted를 이용하면, 원본 배열은 그대로 유지가 되는 것을 볼 수 있음!

그래서 sort를 사용할 때, 원본 배열이 변하지 않게 하기 위해서 복사를 한 번 해주는 과정을 거쳐야하는데

이 메서드를 이용하면 그런 과정을 거치지 않아도 된당

 

 

 

✔ toSpliced

toSpliced도 원본에 영향을 미치지 않는다. 원본 배열을 바꾸지 않고 splice 이후의 배열을 반환하게 되는 것이다.

 

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

Array.prototype.splice() - JavaScript | MDN

공식 문서에서 볼 수 있듯, splice() 는 array.splice(start[, deleteCount[, item1[, item2[, ...]]]])  로 splice(제거를 시작할 인덱스, 지울 개수, 추가할 요소) 이렇게 이용하는 것인데, toSpliced도 똑같다.

대신 앞서 말했듯 원본 배열을 바꾸지 않고 새롭게 생성해서 반환 해준다.

 

 

splice() 함수를 먼저보면, 잘라낸 부분을 담아 낸다.

그러고 원본은 추가로 변형된 배열로 바뀐다.

 

 

이처럼 새로운 메서드를 이용하면, 변형된 배열을 반환해주고 원본 배열은 변하지 않는 것을 알 수 있따!

그러니 splice를 사용하면, 잘라낸 부분을 분리할 수 있고, toSpliced를 이용하면 원본배열을 이용할 수 있다는 것을 알 수 있당

 

 

 

 

 

 

✔ toReversed

앞서 본 두 메서드로 유추해보아, reverse와 차이를 보이는 메서드이다.

reverse()를 이용하면 원본 배열을 변화시킨다.

 

toReversed()를 이용하면 원본 배열은 그대로 유지되는 것을 볼 수 있다.

 

 

 

 

정리하면,

•  sort()의 경우 실행 결과로 반환되는 배열과 메서드를 실행한 배열이 모두 정렬이 되는 반면, toSorted()의 경우에는 반환되는 배열만 정렬된다는 점
• toSpliced()는 원본 배열을 수정하지 않고 제거된 부분으로 새로운 배열 반환
• reverse()는 In-Place 방식으로 동작하며 대상 배열의 나열 순서를 뒤집는 반면, toReversed()는 원본 배열과 다른 새로운 배열을 반환

 

 

 

---

 

 

2. with

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

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/with

Array.prototype.with() - JavaScript | MDN

어떤 배열을 수정해서 활용하고자 할 때 이용하는 메서드이며, 

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

 

 

with()를 사용하면 배열에서 한 요소만 다른 값으로 변경하고 싶을 때, 사용할 수 있음.

 

 

 

 

 

 

 

---

 

3. find~

✔ findLast, findLastIndex

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findLast

Array.prototype.findLast() - JavaScript | MDN

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findLastIndex

Array.prototype.findLastIndex() - JavaScript | MDN

 

기존의 find, findIndex와 대응되어 나온 문법인데,

last는 이름에서 유추해볼 수 있듯이 뒤에서부터 인덱스를 찾는다.

find, findIndex 메서드는 앞에서 부터 탐색해서 가장 먼저 나오는 걸 찾았기 때문에

배열의 마지막부터 찾으려면 배열을 뒤집어서 복사하거나 하는 과정이 필요했는데,

findLast, findLastIndex메서드를 이용하면 그러지 않아도 된다.

 

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