ES2023で追加された便利機能について、サンプルコードを書いて検証してみた

  • プロダクション
ES2023で追加された便利機能について、サンプルコードを書いて検証してみた

目次

はじめに

ES2023とはECMAScriptのバージョンを指しており、ECMAScriptとはJavaScriptの標準規格のことです。
(ECMAScriptの更新機能についてはこちらのページから確認できます。)
ES2023にて追加された機能のうち、今回は実務でも使いそうな下記の2つの機能に絞って実際にサンプルコードを書いて検証していきたいと思います。
・Array find from last
・Change Array by Copy

実務で使いそうなES2023の追加機能

Array find from last

追加された関数
・findLast()
・findLastIndex()

配列やオブジェクトから対象のデータを取得したい時、従来ではfind()やfindeIndex()といった関数を用いていましたが、それらは条件に一致した先頭のデータを戻り値として返します。
一方、今回追加された関数であるfindLast()やfindLastIndex()は、戻り値として条件に一致する末尾のデータや添字を返すのが特徴です。
サンプルコードとして、オブジェクト配列を用いたデータに対して今回追加された関数を使ったコードを書いてみました。

Change Array by Copy

追加された関数
・with()
・toSorted()
・toReversed()

従来、参照渡しされた配列に対して値を直接変更したり、sort()やreverse()の関数を用いてソート操作を行うと、参照元の配列まで破壊されてしまうため、あらかじめ値渡しによるコピーが必要な場面が多くありました。
今回追加された関数では参照元の配列を変更することなく、値の変更やソートを行うことができます。
こちらについてもサンプルコードとして、値が破壊されるケースと破壊されないケースをそれぞれ書いてみました。

with関数を用いたサンプルコード

toSorted,toReversed関数を用いたサンプルコード

まとめ

今回紹介した新機能の中でも特に、toSortedとtoReversedの関数は実務でも使われるケースが多いと思いました。
JavaScriptも日々進化し続けているので、ECMAScriptのバージョンが更新され新しい機能が追加されたらまたコラムを書いてみようと思ってます。

この記事の執筆者

Y.M

DXプラットフォーム事業部

この記事に関するご相談やご質問など、お気軽にお問い合わせください。

お問い合わせ

関連する記事

すべての記事を見る

タグ一覧