---
# System prepended metadata

title: 'JavaScript 再入門 #2'
tags: [JavaScript]

---

# JavaScript 再入門 #2
###### tags: `JavaScript`
- 参考: [【JS】初級者から中級者になるためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/learn/)
## 変数
![](https://i.imgur.com/takkvoi.png)
- let
- const
- var
## データ型
![](https://i.imgur.com/bILZxuV.png)
![](https://i.imgur.com/rACNJ2w.png)
## 暗黙的な型変換
- 変数が呼び出される状況によって方が自動で変換されること
JavaScriptは暗黙的な型変換がある
## 動的型付け言語
- 変数宣言時の型宣言がない
- 変数を使用する状況によって変数の型が変更される
## 静的型付け言語
- 変数宣言時の型宣言がある
- 変数を使用する状況によらず常に変数の型が保持される
## 厳格な等価性と抽象的な等価性
- 厳格な等価性 （`===` など）
    - 型の比較まで行う
- 抽象的な等価性 （`==` など）
    - 型の比較は行わない
## falsyとtruthy
![](https://i.imgur.com/6rbbfyj.png)
- falsy
    - Booleanで真偽値に変換したとき、falseになる値のこと
- truthy
    - Booleanで真偽値に変換したとき、trueになる値のこと
## AND条件とOR条件
- AND条件（`&&`）
    - A かつ B
    - 真偽値を返すとき、`false` の値が見つかった時点でその値を返し、
    そうでない場合は最後に該当した `true` の値を返す
    - ただし、`true` に該当するものがなければ一番右の値を返す
        - [JSXで使われる&&についてちょっとだけ深掘りする](https://zenn.dev/nrikiji/articles/914e13da25caed)
- OR条件（`||`）
    - A または B
    - 真偽値を返すとき、`true` の値が見つかった時点でその値を返し、
    そうでない場合は最後に該当した `false` の値を返す
    - ただし、`false` に該当するものがなければ一番右の値を返す
        - [JSXで使われる&&についてちょっとだけ深掘りする](https://zenn.dev/nrikiji/articles/914e13da25caed)
- 複数の条件とグループ化
    - A または B かつ C
    - AND条件とOR条件を合わせて使う場合、計算の優先順位を明示化するために
    `()`で式ごと囲む
- 応用
    - 引数が初期値を持つ関数を実行する
        ```javascript
            function hello(name) {
                name = name || 'Tom';
                console.log('Hello ' + name);
            }
            hello(); // Hello Tom
            hello('Bob'); // Hello Bob
        ```
    - 変数を真偽し実行するか否かを判定する
        ```javascript
            function hello(name) {
                name = name || 'Tom';
                console.log('Hello ' + name);
            }

            let name;
            name && hello(name); // name が false なので実行されない
        ```
## プリミティブ型とオブジェクト
![](https://i.imgur.com/dfLqiye.png)
- プリミティブ型
    - 変数には値が格納される
    - 一度作成するとその値を変更することができない
    - 再代入のイメージ
    まず `Hello` という文字列を定義する。
    ![](https://i.imgur.com/Zqe27Ss.png)
    その後変数 `a` を宣言しそれに `Hello` を代入する。
    このとき、変数 `a` は `Hello` を参照する形になっている。
    ![](https://i.imgur.com/sPLAWPd.png)
    その後、新しい文字列 `Bye` を定義し、`a` に再代入する。
    すると、変数 `a` は今は定義した `Bye` を参照するようになった。
    このとき、変数 `a` は `Hello` を参照しなくなったが、`Hello` 自体は依然存在し続けている。
    ![](https://i.imgur.com/ejmap3Y.png)
- オブジェクト（型）
    - 変数には参照が格納される
    - 値を変更することができる
    - オブジェクトのイメージ
    `a` という変数がオブジェクトへの参照を持っている。
    ![](https://i.imgur.com/5moz1pw.png)
    オブジェクトへの参照はオブジェクトの実体を参照する。
    ![](https://i.imgur.com/YPx9zUG.png)
    オブジェクトの実体は `prop` を持っている。
    ![](https://i.imgur.com/1xLvZaA.png)
    その `prop` が文字列 `Hello` を参照する。
    ![](https://i.imgur.com/CRMMjWR.png)
    - オブジェクトは、**名前（プロパティ）付きの参照を管理するための入れ物である**という考え方もできる
## 参照とコピー
- プリミティブ型のコピー
![](https://i.imgur.com/gpWE3qV.png)
    - 文字列などもコピーされる
    - コピーした値に変更を加えてももとの変数には影響がない
- オブジェクトのコピー
![](https://i.imgur.com/adbmWp2.png)
    - 参照がコピーされるだけなので、コピーした値も同じ実体を参照する
    - コピーした値からプロパティに変更を加えるとコピー元のプロパティも同様に影響を受け変更される
- 新しいオブジェクトを代入した場合の参照の変遷
![](https://i.imgur.com/vtcXp12.png)
## 参照と `const`
- プリミティブ型の再代入
![](https://i.imgur.com/YTGzJKG.png)
- オブジェクトの再代入
![](https://i.imgur.com/LPLNoXJ.png)
    - 固定されるのは変数 `a` からの実体への参照だけで、
    変数へのオブジェクトの再代入はできないが、プロパティへ直接変更を加えることは可能
## 参照と引数
![](https://i.imgur.com/uWm9463.png)
## 分割代入
- オブジェクトから特定のプロパティを抽出して宣言する
![](https://i.imgur.com/rqJQWyB.png)
    - 代入時の変数名はもとのオブジェクトのプロパティ名と合わせる必要がある
## 参照の比較と値の比較
- オブジェクトを `===` や `==` で比較すると、そのオブジェクトの参照先を比較することになる
- オブジェクトは同一のプロパティを持つものであっても、それを個々に宣言してしまうと別々のオブジェクトとして扱われ、比較演算子においては異なるものとして判定される
- 特定のオブジェクトが代入された変数 `a` をさらに変数 `b` に代入して比較するとそれらは真偽値として `true` を示すが、それは別々の変数であっても同じオブジェクトを参照しているからである