JavaScript のデータ型を見てみようという内容。今回はオブジェクトの解説です。
JavaScript を書き始める前に知っておきたい JavaScript のこと #05Kanazawa.jsRemote Meetup #06千葉 弘太郎11
View Slide
千葉 弘太郎(ちば こうたろう)Kotaro ChibaTwitter: @ur_uhaGithub: uruhaWork: DMM.com LLC22
前回JavaScript を書き始める前に知っておきたいJavaScript のこと #04JavaScript の データ型 について知ろう(プリミティブ型編) !33
今回JavaScript の データ型 について知ろう(オブジェクト編) !44
おさらい55
プリミティブ型StringNumberBoolenUndefinedNullSymbol (ES6~)BigInt (ES10~ new)Object<= 今⽇はこれ66
オブジェクト (複合型)1つ以上のプリミティブ値を格納できるレイヤ。プリミティブ値と違い、メモリサイズを特定できない。複合オブジェクト 参照型 とも呼ばれる。77
const myObject = {num: 1,text: 'Yes!プリキュア!',isTrue: false,nullpo: null,// ...};88
「複合」はわかるけど、なぜ「参照」99
const obj_01 = {};const obj_02 = obj_01;obj_01.foo = 1;console.log(obj_01.foo, obj_02.foo);// => 1, 11010
1111
⽣成されたオブジェクトを操作する場合、オブジェクトのコピーは値をコピーするのではなく、「参照先」をコピーする。cf. プリミティブ値は値そのものが渡される1212
また、オブジェクトのプロパティは動的に更新が可能。参照先を共有しているオブジェクト⾃体のプロパティが更新されると全てのオブジェクトのプロパティが更新される。1313
オブジェクト⽣成時の特徴1414
オブジェクトの⽣成時には constructorプロパティにアクセスできるようになる(プリミティブ値も同じ)constructorプロパティの特定は instanceof演算⼦で判定できる1515
オブジェクトにはネイティブコンストラクタを持つオブジェクトがいくつか存在する。1616
ObjectArrayFuncitonDateErrorRegExp1717
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;// =>上記と結果が同じネイティブコンストラクタはリテラルでも⽣成できる。1818
プリミティブ値とネイティブコンストラクタは別物。配列などはプリミティブ値でないため注意!(意外に知らないで判定を⾏う⼈が多い)typeof Arrayは存在しない1919
ただ、 instanceofは iframeでは動作しないため、Arrayなどの判定は instanceofよりArray.isArray()が推奨されている。2020
⽐較について2121
オブジェクト⾃体の⽐較は、⽐較対象のオブジェクトが「同じ型」で「同じ(プロパティの)値」を持っているかどうかで判断できない。const cf_01 = { foo: 'bar' };const cf_02 = { foo: 'bar' };cf_01 === cf_02 // => falseconst cf_03 = cf_01;//参照先が同じものは⽐較(というか同じなので)できるcf_03 === cf_01 // => true2222
つまりオブジェクトそのものが型も値も同じであるかの判定は別の⽅法を使⽤する必要がある。2323
代替法 その1isEqualconst stooge = { name: 'moe', luckyNumbers: [13, 27, 34] };const clone = { name: 'moe', luckyNumbers: [13, 27, 34] };stooge === clone;// => false_.isEqual(stooge, clone);// => true2424
代替法 その2assert.deepStrictEqualconst stooge = { name: 'moe', luckyNumbers: [13, 27, 34] };const clone = { name: 'moe', luckyNumbers: [13, 27, 34] };assert.deepStrictEqual(stooge, clone);// => OK2525
ビルトインではオブジェクトの⽐較するためのメソッドや演算⼦はないため、ライブラリなどを使う。TypeScript を使⽤している場合はオブジェクト⾃体のIFを型で定義できるので Lint やコンパイル時に検出できる。2626
まとめ1つ以上のプリミティブ値を格納できるレイヤ複製する場合は参照渡しになるプロパティは動的に変更が可能⽣成されたオブジェクトはコンストラクタプロパティにアクセスができるコンストラクタの判定は instanceofで検出できるオブジェクトそのものは⽐較はできない別途ライブラリのメソッドなどを使⽤する2727
次回どうしようかな...2828