JS Object Model (Angular PDX)

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
2. (we’re hiring!)
3. {}
4. let cat = {};
5. let cat = { sound: “meow” };
6. cat.sound cat[“sound”]
7. property descriptors
8. meta objects for all the properties on an object
9. Object.getOwnPropertyDescriptor( cat, “sound” ); { value: "meow", writable: true, enumerable: true, configurable: true } cat.sound
10. { value: "meow", writable: true, enumerable: true, configurable: true } cat.sound
11. { value: "meow", writable: true, enumerable: true, configurable: true } cat.sound
12. value writable cat.sound data property
13. data property has a value, which might be editable
14. data property object string number
15. let cat = { sayHi: function() { return “Hi!”; } }; cat.sayHi = function() { return “No, I will not say hi. I am a cat.”; };
16. Object.getOwnPropertyDescriptor( cat, “sayHi” ); { value: ƒ(), writable: true, enumerable: true, configurable: true }
17. { value: "meow", writable: true, enumerable: true, configurable: true } cat.sound
18. enumerable configurable
19. enumerable configurable for…in Object.keys()
20. enumerable configurable
21. getters & setters
22. let cat = { sound: “meow”, }; get loudSound() { return this.sound.toUppercase() + Math.random(); }
23. Object.getOwnPropertyDescriptor( cat, “loudSound” ); { get: ƒ(), set: undefined, enumerable: true, configurable: true }
24. get set accessor property cat.loudSound
25. has a pair of getter + setter functions accessor property
26. set ƒ() get ƒ() accessor property
27. cat.loudSound() > "MEOW0.2812205663401923" get loudSound() { return this.sound.toUppercase() + Math.random(); } cat.loudSound() > "MEOW0.41972556946839834" cat.loudSound() > “MEOW0.5109470702014649"
28. cat.loudSound > "MEOW0.2812205663401923" cat.loudSound > "MEOW0.41972556946839834" cat.loudSound > “MEOW0.5109470702014649"
29. data property accessor property
30. new properties can be added to the object extensible
31. enumerable configurable
32. no removing or adding of properties, but continue to write Object.seal()
33. let cat = { sound: “meow” }; Object.seal(cat); { configurable: false, enumerable: true, value: “meow”, writable: true }
34. no removing or adding of properties and no writing to properties, either! Object.freeze()
35. let cat = { sound: “meow” }; Object.freeze(cat); { configurable: false, enumerable: true, value: “meow”, writable: false }
36. 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
37. enumerable
38. only an object’s own properties are enumerable* *its parent’s (prototype) properties will not be enumerable
39. Object. getOwnPropertyDescriptors([]) { length: { value: 0, writable: true, enumerable: false, configurable: false }, __proto__: Object } we don’t want these to show up in a loop!
40. When possible, use Reflect, not Object! Reflect
42. objects are complex! but also super cool don’t be afraid to peek under the hood at how they work!
43. baseds.org @vaidehijoshi thank you! basecs.org