【JavaScript】よく使う配列操作の備忘録（map, some, every, filter, find, reduce）

JavaScript

2024.01.20

この記事は約4分で読めます。

記事内に広告が含まれています。

JavaScript では配列の操作をする機会はとても多いです。

for文で書けばとりあえず動くものはできますが、配列操作のメソッドを覚えておくと、よりシンプルで可読性の高いコードになります。

この記事では、map, some, every, filter, find, reduceといった主要な配列操作メソッドに焦点を当てて解説します。

for 文はできるだけ避けるべし

JavaScriptの配列操作メソッドで書けるなら、できれば for 文を避ける方が良いでしょう。

例えば、 map や filter などのメソッドは、その名前から操作の意図が明確になりますよね。

これにより、コードの可読性が向上します。

また、多くの配列メソッドは、元の配列を変更せず新しい配列を返します。意図せず、直接元々の配列を操作して、意図せずデータが変わっている、なんてことを避けられますね。

これにより、バグの減少とデータの予測可能性が向上します（するはずです）。

map メソッドは、配列の各要素に対して関数を適用し、結果からなる新しい配列を生成します。

const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(num => num * num);
console.log(squared); // [1, 4, 9, 16, 25]

データの変換でよく用います。

some メソッドは、配列の中の少なくとも一つの要素が指定された条件を満たすかどうかをチェックします。

const numbers = [1, 2, 3, 4, 5];
const hasEvenNumber = numbers.some(num => num % 2 === 0);
console.log(hasEvenNumber); // true

for 文の中で、条件に合致したら xxx の操作をする、といった際に some を使えばシンプルに書ける場合が多いです。

every メソッドは、配列の全ての要素が特定の条件を満たすかどうかをチェックします。

const numbers = [1, 2, 3, 4, 5];
const allPositive = numbers.every(num => num > 0);
console.log(allPositive); // true

全ての値が null や undefined ではないことをチェックするといった使い方もできますね。

filter メソッドは、条件に合う要素のみを含む新しい配列を生成します。

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]

null 以外の値を持つ配列にする、といった使い方もできますね。

find メソッドは、条件に合う最初の要素を返します。

const numbers = [1, 2, 3, 4, 5];
const firstEven = numbers.find(num => num % 2 === 0);
console.log(firstEven); // 2

条件に一致する要素が配列内に存在しない場合、find メソッドは undefined を返却します。

reduceメソッドは、配列の各要素に対して関数を適用し、単一の値（例：合計や平均）を生成します。

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 15

返却されるのは配列ではなくなることを覚えておきましょう。

reduce は和訳すると減らすという意味なので、多くの値があった配列が減って1つになった、と覚えておきましょう。

JavaScriptの主要な配列操作メソッドについて詳しく見てきました。

これらのメソッドを積極的に使用して、よりクリーンで効率的なコードを書くことに挑戦してみてください。