[JavaScript] モダンな書き方


#分割代入
↓${myProfile.name}のように書くのが面倒くさいので、
nameを「どのオブジェクトから参照するか」を先に定義しています。

オブジェクトVer

```js
const myProfile = {
  name: "たかし",
  age: 20,
}

const { name, age } = myProfile;
const message = `名前は${name}、${age}歳です。`;
console.log(message);
```

配列Ver

```js
const myProfile = ["たかし", 20];
const [name, age] = myProfile;
const message = `名前は${name}、${age}歳です。`
console.log(message);
```

#デフォルト値

↓「こんにちは、undefinedさん！」と出力されます。

```js
const sayHello = (name) => console.log(`こんにちは、${name}さん！`);
sayHello();
```

↓引数が設定されていなかった場合、undefinedと出力されてしまうのは望ましくないため、
↓デフォルト値を設定しておきます。

```js
const sayHello = (name = "たかし") => console.log(`こんにちは、${name}さん！`);
sayHello();
```

#スプレッド構文
#####配列の展開
... + 配列という書き方をすると、中身の要素を順番に処理し、展開してくれます。

```js
const arr1 = [1, 2];

const sumFunc = (num1, num2) => console.log(num1 + num2);
sumFunc(...arr1);
```
[![Image from Gyazo](https://i.gyazo.com/18bbb70b55bdc4e4bad18982d454f9df.png)](https://gyazo.com/18bbb70b55bdc4e4bad18982d454f9df)

#####まとめる
num1, numm2は順番通り受け取って、残りはいくつだろうと、まとめて配列で受け取る

```js
const arr2 = [1, 2, 3, 4, 5];
const [num1, num2, ...arr3] = arr2;
console.log(num1, num2, arr3)
```
[![Image from Gyazo](https://i.gyazo.com/8eb52fc516c6a4b2e594ca41cb5335e2.png)](https://gyazo.com/8eb52fc516c6a4b2e594ca41cb5335e2)

#####配列のコピー
const arr6 = [...arr4];とすることで、arr4と全く同じ内容の配列を作ることができます。

```js
const arr4 = [10, 20];
const arr5 = [30, 40];
const arr6 = [...arr4];
console.log(arr4, arr6);
```
[![Image from Gyazo](https://i.gyazo.com/35d0b52ed59ccaadc84544a2f2b62a97.png)](https://gyazo.com/35d0b52ed59ccaadc84544a2f2b62a97)

#####配列の結合
const arr7 = [...arr4, ...arr5];とすることで、
arr4とarr5の要素を結合した、新たな配列を作ることができます。

```js
const arr4 = [10, 20];
const arr5 = [30, 40];
const arr7 = [...arr4, ...arr5];
console.log(arr7);
```
[![Image from Gyazo](https://i.gyazo.com/c025735efab46b7bfc05b33cdf110f0b.png)](https://gyazo.com/c025735efab46b7bfc05b33cdf110f0b)

#map
mapの基本的な構文

```js
const nameArr = ["田中", "山田", "佐藤"];
const nameArr2 = nameArr.map((name) => {
  return name;
})
console.log(nameArr2);
```
[![Image from Gyazo](https://i.gyazo.com/81bf45c6b965dfffa3d9a67a8df29e73.png)](https://gyazo.com/81bf45c6b965dfffa3d9a67a8df29e73)

↓配列をループ処理する

```js
nameArr.map((name) => console.log(name));
```
[![Image from Gyazo](https://i.gyazo.com/925b24edba8d9f978bdea4b401109e43.png)](https://gyazo.com/925b24edba8d9f978bdea4b401109e43)

要素が何番目に出力されたかを把握したい場合には、第２引数にindexを追加します。

```js
const nameArr = ["田中", "山田", "佐藤"];
nameArr.map((name, index) => console.log(`${index + 1}番目は${name}です。`));
```
[![Image from Gyazo](https://i.gyazo.com/fdf9de250b41566da1733a574e3c1544.png)](https://gyazo.com/fdf9de250b41566da1733a574e3c1544)

#filter
条件に一致したものだけ返却して、新しい配列を生成するような関数
returnの後に条件式を書いて、その条件に一致したものだけを返します。

↓奇数だけ取り出す

```js
const numArr = [1, 2, 3, 4, 5];
const newNumArr = numArr.filter((num) => {
  return num % 2 === 1;
});
console.log(newNumArr);
```
[![Image from Gyazo](https://i.gyazo.com/92254764ff64bc2bfbf18b95b4593dde.png)](https://gyazo.com/92254764ff64bc2bfbf18b95b4593dde)

#三項演算子
toLocaleStringは、３桁区切りにして、金額表示のようにしてくれる関数です。
numberに対して使えます。

```js
const num = 1300;
console.log(num.toLocaleString());
```
[![Image from Gyazo](https://i.gyazo.com/1663fb7697398c4a7d279c84dba3e0f2.png)](https://gyazo.com/1663fb7697398c4a7d279c84dba3e0f2)

↓numがnumberだった場合、３桁区切り。
↓number以外だった場合、"数値を入力してください"と出力する

```js
const num = "1300";

const formattedNum = typeof num === 'number' ? num.toLocaleString() : "数値を入力してください"
console.log(formattedNum);
```
[![Image from Gyazo](https://i.gyazo.com/f30364f93e1d3582e6c8e05dcb84ba3b.png)](https://gyazo.com/f30364f93e1d3582e6c8e05dcb84ba3b)

↓return結果を判定する際にも三項演算子を使ったりします。

```js
const checkSum = (num1, num2) => {
  return num1 + num2 > 100 ? "100を超えています。" : "許容範囲内です。";
}
console.log(checkSum(90, 9));
```
[![Image from Gyazo](https://i.gyazo.com/327b8ed1e76f6e3dd1ed3c5678efe39e.png)](https://gyazo.com/327b8ed1e76f6e3dd1ed3c5678efe39e)

#論理演算子の正しい意味
|| の意味は、"または"ではなく、"左がfalseの場合、右を返す" です。

↓JavaScriptではnullはfalseを返すので、"金額未設定です"が返ってきます。

```js
const num = null;
const fee = num || "金額未設定です";
console.log(fee);
```
[![Image from Gyazo](https://i.gyazo.com/3adbb8ae8ee94ef8a2585a8f9a00af54.png)](https://gyazo.com/3adbb8ae8ee94ef8a2585a8f9a00af54)

&&の意味は、"左がtrueの場合、右を返す" です。

```js
const num2 = 100;
const fee2 = num2 && "何か設定されました";
console.log(fee2);
```
[![Image from Gyazo](https://i.gyazo.com/c7d1617d306e388c5ae264ddc56b280f.png)](https://gyazo.com/c7d1617d306e388c5ae264ddc56b280f)
num2 = nullの場合は、nullが返ってきます