JavaScript　ループ処理を網羅的にまとめてみた。

JavaScriptのループ処理について備忘録としてまとめておきます。

### Javascriptのループ処理
- for文
- for...in文
- for...of文
- while文
- do...while文
- 高階関数によるループ

## for文
```javascript
for (初期化式; 条件式; 加(減)算式)
```

はじめに初期化式を書きます。その次にループを抜けるための条件を書き、最後に加（減）算をします。


```javascript
const names = ["太郎", "次郎", "三郎"];

for (let i = 0; i < names.length; i++) {
  console.log(names[i]);
}
/* => "太郎"
      "次郎"
      "三郎"
*/
```

ちなみに式を全て省略した書き方をすることもできます。この場合breakを書かないと無限ループになるので気をつけましょう。

```javascript
const names = ["太郎", "次郎", "三郎"];
let i = 0;

for (;;) {
  if (i >= names.length) break; // もしiがnamesの要素数以上だったら処理を抜ける。
  console.log(names[i]);
  i++;
}
/* => "太郎"
      "次郎"
      "三郎"
*/
```

## for...in文

for...inはそれぞれの要素に対して反復処理を行います。

```javascript
for (変数 in オブジェクト) {
  処理
}

```

配列

```javascript
const names = ["太郎", "次郎", "三郎"];

for (let i in names) {
     // iにはインデックス番号が入る
  console.log(names[i]);
}
/* => "太郎"
      "次郎"
      "三郎"
*/
```



オブジェクト

```javascript
const obj = {name: "太郎", age: 20, gender: "male"};

for (let i in obj) {
    // iにはキーが入る
  console.log(obj[i]);
}
/* => 太郎
      20
      male
*/
```


## for...of文

for...ofは値に対して反復処理されます。

```javascript
for (変数 of オブジェクト) {
  処理
}

```

配列

```javascript

const names = ["太郎", "次郎", "三郎"];

for (let i of names) {
    // iにはそれぞれの値が入る
  console.log(i);
}
/* => "太郎"
      "次郎"
      "三郎"
*/

```

オブジェクトの場合はObject.keys()で配列に変換にしてから処理をします。

```javascript

const obj = {name: "太郎", age: 20, gender: "male"};

const keys = Object.keys(obj);
// keysは["name", "age", "gender"]
for (let i of keys) {
    // iにはそれぞれのキーが入る
  console.log(obj[i]);
}
/* => 太郎
      20
      male
*/
```

## while文

while文は形こそ違いますがやっていることはfor文と一緒です。

```javascript
初期化式
while (条件式) {
  加(減)算式
}

```

条件式がtrueの場合反復処理を行うのでwhile文の中で条件をfalseにするための処理（今回はiをカウントアップ）しないと無限ループになるので気をつけましょう。

```javascript
const names = ["太郎", "次郎", "三郎"];
let i = 0;

while (i < names.length) {
  console.log(names[i]);
  i++;
}
/* => "太郎"
      "次郎"
      "三郎"
*/
```

## do...while文
do...while文は必ず最初の処理は実行され、その後は条件によって実行したい場合に使われます。

```javascript
do {
  処理
} while (条件式);

```

doの間は実行されるので0番目の要素の太郎が出力されます。その後は条件式がfalseなので実行されません。

```javascript
const names = ["太郎", "次郎", "三郎"];
let i = 0;

do {
  console.log(names[i]);
} while (i < 0);

// => 太郎

```

# 高階関数

高階関数とは、引数に関数を取るもの、もしくは関数を返り値として返すもののことを言います。

### 代表的な高階関数
- forEach
- map
- filter
- sort
- reduce


## forEach

forEachは引数にとった関数を各要素に対して繰り返します。返り値はundefinedを返します。

```javascript
const names = ["太郎", "次郎", "三郎"];

names.forEach(function(name) {
  console.log(name);
});
/* => "太郎"
      "次郎"
      "三郎"
*/
```

## map

map()はforEach()と出力結果は同じですが返り値に関数を実行した結果を返します。返り値の配列を別に使いたい時に使用します。

```javascript
const names = ["太郎", "次郎", "三郎"];

let newName = names.map(function(name) {
  console.log(name);
  return name + "さん";
});
/* => "太郎"
      "次郎"
      "三郎"
*/

console.log(newName); // => (3) ["太郎さん", "次郎さん", "三郎さん"]
                      // forEachの場合はundefined

```

## filter

filter()は関数に与えられた条件に合致したものを新しい配列として返します。

```javascript
const languages = ["JavaScript", "Ruby", "Go"];

let newName = languages.filter(function(lang) {
  return lang.length > 3;
});

console.log(newName); // => (2) ["JavaScript", "Ruby"]
```

## sort

sort()は要素を昇順・降順に並べたりする際に使用します。

```javascript
const nums = [4, 2, 5, 1, 3];

nums.sort(function (a, b) {
  return a - b;
});

console.log(nums); // => (5) [1, 2, 3, 4, 5]

```

## reduce

reduce()は配列の各要素に対して関数を実行し、最終的に単一の値を返します。

```javascript
const nums = [1, 2, 3, 4];

let newNums = nums.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
});

console.log(newNums); // => 10
```
これは少しイメージしにくいので順を追って説明します。

まず最初の呼び出しで第１引数であるaccumulatorには0が、第２引数であるcurrentValueには最初の要素の値である1が入っています。

```javascript
nums.reduce(function(0, 1) {
  return  0 + 1;
});

```
その返り値をaccumulatorが受け取ります。するとaccumulatorが1、currentValueは配列の次の値の2になります。

```javascript
nums.reduce(function(1, 2) {
  return  1 + 2;
});

```
次はaccumulatorが3、currentValueも3になります。このように続けていくと最終的にaccumulatorが6、currentValueが4になりますので最終的に10が返されnewNumsの出力が10になります。

```javascript
const nums = [1, 2, 3, 4];

let newNums = nums.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue; // 6 + 4
});

console.log(newNums); // => 10
```

### 最後に
JavaScriptのループ処理についてまとめてみました。
ループ処理は今どのような値が入っているのかを調べていくと理解が深まると思います。
MDN等を参照して手を動かしながら理解していきましょう。

## 参考
[MDN ループと反復処理](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Loops_and_iteration#while_statement)