What we talk about when we talk about the javascript object model (donutJS)

If you've ever used JavaScript, you've probably created an object at some point. JavaScript's object model is used by many, but perhaps understood by few. In this talk, we'll explore the inner workings & hidden properties of JS objects, as well as how to interact with them, and why they even matter.

Transcript

1. what we talk about @vaidehijoshi when we talk about the javascript object model
4. (we’re hiring!)
5. {}
6. let cat = {};
7. let cat = { sound: “meow” };
8. cat.sound
9. cat.sound cat[“sound”]
11. property descriptors
12. meta objects for all the properties on an object
13. meta objects for all the properties on an object
14. cat.sound
15. Object.getOwnPropertyDescriptor( cat, “sound” ); cat.sound
16. Object.getOwnPropertyDescriptor( cat, “sound” ); { value: "meow", writable: true, enumerable: true, configurable: true } cat.sound
17. { value: "meow", writable: true, enumerable: true, configurable: true } cat.sound
18. { value: "meow", writable: true, enumerable: true, configurable: true } cat.sound
19. value writable cat.sound
20. value writable cat.sound data property
21. data property
22. data property has a value, which might be editable
23. data property
24. data property object string number
25. let cat = { sayHi: function() { return “Hi!”; } };
26. let cat = { sayHi: function() { return “Hi!”; } }; cat.sayHi = function() { return “No, I will not say hi. I am a cat.”; };
27. Object.getOwnPropertyDescriptor( cat, “sayHi” ); { value: ƒ(), writable: true, enumerable: true, configurable: true }
28. cat.sound
29. { value: "meow", writable: true, enumerable: true, configurable: true } cat.sound
30. enumerable configurable
31. enumerable configurable
32. enumerable configurable for…in
33. enumerable configurable for…in Object.keys()
34. enumerable configurable
36. getters & setters
37. let cat = { sound: “meow”, };
38. let cat = { sound: “meow”, }; get loudSound() { return this.sound.toUppercase() + Math.random(); }
39. let cat = { sound: “meow”, }; get loudSound() { return this.sound.toUppercase() + Math.random(); }
40. Object.getOwnPropertyDescriptor( cat, “loudSound” );
41. Object.getOwnPropertyDescriptor( cat, “loudSound” ); { get: ƒ(), set: undefined, enumerable: true, configurable: true }
42. get set cat.loudSound
43. get set accessor property cat.loudSound
44. accessor property
45. has a pair of getter + setter functions accessor property
46. accessor property
47. set ƒ() accessor property
48. set ƒ() get ƒ() accessor property
49. get loudSound() { return this.sound.toUppercase() + Math.random(); }
50. cat.loudSound() > "MEOW0.2812205663401923" get loudSound() { return this.sound.toUppercase() + Math.random(); }
51. cat.loudSound() > "MEOW0.2812205663401923" get loudSound() { return this.sound.toUppercase() + Math.random(); } cat.loudSound() > "MEOW0.41972556946839834"
52. cat.loudSound() > "MEOW0.2812205663401923" get loudSound() { return this.sound.toUppercase() + Math.random(); } cat.loudSound() > "MEOW0.41972556946839834" cat.loudSound() > “MEOW0.5109470702014649"
53. cat.loudSound > "MEOW0.2812205663401923" cat.loudSound > "MEOW0.41972556946839834" cat.loudSound > “MEOW0.5109470702014649"
54. data property accessor property
55. extensible
56. new properties can be added to the object extensible
57. enumerable configurable
58. no removing or adding of properties, but continue to write
59. no removing or adding of properties, but continue to write Object.seal()
60. let cat = { sound: “meow” };
61. let cat = { sound: “meow” }; Object.seal(cat);
62. let cat = { sound: “meow” }; Object.seal(cat); { configurable: false, enumerable: true, value: “meow”, writable: true }
63. no removing or adding of properties and no writing to properties, either!
64. no removing or adding of properties and no writing to properties, either! Object.freeze()
65. let cat = { sound: “meow” };
66. let cat = { sound: “meow” }; Object.freeze(cat);
67. let cat = { sound: “meow” }; Object.freeze(cat); { configurable: false, enumerable: true, value: “meow”, writable: false }
68. Object.freeze(cat);
69. Object.freeze(cat); A getter’s value isn’t going to be frozen
70. Object.freeze(cat); A getter’s value isn’t going to be frozen Properties that have other objects as their value need to be frozen
71. enumerable
72. only an object’s own properties are enumerable*
73. only an object’s own properties are enumerable* *its parent’s (prototype) properties will not be enumerable
74. Object. getOwnPropertyDescriptors([]) { length: { value: 0, writable: true, enumerable: false, configurable: false }, __proto__: Object }
75. Object. getOwnPropertyDescriptors([]) { length: { value: 0, writable: true, enumerable: false, configurable: false }, __proto__: Object } we don’t want these to show up in a loop!
76. objects are complex!
77. objects are complex! but also super cool
78. objects are complex! but also super cool don’t be afraid to peek under the hood at how they work!
79. @vaidehijoshi thank you!
80. @vaidehijoshi thank you!
81. @vaidehijoshi thank you! basecs.org
82. baseds.org @vaidehijoshi thank you! basecs.org