【JavaScript】【for文駆逐作戦】filterメソッドの使い方

この記事の内容

• javaScriptの「filter」の使い方について
• for文は駆逐していく方針

なぜ駆逐するのか

• 読みづらいし、ナウくないから。
• 単純にfilterって書かれてたら、「フィルタかけてんだな」って他の人が気付きやすい（可読性UP↑）

さっそく書き方

いつもの「for文」

var products = [
  {name: 'PS4', type: 'SONY', quantity: 1, price:30000},
  {name: 'Switch', type: 'NINTENDO', quantity: 1, price:32000},
  {name: 'DreamCast', type: 'SEGA', quantity: 1, price:40000},
  {name: 'ゲームボーイカラー', type: 'NINTENDO', quantity: 2, price:42000},
];

var resultProducts = [];

  for (var i = 0;  i < products.length;  i++ ) {
    if (products[i].type === 'NINTENDO') {
      resultProducts.push(products[i]);
    }
  }
console.log(resultProducts);
//[{name: 'Switch', type: 'NINTENDO', quantity: 1, price:32000},{name: 'ゲームボーイカラー', type: 'NINTENDO', quantity: 2, price:42000}]

• for文の中でif文で条件判定し、空の配列に格納している
• ↑ってみると本当はただフィルタリングしたいだけなのに、、大層なことやってるでって感じがする😇

最新の「filter文」

var products = [
  {name: 'PS4', type: 'SONY', quantity: 1, price:30000},
  {name: 'Switch', type: 'NINTENDO', quantity: 1, price:32000},
  {name: 'DreamCast', type: 'SEGA', quantity: 1, price:40000},
  {name: 'ゲームボーイカラー', type: 'NINTENDO', quantity: 2, price:42000},
];

// typeがNINTENDOでpriceが40000以上のものをフィルターしたい！

var result = products.filter(function(product){
  return product.type === 'NINTENDO' &&
    product.price > 40000;
});

console.log(result); 
//  {name: 'ゲームボーイカラー', type: 'NINTENDO', quantity: 2, price:42000}

補足　（filterの特徴）

• コールバック関数の戻り値は、「true」か「false」を返す
• 「true」だった場合、要素が配列に入る！（フィルタリングしてる）
• そもそも「return」を忘れてはいけない

まとめ

• もはやfor文で表現する方が面倒臭くなってきた
• 役割によって、メソッドを使い分けた方が断然いい気がしてきました。
• そしてプロパティの取り出しを自由自在にすることが、真のJavaScripterになるということと悟りました。