配列のループ処理などをもっと簡単に書けるようになったのでご紹介！

<aside> 💫 hoge.map((name, index) ⇒ { return (); })

第一引数は「実際に入る引数」 第二引数は「要素の順番（index）」 が入るよ！！

</aside>

map：配列をループして、それぞれの値を表示したり処理したりする（配列に何らかの処理をして、その結果を別の配列として取得したいとき）

// map
const nameArr = ["田中", "山田", "じゃけぇ"];

// 従来の配列をループしてそれぞれの名前を表示させる方法
 for (let index = 0; index < nameArr.length; index++) {
   console.log(nameArr[index]);
 }
→ 田中
  山田
  じゃけぇ

// mapを使った方法:従来の方法のように、配列の値を表示させる
nameArr.map((name) => console.log(name));
→ 田中
  山田
  じゃけぇ

// mapを使った方法：returnを使って新しい配列を生成する
const nameArr2 = nameArr.map((name) => {
  return name;
})
console.log(nameArr2);
→ (3)["田中", "山田", "じゃけぇ"]

▼引数の中でindexも扱いたい場合

例）「1番目は田中です」「2番目は山田です」「3番目はじゃけぇです」と表示したい場合

複数の引数を持つことができる！

nameArr.map((name, index) => console.log(`${index + 1}番目は${name}です`)); // +1がないと、0から始まってしまう
→ 1番目は田中です
	2番目は山田です
	3番目はじゃけぇです

▼実践的な記述：じゃけぇ以外には名前の後ろに「さん」をつける

// じゃけぇ以外には名前の後ろに「さん」をつける
const nameArr = ["田中", "山田", "じゃけぇ"];

const newNameArr = nameArr.map((name) => {
  if (name === "じゃけぇ") {
    return name;
  } else {
    return `${name}さん`;
  }
});

console.log(newNameArr);
→(3)["田中さん", "山田さん", "じゃけぇ"]

filter：ある条件に一致したものだけ返却して、新しい配列を生成する

// filter
// numArrから奇数の値だけ取り出したい
const numArr = [1, 2, 3, 4, 5];
const newNumArr = numArr.filter((num) => {
  return num % 2 === 1;
});
console.log(newNumArr);
→(3)[1, 3, 5]