JavaScriptに再入門しようと思った 基本構文編

# 目次
[基本構文編](https://qiita.com/A_zara/items/42f895d82550e40c311c)
[オブジェクト編](https://qiita.com/A_zara/items/a2853de304e6334dc342)
[関数編](https://qiita.com/A_zara/private/c4f5c4c74e11d9607488)
# はじめ
　そういえばES6とかあんまりわからんし、ここ最近基礎がおざなりになっていたのでまとめて行こうかなと。
　いろいろな言語をやると似通った文法が多いのでここでJSの基本記法をまとめておきたいと思ったのでここから始めたいと思います。
# 基本記法
## 変数/定数宣言
``` javascript
var   test1 //代入も再宣言も可
let   test2 //代入は可 再宣言は不可
const test3 //代入も再宣言も不可
```
### var : いつでも使える入れ物
　JSで最も使われる変数宣言で、代入はもちろん再宣言も許されている。
### let : 再宣言できない入れ物
　letは重複の許可はしていない。
　let自体は主にローカル変数代わりとして利用されることもある(今後のスコープで触れる)

　＊ES2015ではletとconstが利用される
### 定数 : 数値の名前
　途中で中身の変更をしない(してはならない)物には定数を利用し宣言をする。
　例えば消費税を定数にする場合

``` javascript
const tax   = 1.08;
var   price = 200;
```
となる。

配列を定数にした場合

```javascript
const data = [1, 10, 20];
data       = [2, 9, 10];//1,これはできない
data[0]    = 2;//2,これはできる
```

この理由は1は配列そのものの再代入なので命令違反
2は配列内部の書き換えなので違反にはならない

### おまけ命名規則
　ごく一般的に変数はcamelCase記法(単語の接続箇所は大文字)、定数はアンダースコア記法、クラスやコンストラクターはPascal記法(単語の初めは大文字)で使われる。

## データの型
|分類|型名|概要|
|:--|:--|:--|
|基本型|Number|整数型と浮動小数点型のあいのこ|
|基本型|String|文字型|
|基本型|boolean|真偽値|
|基本型|symbol|symbol型(今後触れる)|
|基本型|特殊|からの値であることを表す|
|参照型|配列|データの集合体でいつもの配列と同じ|
|参照型|オブジェクト|データの集合体だが配列とは違いJSONに近い扱い アクセスには要素名を利用する|
|参照型|関数|一連の処理の集合|

## リテラル
### numberリテラル
整数型

|名前|例|
|:--|:--|
|16進数|0x1, 0x1A, 0xFFF|
|10進数|10, 12, 20|
|8進数|0o1, 0o12, 0o7|
|2進数|0b1, 0b10110|

浮動小数点型

|名前|例|
|:--|:--|
|浮動小数|10.5, 3.14e5|

### 文字列リテラル
``` " ```ダブルと``` ' ```シングルの違いは基本的に前後関係が一致していれば問われないが、内部で同じコーテーションを利用する場合やそれ以外の文字を利用する場合はエスケープシーケンスを利用する。

基本的には``` \ ```を利用してエスケープすることとなっており、改ページなら``` \f ```を改行なら``` \n ```をシングルなら``` \' ```などを利用する。
ほかにもUnicode参照の際の\u[xxxx]なども存在する。

### テンプレート文字列
``` ` ```を利用することで開業を挟んだテンプレート文字列の使用ができるほか``` ${変数名} ```のような形で変数の埋め込みも可能にする。

### 配列リテラル
他言語の配列同様に

```javascript
var lang = ['java', 'javascript', ['Vue.js', 'angular.js'], '.NET'];
console.log(lang[2][0]);
// Vue.js
```
のように利用できる

### オブジェクトリテラル

```javascript
var obj = {
    name : "name",
    age  : 21,
    key  : "ABC",
    hey  : function () {
        return alert("Wow");
    }
}
console.log(obj.name);
console.log(obj['name']);
``` 
と利用できる。

## 演算
いつも通りの四則演算``` +, -. /, * ```と存在するほかインクリメントなど存在する

### インクリメント
インクリメントには前置演算と後置演算とが存在する。

``` javascript
y = ++x
y = x++
```
のようなもの

この場合、前者はインクリメントごにｙに代入、後者は代入後にインクリメントになる。

### 小数点の計算
小数点の計算において無限小数点になる可能性があるため、演算結果が正しく求められない可能性が存在する。そのため浮動小数点同士を計算する際は初めに整数化を行い次に演算を行うことで求められる場合がある

## 代入演算
四則演算の代入演算のほかに論理演算(&, |, ^)やシフト演算(<<=, >>=, >>>= (符号なしシフト) )などがある

## 基本型と参照型の違い
先ほどの型で参照型や基本型といった話をしたが、基本型では別変数への代入の際、片方が更新された場合でも影響はない。参照型は配列のアドレスが直接代入(参照代入)されるため影響を及ぼしてしまいます。

## 分割代入
### 配列
今までであれば配列は逐一

```javascript
var data = [1, 1, 2, 3, 5, 8, 13]
var a = data[0]
var b = data[1]
var c = data[2]
//---略---
```
のように代入しなくてはいけなかったが

```javascript
var data = [1, 1, 2, 3, 5, 8, 13]
var [a, b, c, d, e, f, g] = data
var [h, i, ...z] = data
console.log(a);
console.log(z);
```
のような形で代入ができる。この際に``` ...変数 ```のように分割代入末に入れることで残りの配列を代入できる。

### オブジェクト
```javascript
let vegetable = {name : '人参', price: 100, super: 'SEYU'};
let {name, price: nedan, memo = 'おいしいよ' } = vegetable ;
console.log(name);
console.log(price);
console.log(memo);
```
こんな感じでオブジェクトで定義している名前などを取り出したり、宣言することもできる。
ほかに、代入先の変数名の変更もできる。

## 比較演算子
|比較演算子|例え|
|:--:|:--|
|==|等価|
|!=|否等価|
|<|右辺が左辺超|
|<=|右辺が左辺以上|
|>|右辺が左辺未満|
|>=|右辺が左辺以下|
|===|同値|
|!==|否同値|
|? :|式 ? true : false|
## 論理演算子
|論理演算子|例え|
|:--:|:--|
|&&|AND|
|｜｜|OR|
|!|NOT|

## ビット演算子
|演算子|例|
|:--:|:--:|
|&|AND|
|｜|OR|
|^|XOR|
|~|NAND|
|>>|右シフト|
|<<|左シフト|
|>>>|右シフトかつ0うめ|

## その他演算子
|演算子|概要|
|:--:|:--:|
|,|左右の式を連続実行|
|delete| 削除|
|instanceof|インスタンス判定|
|new|インスタンスの作成|
|typeof|オペランドのデータ型取得|
|void|未定義地を返却|
### Delete 演算子
```javascript
var ary = [1, 3, 5, 7, 11]
console.log(delete ary[0]);//=>true
console.log(ary);//=>[3, 5, 7, 11]

var obj = {data1 : 1, data2 : 3};
console.log(delete obj.data1);//=>true
console.log(obj.data1);//=>undefined
```

## 制御構文
### if
いつも通りのIF文

```javascript

var data = 'num';
//正規的な書き方
if (data == 'num') {
    //コード
} else if (data == 'nem') {
    //コード
}
//省略記法
if (data == 'num')
    //コード
else if (data == 'nem')
    //コード
```
### switch
```javascript
var data2 = 4
switch (data2){
    case 1:
        // コード
        break;
    case 2:
        // コード
        break;
    case 3:
        // コード
        break;
    case 4:
        // コード
        break;
    default:
        //コード
        break;
}
```
breakがない場合はそのまま継続してしまう。

### while & Do While
```javascript
//while
var data3 = true;
var i = 0;
while (data3) {
    if (i > 20) {
        break;
    }
    i++;
}
//do while
do {
    i--;
} while (i > 0);
```
### for
```javascript
for (var i = 0, j = 0; i < 10; i++,j++) {
    console.log(i);
}
//カンマでいつも通り複数代入
```
### for in (key)
```javascript
var ary = [1, 2, 3, 4, 5];
for (var key in ary) {
    console.log(key);
    console.log(ary[key]);
}
```
### for of (value)
```javascript
var ary = [1, 2, 3, 4, 5];
for (var value of ary) {
    console.log(value);
}
```

### スキップとブレイク
```javascript
var breakNum = 97;
for (var i=0; i < 100; i++){
    if (i == breakNum) {break;}//中断
    if (i % 8 == 0){continue;}//スキップ
    console.log(i);
}
```
### 例外処理
```javascript
var i = 1;
try {
    i = i * k;//ここではkが宣言されていないのでエラーが出る
} catch (e) {
    console.log('warn');//例外処理
    console.log(e.message);//エラーメッセージ表示
} finally {
    console.log('処理を終了します。');//最終処理
}
```
例外処理はすごくオーバーヘッドが大きいのでループの外に出すことが奨励されている。
#### throw
throw命令を用いて制御構造での例外処理も可になる

### strict
危険な構文を禁止するモード

```javascript
'use strict';
//有効範囲はファイル内全体
function hoge () {
    'use strict';
    //有効範囲は関数内のみ
}
```
# 参考資料
学習に利用している本
[改訂新版JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで](https://www.amazon.co.jp/dp/B01LYO6C1N/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)
[mozilla](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object)