JSのお勉強 その１

自分用に、、結構調べ直したりが多いので　汗

##JSの記法

| 記法名| 主な用途 | 使用例 |
|:-----------|:------------|:------------|
| キャメルケース | 変数/関数名        | lastName         |
| Pascal記法     | クラス・コンストラクター名      | LastName       |
| アンダースコア       | 定数名        | LAST_NAME , last_name         |

##マジックナンバー
意味を持たない数字（ぱっと見なんの値かわからないやつ）
消費税計算の **1.1** とかがいきなりコード内に記述されてても、
読み解かないとなんの値かわからない、こういう数字。 

##テンプレート文字
```
`こんにちは、${name}さん。`
```
これで変数を + を使わずに文字列に入れられる。

##オブジェクトリテラル記法
```
let obj = { x:1 , y:2 , z:3 };
obj.x     //結果は1
obj['x']; //結果は1
```
obj.x、の x は識別子の命名規則（頭に数字使えない）に沿ってるので数字の指定はNG

##演算子
| 演算子       |       意味 |    使用例    |
|:-----------------|:------------------|:------------------|
| +             |            数値の加算 |        `1 + 1 //2`        |
| -           |            数値の減算 |       `1 - 2 //1`       |
| *             |              数値の乗算 |        `2 * 2 //4`       |
| /               |                数値の除算 |         `10 / 5 //2`         |
| %             |             除算したあまり |       `10 % 4 //2`       |
| ++          |           *前置加算 |      `a = 3; b = ++a //bは4になる`        |
| ++          |           *後置加算 |      `a = 3; b = a++ //bは3になる`        |
| --          |           *前置減算 |      `a = 3; b = --a //bは2になる`        |
| --          |           *後置減算 |      `a = 3; b = a-- //bは3になる`        |
\*前置加算では **a** に **1** を加算してからbに代入、後置加算では **a** を **b** に代入してから **a** に **+1** してるので結果が異なる。
　後置加算の **a** と **b** の結果は **a** が **4** で **b** が **3** になる。

##代入演算子
| 演算子       |       意味 |    使用例    |
|:-----------------|:------------------|:------------------|
| =             |            変数へ値を代入|        `x = 1`        |
| +=           |            加算したものを代入|       `x = 1; x += 2 //3`       |
| -=             |              減算したものを代入 |        `x = 3; x -= 1 //2`        |
| *=               |                乗算したものを代入 |         `x = 2; x *= 2 //4`         |
| /=             |             除算したものを代入 |       `x = 6; x /= 3 //2`       |
| %=          |           除算したあまりを代入|      `x = 7; x %= 3 //1`        |
| **=          |           べき算を代入|      `x = 7; x **= 3 //xは7の3乗なので、 343 になる`        |
| &=          |           ※論理積演算した結果を代入 |      `a = 3; b = a++ //bは 3 になる`        |
| ｜=          |           ※論理和演算した結果を代入 |      `a = 3; b = --a //bは 2 になる`        |
| ^=          |           ※排他的論理和演算した結果を代入 |      `a = 3; b = a-- //bは 3 になる`        |
| <<=          |          ※左の値を右の値だけ左シフトした結果を代入 |      `a = 3; b = a-- //bは 3 になる`        |
| >>=          |          ※左の値を右の値だけ右シフトした結果を代入 |      `a = 3; b = a-- //bは 3 になる`        |
| >>>=          |         ※左の値を右の値だけ右シフトした結果を代入 |      `a = 3; b = a-- //bは 3 になる`        |
※この辺りはちょっとまだ理解できてない、、難しい。。

##定数の再代入
```
//NG例1
const hoge = 100;
hoge = 200;

//NG例2
const hoge = [100,200,300];
hoge = [500,600,700];

//OK例
const hoge = [100,200,300];
hoge[0] = 500;
```

イメージとして、**const hoge = この右側はhogeがみてる参照先**

NG例1はhogeの参照先がかわるのでダメ、
NG例2もhogeの参照先がかわってるのでダメ、OK例では参照先が変わらず、
参照先の値だけを変更してるので、OK。
まー基本的には定数は変更しない。

##分割代入
配列/オブジェクトを分解して配下の要素/プロパティ値を個々の変数に分解するための構文。
むつかしい・・・とりあえず下記で。。
###配列
####今までの配列の値の取り方
```
var hoge = [10 , 20 , 30 , 40 , 50 , 60 , 70];
var x0 = hoge[0];
var x1 = hoge[1];
var x2 = hoge[2];
```
####分割代入での値の取り方
```
let hoge = [10 , 20 , 30 , 40 , 50 , 60 , 70];
let [x0 , x1 , x2 , x3 , x4 , x5 , x6] = hoge

console.log(x0)　//この結果は 10 になる
```
####分割代入での値の取り方(応用)
```
let hoge = [10 , 20 , 30 , 40 , 50 , 60 , 70];
let [x0 , x1 , x2 , x3 , ...other] = hoge

console.log(x0)　//この結果は 10 になる
console.log(x1)　//この結果は 20 になる
console.log(x2)　//この結果は 30 になる
console.log(x3)　//この結果は [40 , 50 , 60 , 70] になる
```

###オブジェクト
####分割代入での値の取り方
```
let hoge = {name: '名前' , age: '年齢' , address: '住所'};
let {age , name} = hoge

console.log(age)　//この結果は 年齢 になる
```
配列と違って、プロパティ名で紐づけるので、順番が変わっても大丈夫。
また、分割代入で、 `[name: '名前' , age: '年齢' , address: '住所']` に対して、
`let [age , name] = hoge` とすると、**address** は無視される。
####分割代入での値の取り方(入れ子)
```
let hoge = {name: '名前' , age: '年齢' , address: '住所' ,other: {children: '2人' , dependents: 'いる'}};
let {age , name , other:{children}} = hoge

console.log(other)　//この結果は {children: '2人' , dependents: 'いる'} になる
console.log(children)　//この結果は 2人 になる
```
####分割代入での値の取り方(変数名を別名に)
```
let hoge = {name: '名前' , age: '年齢' , address: '住所'};
let {age: nenrei , name: namae} = hoge

console.log(nenrei)　//この結果は 年齢 になる
console.log(namae)　//この結果は 名前 になる
```
####デフォルト値を設定
```
let hoge = {name: '名前' , age: '年齢' , address: '住所'};
let {age , name , tel = 000} = hoge

console.log(tel)　//この結果は 000 になる
```