JavaScriptのArrayメソッドの復習(map,filter)

Reactの勉強を進めている際に、頻繁に遭遇したタイトルのメソッドに関して
自分の理解を深めるためにもまとめてみたいと考えています。（これがzenn初投稿）

なんども出会って、その度にこいつの処理ってどんなんだっけ？と調べる作業からおさらばしたい！

これらのメソッドの利点

配列の全ての要素に対して何かしらの処理を施して新しい配列を返すメソッドで、
非破壊的なメソッドであるため、元の配列を破壊せずにイミュータブルデータを保つことができる。

関数型プログラミングにおいてはイミュータブルであるということがかなり重要そう、、、
元のオブジェクトなりを変更することなく、処理を行えるので余計なバグに遭遇しにくくなる！

map

const schools = [
  { name: 'Doshisha' },
  { name: 'Ritsumeikan' },
  { name: 'Kwanseigakuin' },
  { name: 'Kansai' },
  { name: 'Kyoto' },
];
const addUnivSchools = schools.map(({ name }) => `${name} Univ.`);

console.log(addUnivSchools[0]); // Doshisha Univ.
console.log(schools[0]); // Doshisha

元の配列はそのままに、配列の全ての要素に対して処理を施し（今回の場合は末尾に'Univ.'を付与）
新しい配列を作成することができます。

mapメソッドは以下の３つの引数をとります。

1. コールバック関数
2. インデックス番号
3. 配列自身

n番目の要素に対しては異なる処理を行いたい場合などに、2番目の引数を活用していくのが良さそう。

filter

const schools = [
  { name: 'Doshisha', rate: 65 },
  { name: 'Ritsumeikan', rate: 62 },
  { name: 'Kwanseigakuin', rate: 61 },
  { name: 'Kansai', rate: 58 },
  { name: 'Kyoto', rate: 999 },
];
const Over60Schools = schools.filter(({ rate }) => rate > 60);

console.log(Over60Schools); // Kansaiのオブジェクトが削除された配列
console.log(schools); // Kansaiもある配列のまま

mapと同じく、適用した配列の全ての要素に対して、条件式（true / falseを返す）をはめて
条件に合うもののみで新しい配列を作成することができます。

mapメソッド同じく以下の3つの引数をとります。

1. コールバック関数
2. インデックス番号
3. 配列自身

まとめ

map/filter共に使い方はほぼ同じではあるが、使い所が違うのでその辺りを間違えないように気をつけていきたいです。
配列を変更しているのか、それともフィルタリングをしているのかということをコードを見るだけで理解できるのは利点と言えそうなので積極的に使っていきたいです（適切なところで）
その辺りも踏まえつつ引き続きReactの学習を進めていきます。