Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Kotaro Chiba
September 26, 2020

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

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

Kotaro Chiba

September 26, 2020
Tweet

More Decks by Kotaro Chiba

Other Decks in Technology

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. 11
    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. 代替法 その2
    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