React,Vue.jsの前にJavaScriptを習得すべし！(mapやfilterの配列処理)　

# 資料

https://www.udemy.com/course/modern_javascipt_react_beginner/

# はじめに
実際に動かしたコードです。自分で色々出力を変えて動かしてみてください。
体で覚えるといいと先輩に言われました。

# この記事の対象
JSを触ったばかりの初心者でこれからReactやVue.jsを触りたい人。


# map
mapを使っていきます。***配列の順番通りに一度ずつ呼び出し新しい配列を作るもの***です。

```js
const array_name = ["ルフィ", "悟空", "炭治郎"];

const array_name2 = array_name.map((name) => {
  return name;
});

console.log(array_name2);

//["ルフィ", "悟空", "炭治郎"]
```

もっと簡単に書けます。

```js
const array_name = ["ルフィ", "悟空", "炭治郎"];
array_name.map((name) => console.log(name));

//ルフィ 
//悟空 
//炭治郎
```

```js
const array_score = [70, 80, 50, 90];
const new_array_score = array_score.filter((sum) => {
  return sum % 2 === 0;
});
console.log(new_array_score);

// [70, 80, 50, 90]
```

```js
const array_name = ["ルフィ", "悟空", "炭治郎"];

const array_name_new = array_name.map((name) => {
  if (name === "ルフィ") {
    return name;
  } else {
    return `${name}さん`;
  }
});

console.log(array_name_new);

//(3) ["ルフィ", "悟空さん", "炭治郎さん"]
```

```main.js
const array = [10, 20, 30, 40];
const newArray = [];

for (let i = 0; i < array.length; i++) {
  newArray.push(array[i] * 5);
}

console.log(newArray);
//[50, 100, 150, 200]

//mapを使う
const newArray2 = array.map((val) => val * 2);
console.log(newArray2);
//[50, 100, 150, 200]
```


```main.js
const array = [10, 20, 30, 40];
const newArray = [];

for (let i = 0; i < array.length; i++) {
  newArray.push(array[i] * 5);
}

console.log(newArray);

//const newArray2 = array.map((val) => val * 2);
const newArray2 = array.map((val, i) => {
  console.log(val, i);
  console.log(array);
  return val * 3;
});
console.log(newArray2);
```

![スクリーンショット 2023-03-31 3.16.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/e4d70a43-9369-8b5d-6072-9f6e0fb43107.png)

![スクリーンショット 2023-03-31 3.16.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/93c97d61-a432-0bf7-58b1-db279df13ed4.png)




# filterを使う
```filter```は***条件に合う（trueを返す）要素全て抽出して、新しい配列を作ります***。
```js
const array_score = [7, 8, 5, 10];
const new_array_score = array_score.filter((sum) => {
  return sum % 2 === 1;
});
console.log(new_array_score);
//[7, 5]
```

### 引数も使ってみる

```js
const array_name = ["ルフィ", "悟空", "炭治郎"];
array_name.map((name, index) => console.log(`${index + 1}番目は${name}だぞ`));

//1番目はルフィだぞ 
//2番目は悟空だぞ 
//3番目は炭治郎だぞ
```

```js
const array_name = ["ルフィ", "悟空", "炭治郎"];
array_name.map((name) => console.log(`${name}だぞ`));

//ルフィだぞ 
//悟空だぞ 
//炭治郎だぞ 
```

```main.js
const array = [10, 20, 30, 40];
const newArray = [];

for (let i = 0; i < array.length; i++) {
  const val = array[i] * 2;
  if (val > 50) {
    newArray.push(array[i] * 5);
  }
}

console.log(newArray);

//const newArray2 = array.map((val) => val * 2);
const newArray2 = array.map((val, i) => {
  return val * 3;
});
console.log(newArray2);
```
![スクリーンショット 2023-03-31 3.20.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/ed4a1ce5-8fd3-ca5e-9402-0936d628b563.png)
mapを使ってからfilterを使います。
```main.js
const array = [10, 20, 30, 40];
const newArray = [];

for (let i = 0; i < array.length; i++) {
  const val = array[i] * 2;
  if (val > 50) {
    newArray.push(array[i] * 5);
  }
}

console.log(newArray);

//const newArray2 = array.map((val) => val * 2);
const newArray2 = array.map((val, i) => {
  return val * 3;
});
const newArray3 = newArray2.filter((val) => val > 50);
console.log(newArray2);
```
![スクリーンショット 2023-03-31 3.24.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/9b1cdea8-47dd-42e2-9f84-fc8652ab4816.png)



# 資料

https://zenn.dev/yuji6523/articles/24ae6dbcc791b5

https://www.udemy.com/course/react-complete-guide/