JavaScript を書き始める前に知っておきたい JavaScript のこと #05

JavaScript のデータ型を見てみようという内容。今回はオブジェクトの解説です。

Transcript

1. JavaScript を書き始める前に知
   っておきたい JavaScript のこ
   と #05
   Kanazawa.js
   Remote Meetup #06
   千葉 弘太郎
   1
   1
   

   View Slide

2. 千葉 弘太郎（ちば こうたろう）
   Kotaro Chiba
   Twitter: @ur_uha
   Github: uruha
   Work: DMM.com LLC
   2
   2
   

   View Slide

3. 前回
   JavaScript を書き始める前に知っておきたい
   JavaScript のこと #04
   JavaScript の データ型 について知ろう（プリミティブ型
   編） ！
   3
   3
   

   View Slide

4. 今回
   JavaScript の データ型 について知ろう（オブジェクト
   編） ！
   4
   4
   

   View Slide

5. おさらい
   5
   5
   

   View Slide

6. プリミティブ型
   String
   Number
   Boolen
   Undefined
   Null
   Symbol (ES6~)
   BigInt (ES10~ new)
   Object
   <= 今⽇はこれ
   6
   6
   

   View Slide

7. オブジェクト (複合型)
   1つ以上のプリミティブ値を格納できるレイヤ。
   プリミティブ値と違い、メモリサイズを特定できない。
   複合オブジェクト 参照型 とも呼ばれる。
   7
   7
   

   View Slide

8. const myObject = {
   num: 1,
   text: 'Yes!
   プリキュア!',
   isTrue: false,
   nullpo: null,
   // ...
   };
   8
   8
   

   View Slide

9. 「複合」はわかるけど、なぜ「参照」
   9
   9
   

   View Slide

10. const obj_01 = {};
    const obj_02 = obj_01;
    obj_01.foo = 1;
    console.log(obj_01.foo, obj_02.foo);
    // => 1, 1
    10
    10
    

    View Slide

11. View Slide

12. ⽣成されたオブジェクトを操作する場合、
    オブジェクトのコピーは値をコピーするのではなく、
    「参照先」をコピーする。
    cf. プリミティブ値は値そのものが渡される
    12
    12
    

    View Slide

13. また、オブジェクトのプロパティは動的に更新が可能。
    参照先を共有しているオブジェクト⾃体のプロパティが更新
    されると全てのオブジェクトのプロパティが更新される。
    13
    13
    

    View Slide

14. オブジェクト⽣成時の特徴
    14
    14
    

    View Slide

15. オブジェクトの⽣成時には constructor
    プロパティにア
    クセスできるようになる（プリミティブ値も同じ）
    constructor
    プロパティの特定は instanceof
    演算⼦
    で判定できる
    15
    15
    

    View Slide

16. オブジェクトにはネイティブコンストラクタを持つオブジェク
    トがいくつか存在する。
    16
    16
    

    View Slide

17. Object
    Array
    Funciton
    Date
    Error
    RegExp
    17
    17
    

    View Slide

18. const obj = new Object();
    const arr = new Array();
    const date = new Date();
    console.log(obj instanceof Object);
    console.log(arr instanceof Array);
    console.log(date instanceof Date);
    // =>
    全て true
    が返る
    obj.constructor === Object;
    arr.constructor === Array;
    date.constructor === Date;
    // =>
    上記と結果が同じ
    ネイティブコンストラクタはリテラルでも⽣成できる。
    18
    18
    

    View Slide

19. プリミティブ値とネイティブコンストラクタは別物。
    配列などはプリミティブ値でないため注意！（意外に知らない
    で判定を⾏う⼈が多い）
    typeof Array
    は存在しない
    19
    19
    

    View Slide

20. ただ、 instanceof
    は iframe
    では動作しないため、
    Array
    などの判定は instanceof
    より
    Array.isArray()
    が推奨されている。
    20
    20
    

    View Slide

21. ⽐較について
    21
    21
    

    View Slide

22. オブジェクト⾃体の⽐較は、⽐較対象のオブジェクトが「同じ
    型」で「同じ（プロパティの）値」を持っているかどうかで判
    断できない。
    const cf_01 = { foo: 'bar' };
    const cf_02 = { foo: 'bar' };
    cf_01 === cf_02 // => false
    const cf_03 = cf_01;
    //
    参照先が同じものは⽐較（というか同じなので）できる
    cf_03 === cf_01 // => true
    22
    22
    

    View Slide

23. つまりオブジェクトそのものが型も値も同じであるかの判定は
    別の⽅法を使⽤する必要がある。
    23
    23
    

    View Slide

24. 代替法 その1
    isEqual
    const stooge = { name: 'moe', luckyNumbers: [13, 27, 34] };
    const clone = { name: 'moe', luckyNumbers: [13, 27, 34] };
    stooge === clone;
    // => false
    _.isEqual(stooge, clone);
    // => true
    24
    24
    

    View Slide

25. 代替法 その２
    assert.deepStrictEqual
    const stooge = { name: 'moe', luckyNumbers: [13, 27, 34] };
    const clone = { name: 'moe', luckyNumbers: [13, 27, 34] };
    assert.deepStrictEqual(stooge, clone);
    // => OK
    25
    25
    

    View Slide

26. ビルトインではオブジェクトの⽐較するためのメソッドや演算
    ⼦はないため、ライブラリなどを使う。
    TypeScript を使⽤している場合はオブジェクト⾃体のIFを型で
    定義できるので Lint やコンパイル時に検出できる。
    26
    26
    

    View Slide

27. まとめ
    1つ以上のプリミティブ値を格納できるレイヤ
    複製する場合は参照渡しになる
    プロパティは動的に変更が可能
    ⽣成されたオブジェクトはコンストラクタプロパティにアク
    セスができる
    コンストラクタの判定は instanceof
    で検出できる
    オブジェクトそのものは⽐較はできない
    別途ライブラリのメソッドなどを使⽤する
    27
    27
    

    View Slide

28. 次回
    どうしようかな...
    28
    28
    

    View Slide