配列操作をもっと簡単に！JavaScriptのfilter関数の魅力とは？｜DAD UNION

JavaScriptのfilter関数は、配列操作において非常に便利なメソッドの一つです。特に、特定の条件に基づいて配列から要素を抽出する際に使用されます。
この記事では、filter関数の基本的な使い方から、実際の使用例までを分かりやすく解説します。

Contents

filter関数とは
どんな時に使う
メリット、デメリット
- メリット
- デメリット
filter関数を使った実例
まとめ

filter関数とは

filter関数は、配列の各要素に対して指定した条件をチェックし、条件に合致する要素のみを抽出して新しい配列を作成するメソッドです。この関数は、元の配列を変更せず、新しい配列を返します。

基本的な構文は以下の通りです。

const newArray = originalArray.filter(callback(element[, index[, array]]));

　
callbackは、各要素に対して実行される関数であり、以下の引数を取ります。

element: 現在の配列要素
index (オプション): 現在の要素のインデックス
array (オプション): 元の配列

どんな時に使う

filter関数は、以下のような場合に特に有用です。

配列から特定の条件に合致する要素だけを抽出したい場合
データのクリーニングやフィルタリングを行いたい場合
配列の一部を新しい配列として取得したい場合

例えば、ユーザーリストから特定の条件を満たすユーザーのみを抽出する、商品のリストから在庫があるものだけを抽出する、といった場合に使用できます。

メリット、デメリット

メリット

簡潔なコード：条件に合致する要素を抽出するためのループや条件文を一行で書ける。
元の配列を変更しない：filter関数は新しい配列を返すため、元の配列をそのまま保持できる。
可読性：コードの意図が明確で、後から見ても理解しやすい。

デメリット

パフォーマンス：大規模な配列に対して複雑な条件を適用すると、パフォーマンスに影響を与えることがある。
デバッグ：条件が複雑になると、意図しない結果を返す可能性があり、デバッグが難しくなることがある。

filter関数を使った実例

ここでは、filter関数を使った具体的な例を紹介します。

例1：数値の配列から偶数のみを抽出

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNumbers = numbers.filter(number => number % 2 === 0);

console.log(evenNumbers); // [2, 4, 6, 8, 10]

　
この例では、数値の配列から偶数のみを抽出しています。
number % 2 === 0の条件がtrueとなる要素だけが新しい配列に含まれます。

例2：文字列の配列から特定の文字を含む要素を抽出

const fruits = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
const fruitsWithA = fruits.filter(fruit => fruit.includes('a'));

console.log(fruitsWithA); // ['apple', 'banana', 'date']

　
この例では、文字列の配列から文字’a’を含む要素のみを抽出しています。
fruit.includes(‘a’)がtrueとなる要素だけが新しい配列に含まれます。

例3：オブジェクトの配列から特定のプロパティの値が条件を満たす要素を抽出

const users = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 20 },
    { name: 'Charlie', age: 30 },
    { name: 'David', age: 35 }
];
const adults = users.filter(user => user.age >= 30);

console.log(adults); // [{ name: 'Charlie', age: 30 }, { name: 'David', age: 35 }]

　
この例では、オブジェクトの配列からageプロパティが30以上のユーザーのみを抽出しています。
user.age >= 30の条件がtrueとなる要素だけが新しい配列に含まれます。