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

2023. 5. 31.·🎨 프론트엔드 공부/JS & TS

📍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

After reading notes from the last TC39 meeting, it looks like the list of new features coming to JavaScript is already known. The final version of the ECMAScript specification is expected to be published at the end of June.

pawelgrzybek.com

 

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

 

What's new in ES2023? 👀

Last year I wrote an article about the new features of ES2022 this year let's check out the new...

dev.to

 

'🎨 프론트엔드 공부/JS & TS' 카테고리의 다른 글
  • [TypeScript] Barrel의 장점과 단점
  • [TypeScript] 객체의 배열에서 특정 키의 모든 밸류를 union type으로 추출하기
  • #51 의존성 분리를 위해 미러 타입 사용하기
  • #50 오버로딩 타입보다는 조건부 타입을 사용하기
지식물원
지식물원
지식이 자라는 식물원!
  • 지식물원
    지식물원
    지식물원
  • 전체
    오늘
    어제
    • 분류 전체보기 (516) N
      • 🎨 프론트엔드 공부 (253) N
        • JS & TS (92) N
        • HTML & CSS (22)
        • React & Next (49)
        • Vue & Nuxt (22)
        • 기타 (68)
      • 🤓 기술 학습 & 공부 기록 (116)
        • Node.js (0)
        • Python (37)
        • 백엔드 (0)
        • 딥러닝 (1)
        • 컴퓨터 일반 (72)
        • 개발 인프라 (6)
      • 👨‍💻 프로젝트 경험 (6)
        • Work (0)
        • Toy (6)
      • ⚙️ 개발 팁 & 노하우 (21)
        • 프론트엔드 (6)
        • 기타 (15)
      • ☕️ 커리어 & 인터뷰 준비 (88)
        • 코딩 테스트 (88)
      • 📰 기술 트렌드 & 생각 정리 (4)
      • 📚 기타 (25)
        • 마케팅 (15)
        • 비개발서적 (10)
  • 블로그 메뉴

    • 태그
  • 링크

  • 공지사항

    • 모바일 접속 시 코드 하이라이팅 깨질 때
  • 인기 글

  • hELLO· Designed By정상우.v4.10.3
지식물원
ES2023 새로운 Array 메서드 알아보기
상단으로

티스토리툴바