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

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

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.

53f67e3899c7ca2ca340b795cf80d3c4?s=128

Vaidehi Joshi

February 26, 2019
Tweet

Transcript

  1. what we talk about @vaidehijoshi when we talk about the

    javascript object model
  2. None
  3. None
  4. (we’re hiring!)

  5. {}

  6. let cat = {};

  7. let cat = { sound: “meow” };

  8. cat.sound

  9. cat.sound cat[“sound”]

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

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