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

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

A85bfbcb7db07e936c0125487e7799fa?s=47 Kotaro Chiba
September 26, 2020

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

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

A85bfbcb7db07e936c0125487e7799fa?s=128

Kotaro Chiba

September 26, 2020
Tweet

Transcript

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

    #06 千葉 弘太郎 1 1
  2. 千葉 弘太郎(ちば こうたろう) Kotaro Chiba Twitter: @ur_uha Github: uruha Work:

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

    編) ! 3 3
  4. 今回 JavaScript の データ型 について知ろう(オブジェクト 編) ! 4 4

  5. おさらい 5 5

  6. プリミティブ型 String Number Boolen Undefined Null Symbol (ES6~) BigInt (ES10~

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

  8. const myObject = { num: 1, text: 'Yes! プリキュア!', isTrue:

    false, nullpo: null, // ... }; 8 8
  9. 「複合」はわかるけど、なぜ「参照」 9 9

  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
  11. 11 11

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

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

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

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

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

  17. Object Array Funciton Date Error RegExp 17 17

  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
  19. プリミティブ値とネイティブコンストラクタは別物。 配列などはプリミティブ値でないため注意!(意外に知らない で判定を⾏う⼈が多い) typeof Array は存在しない 19 19

  20. ただ、 instanceof は iframe では動作しないため、 Array などの判定は instanceof より Array.isArray()

    が推奨されている。 20 20
  21. ⽐較について 21 21

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

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

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

    別途ライブラリのメソッドなどを使⽤する 27 27
  28. 次回 どうしようかな... 28 28