JavaScript [for文の中にif文]の処理と[コールバック関数のfilterメソッド]の処理の違いについて

JavaScriptの勉強を最近はじめた入門者です。

for文の中で使うif文とコールバック関数で使うfilterって同じ処理ができると思うんですが、この二つの違いがわかりません。
書き方が違うとか、そういう意味ではなく「何で同じ処理ができるのに別の方法があるんだ？」って意味です。
今回思い浮かんだ例題コードが簡単な物しかないんですが、
実際の開発現場ではどういう使い分けや使い方をされるんですか？？

初心者なんで下記見たいなコードのイメージしかないんで申し訳ないです…

JavaScript
1const members = [
2  {name:"Taro",age:24},
3  {name:"Goro",age:25},
4  {name:"Takeshi",age:24}
5];
6
7for(let i=0; i < members.length; i++){
8  if(members[i].age === 24){
9    console.log(members[i]);
10  }
11}
12
13//コンソールに表示される結果
14//{name:"Taro",age:24}
15//{name:"Takeshi",age:24}

JavasCript
1const members = [
2  {name:"Taro",age:24},
3  {name:"Goro",age:25},
4  {name:"Takeshi",age:24}
5];
6const filterMembers = members.filter((member)=>{
7
8   return member.age === 24;
9
10});
11
12console.log(filterMembers);
13
14//コンソールに表示される結果
15//{name:"Taro",age:24}
16//{name:"Takeshi",age:24}
17

kei344

2020/03/17 14:45

どちらのコードもエラーが出るので、まずエラーが出ない例を提示してください。

kwiyy

2020/03/17 15:50

失礼しました。修正できました！どちらもビルドできたので回答よろしくお願いします。

kwiyy

2020/03/17 15:51

あ、すみません。やっぱりもう一度修正します。

kwiyy

2020/03/17 15:54

直しました！

行動規範の内容に同意します

回答3件

何で同じ処理ができるのに別の方法があるんだ？

filterやmapといった機能は関数型プログラミングの高階関数の考え方です。
JavaScriptだけではなくPHPやRuby、Pythonにもあります。

関数型流行ってるからね、しょうがないね。

実際の開発現場ではどういう使い分けや使い方をされるんですか？

可読性という観点で「お前ら基本的にはfor文を使うな！」という現場は存在します
(JavaScriptでこれを採用している現場なんて、ウィザードを大量に抱えたイケイケの会社以外ないと思いますが)

どういうことかと言うとforという意味には繰り返しという意味しかありません。
だからコードリーディングに於いてfor文を見たらエンジニアは身構える事になり、
脳のリソースを多く消費することになります。

逆に高階関数にはこういう意味合いが付属します。

filter: 戻り値は配列、各要素の値や型は保持される
map: 戻り値は配列、要素数は保持される、各要素の値が加工される
forEach(each): 処理だけ行う、戻り値は使わず捨てる、実質結果を捨てるfor文
reduce(fold): 配列から統合した一つの値を取り出す、実質結果付きのfor文

各項目は英語の数学用語からきています。
filterはまんまフィルターですし、mapは地図ではなく写像。

最初に「やりたいこと」を宣言してから操作に移行するので、
慣れているエンジニアにとっては非常に読みやすいコードとなります。
デバッグのフェイズに於いて「なーんだ、ここはfilterなのか、なら今回の不具合とは関係なさそうだし読み飛ばしても大丈夫だな」という判断もできます。

例えば質問文のコードはfilterで出来る1個の事だけでしたが、
「ユーザー一覧から年齢24歳の名前の配列を取り出したい」という風に
もっと複雑な要望にしていくと高階関数の良さが現れてきます。

コードにするとこんな感じ。

js
1const members = [
2  {name: "Taro", age: 24},
3  {name: "Goro", age: 25},
4  {name: "Takeshi", age: 24}
5];
6
7// for文を使う場合はfor文にやりたい事を全て詰め込む
8const results1 = [];
9for (const member of members) {
10  if (member.age === 24) {
11    results1.push(member.name);
12  }
13}
14console.log(results1); // ["Taro", "Takeshi"]
15
16// filterやmapを使うと1行完結になる
17const results2 = members
18  .filter(member => member.age === 24)
19  .map(member => member.name);
20console.log(results2); // ["Taro", "Takeshi"]