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

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

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