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

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

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

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

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

おさらい 5 5

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

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

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

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

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

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

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

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

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

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

Object Array Funciton Date Error RegExp 17 17

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

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

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

⽐較について 21 21

オブジェクト⾃体の⽐較は、⽐較対象のオブジェクトが「同じ型」で「同じ（プロパティの）値」を持っているかどうかで判断できない。 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

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

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

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

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

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

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

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

Kotaro Chiba

More Decks by Kotaro Chiba

Other Decks in Technology

Featured

Transcript