2021年11月19日 JavaScript (JS Primer) 破壊的メソッドと非破壊的メソッド

配列から要素を削除(つづき)

lengthプロパティへの代入

配列のlengthプロパティへ要素数を代入すると、その要素数に配列が切り詰められます。 つまり、lengthプロパティへ0を代入すると、インデックスが0以降の要素がすべて削除されます。

配列の長さが0ということは、要素が存在しないことを意味します。つまり、空の配列であることが分かります。

const array = [1, 2, 3];
array.length = 0; // 配列を空にする
console.log(array); // => []

空の配列を代入

その配列の要素を削除するのではなく、新しい空の配列を変数へ代入する方法です。 次のコードでは、array変数に空の配列を代入することで、arrayに空の配列を参照させられます。

※この場合、letで配列を定義することが前提になります。

let array = [1, 2, 3];
console.log(array.length); // => 3
// 新しい配列で変数を上書き
array = [];
console.log(array.length); // => 0

ガベージコレクション

ガベージコレクション[注釈 1]（英: garbage collection; GC）とは、コンピュータプログラムが動的に確保したメモリ領域のうち、不要になった領域を自動的に解放する機能である。

let array = [1, 2, 3];
console.log(array.length); // => 3
// 新しい配列で変数を上書き
array = [];
console.log(array.length); // => 0

上のコードの場合、[1, 2, 3]という配列は変数arrayから参照されなくなるので、ガベージコレクションによりメモリから解放されます。

破壊的メソッドと非破壊的メソッド

以下に、破壊的メソッドと非破壊的メソッドの違いをまとめました。

	破壊的メソッド	非破壊的メソッド
レシーバ	変更される	変更されない
戻り値	変更した配列または変更箇所	新しく作成した配列

非破壊的メソッドを使用してもレシーバが変更されない理由は、レシーバのコピーを作成して処理をしているからです。レシーバのコピーに対して処理を実行しているので、レシーバ自体は変化しません。

破壊的メソッド

レシーバに指定した配列やオブジェクトそのものを変更します。 破壊的メソッド自体の返り値はそれぞれ違いますが、pushの場合、変更後の配列の要素数を返します。

const yanoHistory = ["RUNTEQ"];
const yanoNext = yanoHistory.push("TECH CAMP")

console.log(yanoNext); 
結果 2 　　(破壊的メソッド自体の返り値)

console.log(yanoHistory); 
結果 [ 'RUNTEQ', 'TECH CAMP' ](元々の配列)

非破壊的メソッド

レシーバである配列やオブジェクトのコピーを作成してから変更を行うため 元々のyanoHistoryに変更はありません。

const yanoHistory = ["RUNTEQ"];
const yanoNext = yanoHistory.concat("TECH CAMP")

console.log(yanoNext); 
結果 [ 'RUNTEQ', 'TECH CAMP' ] (非破壊的メソッド自体の返り値)

console.log(yanoHistory); 
結果 [ 'RUNTEQ' ](元々の配列)

Array#mapとArray#filterの違い

Array#mapとArray#filterはどちらもコールバック関数を引数に取ります。そのため、違いが分かりづらいです。以下に、Array#mapとArray#filterの違いをまとめました。

Array#map

コールバック関数の戻り値	Array#mapの返り値
新しく作る配列の要素	コールバック関数の返り値を要素とする配列

Array#filter

コールバック関数の戻り値	Array#filterの返り値
true or false	コールバック関数の返り値がtrueの時の要素を合わせた配列

参考

JavaScript Primer 配列

ガベージコレクション