Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JS Object Model (Angular PDX)

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.

53f67e3899c7ca2ca340b795cf80d3c4?s=128

Vaidehi Joshi

April 18, 2019
Tweet

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

  41. None
  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