JavaScript filterメソッド

filterメソッドの使い方をメモ。

forループの場合

オブジェクト配列の各要素で、priceの値が200以上の要素に絞った、新しい配列を作る。

var collections = [
    {name: 'apple' , price: 100},
    {name: 'orange', price: 200},
    {name: 'grape' , price: 300}
];

var filtered = [];

for(var i = 0; i < collections.length; i++) {
   if(collections[i].price >= 200) {
       filtered.push(collections[i]);
   }
}

console.log(filtered);

結果は[ {name: 'apple' , price: 100}, {name: 'orange', price: 200} ]。
forループの中にif文があって、階層が１つ深くなっている。
処理で何をしているか、読みづらさがある。

filterの場合

filterメソッドで書き換える。

var collections = [
   {name: 'apple' , price: 100},
   {name: 'orange', price: 200},
   {name: 'grape' , price: 300}
];

var filtered = []; // forループと比較の為、敢えてここで定義している。

filtered = collections.filter(function(value){
   return value.price >= 200;
});

console.log(filtered);

結果は同じく[ {name: 'apple' , price: 100}, {name: 'orange', price: 200} ]。
filterは、各要素を使ってコールバック関数（function(value)）を実行し、条件に合致するか判定を行う。そして、条件に合致する要素のみで構成される新しい配列を返す。
※return文は必ず付ける。
forループの時に書いたif文がなくなり、記述がシンプル。
filterという名前から、フィルターをかけている（選別している）ことが感覚的に分かる。

少し応用

フィルターした後、そのまま次のループ処理を行う。

collections.filter(function(value) {

    return value.price >= 200;
    
}).forEach(function(value) {

    // priceが200以上の要素1つ1つに対しての処理を書く。
    console.log(value.price);

});

filterメソッドで返却された配列に対して、続けてforEachメソッドを使っている。メソッドを連続して実行することは実務でよく見かける。

まとめ
・filterは、forループよりも書き方がシンプル。
・filterは、forループよりも可読性が増す。
・コールバック関数内でのreturn文を忘れないこと。
・配列の各要素から、条件を満たしている要素に絞る。
・興味のあるデータに絞る時に使う。