ES2023: Change Array by copy

[azu]

Change Array by copy

• 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.

これは対応しないといけない。
詳細はIssueを切って考える

• Array.prototype.toReversed() -> Array
• Array.prototype.toSorted(compareFn) -> Array
• Array.prototype.toSpliced(start, deleteCount, ...items) -> Array
• Array.prototype.with(index, value) -> Array

配列 · JavaScript Primer #jsprimer

方向としては

• 非破壊、破壊を手前にして、それぞれを並べて書く
• 破壊をおいてから、非破壊という概念としてまとめて書く

Originally posted by @azu in #1658 (comment)

Blocker

• 1729563 - Implement the Change Array by copy proposal

[azu]

ES2023 introduces new array copying methods to JavaScript | Sonar

[azu]

Array.prototype.toSorted() - JavaScript | MDN

Firefoxがまだ実装していない

[azu]

Firefox 115 for developers - Mozilla | MDN
Firefox 115でサポート

[azu]

notes: ベーシックなアイデアとして、TupleのアイデアをArrayに持ってくるところからスタートしてる。
withは他のやつとはちょっと別でTemporal proposalから持ってきてる

• Why the naming tc39/proposal-change-array-by-copy#103

• https://github.com/tc39/notes/blob/b28953a0c271896d9726e346c36f4f5535bfb091/meetings/2021-04/apr-20.md#change-array-by-copy
• https://github.com/tc39/notes/blob/b28953a0c271896d9726e346c36f4f5535bfb091/meetings/2022-03/mar-30.md#change-array-by-copy
  https://www.dropbox.com/s/5rabrx387snkbfn/change_array_by_copy_at_tc39_march_2022.pdf?dl=0

TypedArrayからtoSplicedが消えたのはTypedArrayにはspliceするようなものがないから

• https://github.com/tc39/notes/blob/b28953a0c271896d9726e346c36f4f5535bfb091/meetings/2022-07/jul-19.md#change-array-by-copy-update-issue-95

[azu]

配列、Record/Tuple、Iterator Helperがこの数年でまとまって変わるので、
大まかな方針を考えた。

• Change Array by copyで配列に追加されるのはRecord/Tutpleからの輸入であるImmutable Methods ES2023: Change Array by copy #1667
• Record/Tupleは新しいプリミティブなオブジェクトと配列的なもの esnext: Record and Tuple #1678
• Iterator HelpersはLazyなArray的なIterateメソッド ES2025: Iterator Helpers #1601

これはそれぞれ次の章に対応する

• Change Array by copy ES2023: Change Array by copy #1667 -> 配列の"破壊的なメソッドと非破壊的なメソッド"
• Record/Tuple esnext: Record and Tuple #1678 -> 新しい章を追加する
  • プリミティブなのでオブジェクトと配列と同じレベルであるが、実際にそれを並べてしまうと読みにくくなりそう
  • 配列で"破壊的なメソッドと非破壊的なメソッド"の流れから Tuple の章へといくのが自然である
  • ここでは出てから検討
• Iterator Helpers ES2025: Iterator Helpers #1601 -> ループと反復処理の応用的なもの

[azu]

https://excalidraw.com/#json=JJEaXI-pY8K5dc4pv6dvL,pNomwE3IAqmuK1yJW8ROuw

https://excalidraw.com/#json=UNoeeKEeTAJ2abTh7Ftfj,_CI_XZrD28MCLqM0Ikvhcw

[azu]

破壊的な方法	非破壊な方法
array[index] = item	Array.prototype.with[ES2023]
Array.prototype.pop	array.slice(0, -1)とarray.at(-1)[ES2022]
Array.prototype.push	[...array, item][ES2015]
Array.prototype.splice	Array.prototype.toSpliced[ES2023]
Array.prototype.reverse	Array.prototype.toReversed[ES2023]
Array.prototype.sort	Array.prototype.toSorted[ES2023]
Array.prototype.shift	array.slice(1)とarray.at(0)[ES2022]
Array.prototype.unshift	[item, ...array][ES2015]
Array.prototype.copyWithin[ES2015]	なし
Array.prototype.fill[ES2015]	なし