Javascriptの基本的なメモ


###主なデータ型

|分類|データ型|概要| 
|:-----------|:------------|:------------|
|基本型|数値型 number|±4.94065645841246544×10-324 ~ ±1.79769313486231570 ×10308|
|基本型|文字列型 string|シングル/ダブルクォートで囲まれた 0 個以上の文字の集合|
|基本型|真偽型 boolean|true(真)/ false(偽)|
|基本型|シンボル型 symbol|シンボル|
|基本型|特殊型 null/undefined|値が空、未定義であることを表す|
|参照型|配列 array|データの集合(各要素にはインデックス番号でアクセス可能)|
|参照型 |object|データの集合(各要素には名前でアクセス可能)|
|参照型 |function|一連の処理(手続き)の集合|

###変数の宣言
varとlet

```javascript
//OK
var msg = '1'
var msg = '2'
//NG
let msg = '1'
let msg = '2'
```

###falseと判定されるもの
空文字列("")
数値の0、NaN(Not a Number)
null、undefined

それ以外は全てtrue

###switch式の注意
switch命令の先頭の式と、case句の値とは、(「==」演算子ではなく)「===」演算子で比較される点に注意してください。
つまり型まで比較される。

```javascript
var x = '0';
 switch (x) {
   case 0 :
   //この部分は型が違うので実行されない
}
```

###for命令の動作
無限ループ

```javascript
for (;;) {
  console.log('hello');
}
```
###for in命令

指定された連想配列(オブジェクト)の要素を取り出して、先頭から順に 処理します。

```javascript
var data = { apple:150, orange:100, banana: 120 };
  for (var key in data) {
    console.log(key + '=' + data[key]);
}
```

配列では使っては駄目。これも表示されてしまう。ƒ () {}

```javascript
var data = [ 'apple', 'orange', 'banana' ];

Array.prototype.hoge = function() {} 
  for (var key in data) {
    console.log(data[key]);
} 
```
他にも問題がある。
for in 命令では処理の順序も保証されない。
仮変数にはインデックス番号が格納されるだけなので、コードがあまりシンプルにならない。
上記の例だと、keyには0,1,2が格納されている。

###ループのbreak
breakを使うと内側のループから抜けるので、全ての九九の段で4段までが表示される。
1, 2, 3, 4
2, 4, 6, 8
9, 18, 27, 36

```javascript
for (var i = 1; i < 10; i++) {
  for  (var j = 1; j < 10; j++) {
    if (j > 4){ break; }
    console.log(i * j);
  }
}
```

ラベル名を使って、外側のループも抜けるので1の段しか表示されない。
1, 2, 3, 4

```javascript
kuku :
for (var i = 1; i < 10; i++) {
  for  (var j = 1; j < 10; j++) {
    if (j > 4){ break kuku; }
    console.log(i * j);
  }
}
```

###例外処理
例外処理はオーバーヘッドが大きい

```javascript
var x = 1;
var y = 0;
try{
  if (y === 0) { throw new Error('0で除算しようとしました。'); }
    var z = x / y;
} catch(e) {
    console.log(e.message); 
} finally {
  console.log('必ず出力');  
}
```

###Strictモードを有効にする
有効範囲を限定できるので、関数の先頭につけるのがいい。

```javascript
￼'use strict';
// 任意のコード
function hoge() { 'use strict'; }
```
メリット
非Strict モードのコードよりも高速に動作する場合がある
将来のJavaScriptで変更される点を禁止することで、今後の移行が簡単になる 
JavaScript の「べからず」を理解する手がかりになる

###外部スクリプトを非同期にロードする - async/defer属性 -
モダンブラウザーを対象としているならば、HTML5で新たに加わったasync属性を利用できる

```html
<script src="app.js" async></script>
```

ただしasync属性付きのscript要素は、その性質上、実行順序が保証されない点に注意してください。
その場合はscriptをまとめるか、defer属性を使えば解決する。
defer属性は、スクリプトの実行を文書の解析終了後まで遅 延させることを指示する属性です。

###ユーザーデータの保存方法

|項目|ストレージ|クッキー| 
|:-----------|:------------|:------------|
|データサイズの上限|大きい(5MB)|小さい(4KB)|
|データの有効期限|なし|あり|
|データ通信|発生しない|リクエストの都度、サーバーにも送信|

ストレージには2種類ある

ローカルストレージ
オリジン単位でデータを管理。ウィンドウ/タブをまたいでデータの共 有が可能で、ブラウザーを閉じてもデータは維持される

セッションストレージ
現在のセッション(=ブラウザーが開いている間)でだけ維持される データを管理。ブラウザーを閉じたタイミングでデータは破棄され、
ウィンドウ/タブ間でデータを共有することもできない

###サロゲートペア文字の長さをカウントする

```javascript
var msg = '𠮟る';
console.log(msg.length); // 結果:3
```

見た目の文字数は2文字ですが、結果は 3。どこで 1 文字増えているのでしょうか。  結論から言ってしまうと、これは「𠮟」という文字がサロゲートペアであることから生じる問題です。
一般的に 、 Unicode ( UTF-8 )は1文字を2バイトで表現します 。 しかし 、Unicodeで扱うべき文字が増えるに伴い、
これまでの2バイトで表現できる文字数(65535 文字)では不足する状況が出てきました。そこで、一部の文字を4バイトで表現することで、扱える文字数を拡張することになったわけです。
これがサロゲートペアです。ただし、lengthプロパティはサロゲートペアを識別できませんので、4バイト= 2文字と見なしてしまいます。
先ほどの例であれば、「𠮟」が2文字、「る」が1文字で、合計3文字となります。
サロゲートペアを含んだ文字列を正しくカウントするには、以下のようなコードを書きます。

```javascript
var msg = '𠮟る';
var len = msg.length;
var num = msg.split(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g).length - 1;
console.log(msg.length - num); 
```