JavaScript 基礎 変数とデータ型まで

<h4>・変数宣言と定数宣言</h4>

`let`は変数宣言である。あとから値を再代入することができる。<br>
`const`は定数宣言である。あとから値を再代入することができない。

<h5>・メモリの使い方</h5>
　プログラム上で使われる値はすべて<b>メモリ</b>上に保管されている。<br>
　⇒メモリ上の場所は<b>アドレス</b>という数値で表現される。<br><br>
<b>再代入のイメージ</b>

```JavaScript:ex.js
let playerName = "ルフィ";

playerName= "Luffy";
```

<b>値の再代入のイメージ</b>
![再代入.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2850098/b49f787b-5ed1-467a-2abc-9c66c1b8521b.png)

このイメージにように変数に別の値が代入されると、変数のアドレスが変化する。そして２番地にある"ルフィ"という値は、他の使用箇所がない場合メモリから削除される。

※定数は大文字で表す。　例： `const PLAYER_NAME = "吉田"`

<h4>・リテラル</h4>

<h6>・BigIntリテラル</h6>
　`12345678910n` ：このように数値に<b>n</b>が付いた場合、BigInt型のリテラルを表す。

<h6>・オブジェクトリテラル</h6>
```JavaScript:javascript.js
{
    name: "ルフィ",
    anotherName: "麦わら"
}
```

このように<b>`{ }`</b>は、<b>新しいオブジェクトの作成</b>を行う。

<h6>・配列リテラル</h6>
　`[1, 2, 3, 4, 5]`
　このように<b>[ ]</b>は、<b>新しい配列の作成</b>を行う。

<h6>・正規表現リテラル</h6>
　`/ab+c/`
　このように<b>/  /</b>は、<b>新しいRegExpオブジェクトの作成</b>を行う。

<h6>・関数リテラル</h6>

```JavaScript:javascript.js
    let calculation = function () {
    //処理を書く
};
```

　このように`function() { };`は、<b>新しい関数の宣言</b>を行う。

<h6>・テンプレートリテラル</h6>

```JavaScript:テンプレートリテラルの例
       const personName = "ルフィ";
       console.log(`こんにちは！ ${personName}`);
       >こんにちは！ルフィ
```

このように<b>バッククォート(`[SHIFT+@])で、${変数名}</b>を囲うと変数の値を文字列に挿入できる。

<h4>・オブジェクト</h4>
　オブジェクトとは、<b>変数を管理する入れ物のようなもの</b>である。

<h5>・オブジェクトの初期化</h5>
　オブジェクトを使うには、<b>オブジェクトの初期化</b>をする必要がある。<br>
　※初期化とは、何らかの機能を<b>使用可能</b>な状態にすること<br>

```JavaScript:ObjectInit.js
    let objectName = {
    //プロパティと値は":"で区切る。
    プロパティ1: 値1;
    プロパティ2: 値2;
    プロパティ3: 値3;
}
```

<h5>・ドット記法</h5>
<b>ドット記法</b>とは、オブジェクトとプロパティをドットでつなぐことで<b>オブジェクトの値の取得・変更</b>ができる。

ドット記法:`オブジェクト名.プロパティ名`

```JavaScript:javascript.js
    let pirates = {
    name: { first: "Luffy", middle: "D", last: "Monkey" },
    anotherName: "麦わら";
};
//genderという値の追加
pirates.gender = "男";

console.log( pirates.anotherName);
> name: { first: "Luffy", middle: "D", last: "Monkey" }, anotherName: "麦わら", gender: "男"}
console.log( pirates );
> {}
```

<b>・オブジェクトのメモリ空間イメージ</b>
![オブジェクトのメモリ空間イメージ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2850098/e87c05b6-a733-c154-e536-f8f0628e4198.png)

<h5>・ブラケット記法</h5>
　<b>ブラケット記法</b>では、オブジェクトの後ろに <b>[　]</b>を続けて、その中に<b>文字列</b>でプロパティ名を記述する。<br><br>

ブラケット記法:`オブジェクト名["プロパティ名"]`<br>

変数を使ったプロパティ名の指定

```JavaScript:javascript.js
    const piratesMember = {
        member1: "ルフィ";
        member2: "ゾロ";
}

const keyBase = "member";

console.log(members[ keyBase + "1"]);
> ルフィ
console.log(members[ keyBase + "2"]);
> ゾロ
```

オブジェクトリテラル内のブラケット記法

```JavaScript:javascript.js
    const keyBase = "member";
    let members = {
    [ keyBase + "1"]: "ルフィ";
    [ keyBase + "2"]: "ゾロ";
}
console.log (members);
> { member1: "ルフィ", member2: "ゾロ" }
```

<h5>プロパティの削除</h5>

　プロパティの削除は`delete`でできる。

<h5>・メソッド</h5>
　<b>関数</b>とは、特定の処理を行う機能をもつもの。<br>
　<b>メソッド</b>とは、関数をもつオブジェクトのこと。<br><br>
オブジェクトの定義と実行

```JavaScript:javascript.js
    //オブジェクトの初期化時にメソッドを定義
    let オブジェクト名 = {
        プロパティ名: function( [ 引数 ] ) {
                //処理を書く
        }
    //既存のオブジェクトにメソッドを追加
    オブジェクト.プロパティ = function( [ 引数 ] ) {
                //処理を書く
        }
    //メソッドの実行
    オブジェクト.プロパティ( [ 引数 ] );
}
```

<h5>・シンボルとは</h5>
　<b>シンボル</b>とは、他の値と重複しないようにプロパティを設定するためのもの。SQLでいう"unique"?

<h5>・JavaScriptのデータ型の特徴</h5>
　JavaScriptは、プログラムの実行時に値が設定された時点で自動的に決定されるという<b>動的型付け言語</b>である。<br>
　それに対してJavaやC言語は、コードを書くときにデータ型を宣言する必要があるという<b>静的型付け言語</b>である。

```JavaScript:javascript.js
    //どちらもletで宣言できる
    let number = 1;
    let member = "吉田";
```

```Java:j.java
    //数字はint、文字列はStringでないとエラーがでる。
    int number = 1;
    String member = "吉田";
```

<h5>・データ型の確認</h5>
　JavaScriptでデータ型を確認するには、<b>typeof</b>を使う。

<h5>型変換の方法</h5>

| 関数 | 説明 | 例 |
|:----|:-----|:---|
| Number( 値 ) | 数値へ変換 | Number ("1") |
| Boolean ( 値 ) | 真偽値へ変換 | Boolean(1) |
| String ( 値 ) | 文字列へ変換 | String(true) |
| BigInt ( 値 ) | BigInt型へ変換 | BigInt(true) |

<h5>・暗示的な型変換</h5>
　JavaScriptでは、型が自動的に変換されることがある。<br>
　例えば、 1 + "2"　のような<b>足し算</b>の場合、数値は<b>文字列化</b>する<br>
　　　　　 1 - "2"　のような<b>引き算</b>の場合、文字列は<b>数値化</b>する。<br><br>
【参考】
独習Javascript 新版 著：外村将大