ES2023 새로운 Array 메서드 알아보기

📍ES2023

- 2023년 6월 말에 최종 확정될 것으로 보이는 ECMAScript의 새로운 spec이 발표됨

- 브라우저 벤더들이 추가가 확실시되는 spec을 미리 추가하기 때문에 미리 사용해볼 수 있다

(크롬에서는 미리 적용되어 사용할 수 있음)

 

📍Array.prototpye.findLast() & findLastIndex()

✅배열의 원소 중에서 조건을 만족하는 가장 마지막 원소 혹은 그 인덱스를 반한다

- 이미 존재하던 Array.prototype.find() 와 findIndex() 가 조건을 만족하는 맨 앞 원소를 찾던 것과 완벽히 반대되는 기능

const isEven = (number) => number % 2 === 0;
const numbers = [1, 2, 3, 4];

console.log(numbers.find(el => el));
// 1
console.log(numbers.find(isEven));
// 2
console.log(numbers.findIndex(isEven));
// 1

console.log(numbers.findLast(el => el));
// 4
console.log(numbers.findLast(isEven));
// 4
console.log(numbers.findLastIndex(isEven));
// 3

 

can i use 현황

 

📍Change Array by Copy

✅원본 배열을 변경하지 않고, map이나 filter 처럼 복사된 배열을 반환한다

- [...arr] 이렇게 원본 배열을 복사하지 않아도 됨!

 

- Array.prototype.toReversed() : copy에 reverse()를 실행하고 반환

- Array.prototype.toSorted(compareFn) : copy에 sort()를 실행하고 반환

- Array.prototype.toSpliced(start, deleteCount, ...items) : copy에 splice()를 실행하고 반환

- Array.prototype.with(index, value) : copy의 index 원소를 교체하고 반환

 

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];

/* toReversed */
const reversed = numbers.toReversed();
console.log("reversed", reversed); // "reversed", [9, 8, 7, 6, 5, 4, 3, 2, 1]
console.log("original", numbers); // "original", [1, 2, 3, 4, 5, 6, 7, 8, 9]

/* toSorted  */
const sortedArr = numbers.toSorted();
console.log("sorted", sortedArr); // "sorted", [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log("original", numbers); // "original", [1, 2, 3, 4, 5, 6, 7, 8, 9]

/* with */
const replaceWith = numbers.with(1, 100);
console.log("with", replaceWith); // "with", [1, 100, 3, 4, 5, 6, 7, 8, 9]
console.log("original", numbers); // "original", [1, 2, 3, 4, 5, 6, 7, 8, 9]

/* toSpliced */
const splicedArr = numbers.toSpliced(0, 4);
console.log("toSpliced", splicedArr); // "toSpliced", [5, 6, 7, 8, 9]
console.log("original", numbers); // "original", [1, 2, 3, 4, 5, 6, 7, 8, 9]

 

can i use Array.prototpye.with 및 다른 메서드 현황

- 파이어폭스에서 아직 지원 X

 

📍참고

https://pawelgrzybek.com/whats-new-in-ecmascript-2023/

What's new in ECMAScript 2023 | pawelgrzybek.com

 

https://dev.to/jasmin/what-is-new-in-es2023-4bcm

What's new in ES2023? 👀