【JavaScript】 便利メソッド 【ゆるっとまとめ】

# :link: はじめに
産休・育休に入って1年間、全くコードを書かなかったら忘れてしまっていた... 
頑張れ、脳。記憶力・・！ 

## 注意事項
あまり使わない引数や、直感的に理解できるメソッドの説明は省略しています。
下記にピックアップされているメソッドは個人的によく使うものたちで、 
:warning: **全てではありません** :warning: のでご注意ください。

## 対象者
- 育休してて忘れている人（私です）
- JavaScript 初〜中級者

# :link: Array 編

## join
配列の全ての要素を連結して、新しい文字列を作成する

```JavaScript
const date = ['2020', '02', '23'];
const result = date.join('.');

console.log(result); // "2020.02.23"
```

## forEach
配列のループ処理
配列の各要素に対して一度ずつ実行する

```JavaScript
const animals = ['dog', 'cat', 'fox'];
/**
 * # forEach
 * value: 現在処理されている配列の要素
 * index: 現在処理されている配列の要素のインデックス
 * array: 元々の配列（あまり使わないので下記では省略）
 */
animals.forEach((value, index) => {
  console.log(index, value);
});

// 0 "dog"
// 1 "cat"
// 2 "fox"
```
ちなみに `Object.keys` と組み合わせることで、 Object の各要素に対して処理を実行できる

```JavaScript
const animals = {
  dog: 'wan-wan',
  cat: 'nya-n',
  fox: 'kon-kon'
};

Object.keys(animals).forEach((key, index) => {
  console.log(index, key, animals[key]);
});

// 0 "dog" "wan-wan"
// 1 "cat" "nya-n"
// 2 "fox" "kon-kon"
```

`Object.keys` でも 上記のような forEach 処理は実現できるが、
Object の各要素に対して処理を実行する手法として `Object.entries` を活用する方法もある。
`Object.entries` についての詳細は <a href="https://qiita.com/mi_upto/items/92105bbf2f300645acc5#entries">Object.entries を参照</a>

## every
配列の **全て** の要素が、与えられた条件を満たしているかどうかチェックする

```JavaScript
// 例１
const numbers = [1, 2, 3, 4, 5, 6];
const result = numbers.every((num) => num < 5);
console.log(result); // false
```
```JavaScript
// 例2
const numbers = [1, 2, 3, 4, 5, 6];
const result = numbers.every((num) => num < 10);
console.log(result); // true
```

## some
配列の **少なくとも1つ** の要素が、与えられた条件を満たしているかどうかチェックする
なお、条件を満たした段階でループは終了する


```JavaScript
const numbers = [1, 2, 3, 4, 5, 6];
const result = numbers.some((num) => num > 3);
console.log(result); // true

// numbers[3]以降は評価されずに終了
```

## filter
与えられた条件を配列要素それぞれに対して実行し、
条件を満たしている新しい配列を作成する
every や some が真偽値なのに対し、こちらは配列を返す （チョット似テル）

```JavaScript
const numbers = [1, 2, 3, 4, 5, 6];
const result = numbers.filter((num) => num < 3);
console.log(result); // [1, 2]
```

## find
与えられた条件を満たしているか、配列要素の頭から実行（検索）し、
条件を満たした **最初の配列の要素** を返す
なお、条件を満たした段階でループは終了する

```JavaScript
const numbers = [1, 2, 3, 4, 5, 6];
const result = numbers.find((num) => num > 3);
console.log(result); // 4

// numbers[4]以降は評価されずに終了
```

## map
配列のすべての要素に対して、与えられた関数をそれぞれ実行し、
関数で返された値で新しく配列を作る

```JavaScript
const numbers = [1, 2, 3, 4, 5, 6];
const result = numbers.map((num) => {
  return num * 2;
});
console.log(result); // [2, 4, 6, 8, 10, 12]
```

## reduce
配列の各要素を累積して、1つの累積値にする目的でよく使用する

- 数値なら「配列要素の合算値を求める」
- 文字列なら「全ての文字要素を1つの文字列にする」
- 配列から Object を作る
など

### 例1: 配列要素の合算値を求める
```JavaScript
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];

/**
 * # reduce
 * accumulator: returnされた演算結果 （初期値はarray[0]）
 * currentValue: 現在処理されている配列の要素 （初期値はarray[1]）
 * currentIndex: 現在処理されている配列の要素のインデックス （あまり使わないので下記では省略）
 * array: 元々の配列 （あまり使わないので下記では省略）
 */
const result = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

console.log(result); // 45
```

|currentIndex| accumulator | currentValue  | 戻り値 |
| -----: | ----------------------------------------------: | -------------------------------------------: | -----------: | ----------------------------------------: |
| 1|      1<br><font color="#ccc;">numbers[0]</font>| 2<br><font color="#ccc;">numbers[1]</font> |   3<br><font color="#ccc;">1 + 2</font> |
| 2|  3<br><font color="#ccc;">1 回目の戻り値</font>| 3<br><font color="#ccc;">numbers[2]</font> |   6<br><font color="#ccc;">3 + 3</font> |
| 3|  6<br><font color="#ccc;">2 回目の戻り値</font> | 4<br><font color="#ccc;">numbers[3]</font> |   10<br><font color="#ccc;">6 + 4</font> |
| 4| 10<br><font color="#ccc;">3 回目の戻り値</font> | 5<br><font color="#ccc;">numbers[4]</font> | 15<br><font color="#ccc;">10 + 5</font> |
| 5| 15<br><font color="#ccc;">4 回目の戻り値</font> | 6<br><font color="#ccc;">numbers[5]</font> |21<br><font color="#ccc;">15 + 6</font> |
| 6| 21<br><font color="#ccc;">5 回目の戻り値</font> | 7<br><font color="#ccc;">numbers[6]</font> |28<br><font color="#ccc;">21 + 7</font> |
| 7| 28<br><font color="#ccc;">6 回目の戻り値</font> | 8<br><font color="#ccc;">numbers[7]</font> |36<br><font color="#ccc;">28 + 8</font> |
| 8| 36<br><font color="#ccc;">7 回目の戻り値</font> | 9<br><font color="#ccc;">numbers[8]</font> |45<br><font color="#ccc;">36 + 9</font> |

### 例2: 配列から Object を作る
```JavaScript
const animals = [
  { id: 'ZOO01', name: 'cat' },
  { id: 'ZOO02', name: 'dog' },
  { id: 'ZOO03', name: 'fox' }
];

const result = animals.reduce((accumulator, currentValue) => {
  accumulator[currentValue.id] = currentValue.name;
  return accumulator;
}, {});

console.log(result);
// {
//   ZOO01: "cat"
//   ZOO02: "dog"
//   ZOO03: "fox"
// }
```


### 第2引数について
`reduce` の第2引数はオプションだが、空の配列を実行するとエラーになる

```JavaScript
[].reduce((a, b) => {
  return a + b;
});

// Uncaught TypeError: Reduce of empty array with no initial value
```
予期せぬ実行結果になる可能性があるため、基本的に `reduce` には初期値を設定すると安全！

```JavaScript
[].reduce((a, b) => {
  return a + b;
}, 0);
```

## flat
ネストされた配列構造を平らにする

```JavaScript
const numbers = [1, 2, [3, 4]];
numbers.flat(); 
// [1, 2, 3, 4]
```

flat メソッドは配列内に空要素があった場合、削除するため要注意

```JavaScript
const numbers = [1, 2, ,4];
numbers.flat(); 
// [1, 2, 4]
```

## includes
特定の要素が含まれているかどうかチェックする

```JavaScript
const animals = ['cat', 'dog', 'fox', 'red-panda'];

const hasCats = animals.includes('cat');
console.log(hasCats); // true

const hasPanda = animals.includes('panda');
console.log(hasPanda); // false
```

# :link: String 編

## split
文字列を分割して配列にする

```JavaScript
const date = `2020/02/23`;
const result = date.split('/');

console.log(result); // ["2020", "02", "23"]
```
split して分割したものを改めてくっつけたい場合は、 joinを使うと良い
`join` についての詳細は <a href="https://qiita.com/mi_upto/items/92105bbf2f300645acc5#join">join を参照</a>

## concat
文字列に別の文字列を連結して、新しい文字列をつくる

```JavaScript
const str1 = `Hello.`;
const str2 = `World!`;
const result = str1.concat(str2);

console.log(result); // > "Hello.World!"
```

## startsWith
文字列の先頭が指定した文字列で始まるかどうかチェックする

```JavaScript
const str = `Hello.World!`;
const result = str.startsWith('Hel');

console.log(result); // true
```

## includes
文字列中に特定の文字列が含まれているかどうかチェックする

```JavaScript
const str = `Tom and Jerry are cat and rat.`;
const result = str.includes('at');

console.log(result); // true
```

## trim
文字列の両端から空白や改行文字（LFやCR）、スペースやタブなどを取り除く

```JavaScript
const str = `   Hello！！






`;
const result = str.trim();

console.log(result); // "Hello！！"
```

## padStart
文字列が任意の長さになるよう、指定した文字列で先頭から字詰めする

```JavaScript
/**
 * # padStart
 * 
 * targetLength: 文字列の長さ。現在の文字列の長さよりも短い場合、現在の文字列が返る
 * padString: 字詰め文字列。 targetLength より長い場合は、右からその長さ分が切り捨てられる
 */

'targetString'.padStart(targetLength, padString);
```
##### 5桁を指定し、空いた部分は頭から`*`で字詰め

```JavaScript
const targetString = 'abc';
const result = targetString.padStart(5, '*');

console.log(result); // **abc
```
##### 5桁を指定し、空いた部分は頭から`12345`で字詰め

```JavaScript
const targetString = 'abc';
const result = targetString.padStart(5, '12345');

console.log(result); // 12abc
```
targetString + padString が指定した桁数より長い場合は、
padString が右からその長さ分切り捨てられる
`12345abc` -> `12abc`

# :link: Object 編
## entries
- オブジェクトを配列に変換する
  - Object `{key: value}` -> Array `[key, value]` 
- Object だけど配列操作を行いたい際などに起点となる便利なメソッド


#### オブジェクトを配列に変換する
`Object.entries` 単体を使ってオブジェクトを配列に変換

```JavaScript
const animals = {
  dog: 'wan-wan',
  cat: 'nya-n',
  fox: 'kon-kon'
};

const result = Object.entries(animals);
console.log(result);
//  [
//    ["dog", "wan-wan"],
//    ["cat", "nya-n"],
//    ["fox", "kon-kon"],
//  ]
```

上記のような形だとあまり使いみちがない（あったらゴメンナサイ）
基本的に `Object.entries` で配列にした後、`map` でコードの柔軟性を高めると良い

`map` についての詳細は <a href="https://qiita.com/mi_upto/items/92105bbf2f300645acc5#map">map を参照</a>

#### `Object.entries` と `map` を組み合わせる

```JavaScript
const animals = {
  dog: 'wan-wan',
  cat: 'nya-n',
  fox: 'kon-kon',
};

const result = Object.entries(animals).map(([key, value]) => ({
  name: key,
  cry: value,
}));

console.log(result);
// [
//   {
//     name: "dog",
//     cry: "wan-wan",
//   },
//   {
//     name: "cat",
//     cry: "nya-n",
//   },
//   {
//     name: "fox",
//     cry: "kon-kon",
//   },
// ];
```
使いやすい形になった :angel:


# :link: 引用 & 参考
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object


# :link: まとめ
- 1年以上コードを書かないでいると浦島状態
  - 頭がリセットされるので、新しい視点でコードを見れるようになる（ぽじてぃぶ）
  - 育休はいいぞ


最後までお読みいただき、ありがとうございました！ :tada: