JavaScript ES2023の新機能について

こんにちは！長畑です。

毎年新しい機能が追加されているJavaScriptですが、現段階で公表されているProposalsからES2023の機能を取り上げて紹介します。

以下に紹介する機能は既に一部のブラウザに実装されています。

Array find from last

配列が後ろから検索できるようになりました。

今までもlastIndexOfで配列内のある値が格納されているインデックスを最後から検索して取得できるメソッドはありましたが、findLast, findLastIndexで条件を満たす要素を最後から検索できるようになりました。

findLast

// 配列
const array = [18, 24, 36, 54, 115, 42];

// 後ろからの検索
var val1 = array.findLast((element) => element > 46);
console.log("val1 は 【" + val1 + "】");

// 前からの検索
var val2 = array.find((element) => element > 46);
console.log("val2 は 【" + val2 + "】");

> val1 は 【115】
> val2 は 【54】

findLastIndex

// 配列
const array = [18, 24, 36, 54, 115, 42];

// 後ろからの検索
var val1 = array.findLastIndex((element) => element > 46);
console.log("val1 は 【" + val1 + "】");

// 前からの検索
var val2 = array.findIndex((element) => element > 46);
console.log("val2 は 【" + val2 + "】");

> val1 は 【4】
> val2 は 【3】

Hashbang Grammar

JSファイルの先頭に以下の文言があるとコメントとしてみなされます。
これは既に実装されていたようです。プロポーザルが実装に追いついたというところでしょうか。
以下の例のようにJSファイルの先頭行のみですが「#!」の行はコメントとして扱われます。

#!/usr/bin/env node
// ↑ファイルの先頭行の場合のみコメントとして扱われる。

function test(){
    console.log('test');
}

<html>
    <head>
        <title>title</title>
        <script src="./js/test.js"></script>
        <script src="./lib/jquery-1.7.2.min.js"></script>
        <script>
            $(window).load(() =>{
                test();
            });
        </script>
    </head>
    <body>
    </body>
</html>

Symbols as WeakMap keys

Weakmap自体は以前から実装されている Key-Valueをもつことができるオブジェクトです。
(JavaでいうところのMapみたいなものです）
このWeakMapのKeyとしてはオブジェクトのみ指定することができるのですが、
Keyで指定できるものにSymbol値を加えようといったものです。

Symbol値はプリミティブ型です。
特徴としてSymbol関数を呼び出すと動的に無名の一意の値を生み出すことができます。

MapのKey値はユニークである必要があるため、
Symbol値をKeyにも採用できるようにするというのは使う側からすると
なるほどと言ったところでしょうか。

Deeplで翻訳しつつ読んでみたので雰囲気だけですが、Symbolが採用するに至るまでの議論が読み取れます。

Use of registered symbols would allow observation that a `WeakMap` entry has been freed · Issue #21 · tc39/proposal-symbols-as-weakmap-keys
I've just had a discussion with WH to get a clear picture of his objection to allowing symbols created with Symbol.for() as WeakMap keys. To summarize, This is ...
github.com

Change Array by Copy

イミュータブルな配列を生成することができるようです。
reverseやsortなど元となる配列を変更するようなアンイミュータブルなメソッドがありましたが、
予定されているのは元となる配列を変更せずに別配列を生成できるようです。
ただし現在ブラウザには実装されていないので試すことができません。

アンイミュータブルな配列操作

const array = [1, 2, 3];
// reverseは既にあるメソッドです。
console.log(array.reverse());
console.log(array);

// 元の配列の内容も変更されてしまう。
> Array [3, 2, 1]
> Array [3, 2, 1]

イミュータブルな配列操作

const array = [1, 2, 3];
console.log(array.toReversed());
console.log(array);

// 元の配列の内容は変更されない。
> Array [3, 2, 1]
> Array [1, 2, 3]

GitHub - tc39/proposal-change-array-by-copy: Provides additional methods on Array.prototype and TypedArray.prototype to enable changes on the array by returning a new copy of it with the change.
Provides additional methods on Array.prototype and TypedArray.prototype to enable changes on the array by returning a new copy of it with the change. - GitHub -...
github.com

実装が示唆されているのは
Array.prototype.toReversed() ・・・逆順にする。
Array.prototype.toSorted()・・・ソートする。
Array.prototype.toSpliced・・・要素を入れ替える。
Array.prototype.with・・・内容だけみるとspliceによく似た挙動です。