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.

Vaidehi Joshi

February 26, 2019
Tweet

More Decks by Vaidehi Joshi

Other Decks in Technology

Transcript

  1. what we
    talk about
    @vaidehijoshi
    when we talk about
    the javascript
    object model

    View Slide

  2. View Slide

  3. View Slide

  4. (we’re hiring!)

    View Slide

  5. {}

    View Slide

  6. let cat = {};

    View Slide

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

    View Slide

  8. cat.sound

    View Slide

  9. cat.sound
    cat[“sound”]

    View Slide

  10. View Slide

  11. property
    descriptors

    View Slide

  12. meta objects for all the
    properties on an object

    View Slide

  13. meta objects for all the
    properties on an object

    View Slide

  14. cat.sound

    View Slide

  15. Object.getOwnPropertyDescriptor(
    cat,
    “sound”
    );
    cat.sound

    View Slide

  16. Object.getOwnPropertyDescriptor(
    cat,
    “sound”
    ); {
    value: "meow",
    writable: true,
    enumerable: true,
    configurable: true
    }
    cat.sound

    View Slide

  17. {
    value: "meow",
    writable: true,
    enumerable: true,
    configurable: true
    }

    cat.sound

    View Slide

  18. {
    value: "meow",
    writable: true,
    enumerable: true,
    configurable: true
    }
    cat.sound

    View Slide

  19. value
    writable
    cat.sound

    View Slide

  20. value
    writable
    cat.sound
    data property

    View Slide

  21. data property

    View Slide

  22. data property
    has a value, which might
    be editable

    View Slide

  23. data property

    View Slide

  24. data property
    object
    string
    number

    View Slide

  25. let cat = {
    sayHi: function() {
    return “Hi!”;
    }
    };

    View Slide

  26. let cat = {
    sayHi: function() {
    return “Hi!”;
    }
    };
    cat.sayHi = function() {
    return “No, I will not say hi.
    I am a cat.”;
    };

    View Slide

  27. Object.getOwnPropertyDescriptor(
    cat,
    “sayHi”
    );
    {
    value: ƒ(),
    writable: true,
    enumerable: true,
    configurable: true
    }

    View Slide

  28. cat.sound

    View Slide

  29. {
    value: "meow",
    writable: true,
    enumerable: true,
    configurable: true
    }
    cat.sound

    View Slide

  30. enumerable
    configurable

    View Slide

  31. enumerable
    configurable

    View Slide

  32. enumerable
    configurable
    for…in

    View Slide

  33. enumerable
    configurable
    for…in
    Object.keys()

    View Slide

  34. enumerable
    configurable

    View Slide

  35. View Slide

  36. getters &
    setters

    View Slide

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

    View Slide

  38. let cat = {
    sound: “meow”,
    };
    get loudSound() {
    return this.sound.toUppercase() + Math.random();
    }

    View Slide

  39. let cat = {
    sound: “meow”,
    };
    get loudSound() {
    return this.sound.toUppercase() + Math.random();
    }

    View Slide

  40. Object.getOwnPropertyDescriptor(
    cat,
    “loudSound”
    );

    View Slide

  41. Object.getOwnPropertyDescriptor(
    cat,
    “loudSound”
    );
    {
    get: ƒ(),
    set: undefined,
    enumerable: true,
    configurable: true
    }

    View Slide

  42. get
    set
    cat.loudSound

    View Slide

  43. get
    set
    accessor property
    cat.loudSound

    View Slide

  44. accessor property

    View Slide

  45. has a pair of getter +
    setter functions
    accessor property

    View Slide

  46. accessor property

    View Slide

  47. set ƒ()
    accessor property

    View Slide

  48. set ƒ()
    get ƒ()
    accessor property

    View Slide

  49. get loudSound() {
    return this.sound.toUppercase() + Math.random();
    }

    View Slide

  50. cat.loudSound()
    > "MEOW0.2812205663401923"
    get loudSound() {
    return this.sound.toUppercase() + Math.random();
    }

    View Slide

  51. cat.loudSound()
    > "MEOW0.2812205663401923"
    get loudSound() {
    return this.sound.toUppercase() + Math.random();
    }
    cat.loudSound()
    > "MEOW0.41972556946839834"

    View Slide

  52. cat.loudSound()
    > "MEOW0.2812205663401923"
    get loudSound() {
    return this.sound.toUppercase() + Math.random();
    }
    cat.loudSound()
    > "MEOW0.41972556946839834"
    cat.loudSound()
    > “MEOW0.5109470702014649"

    View Slide

  53. cat.loudSound
    > "MEOW0.2812205663401923"
    cat.loudSound
    > "MEOW0.41972556946839834"
    cat.loudSound
    > “MEOW0.5109470702014649"

    View Slide

  54. data property
    accessor property

    View Slide

  55. extensible

    View Slide

  56. new properties can be
    added to the object
    extensible

    View Slide

  57. enumerable
    configurable

    View Slide

  58. no removing or adding of
    properties, but continue to write

    View Slide

  59. no removing or adding of
    properties, but continue to write
    Object.seal()

    View Slide

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

    View Slide

  61. let cat = { sound: “meow” };
    Object.seal(cat);

    View Slide

  62. let cat = { sound: “meow” };
    Object.seal(cat);
    {
    configurable: false,
    enumerable: true,
    value: “meow”,
    writable: true
    }

    View Slide

  63. no removing or adding of
    properties and no writing to
    properties, either!

    View Slide

  64. no removing or adding of
    properties and no writing to
    properties, either!
    Object.freeze()

    View Slide

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

    View Slide

  66. let cat = { sound: “meow” };
    Object.freeze(cat);

    View Slide

  67. let cat = { sound: “meow” };
    Object.freeze(cat);
    {
    configurable: false,
    enumerable: true,
    value: “meow”,
    writable: false
    }

    View Slide

  68. Object.freeze(cat);

    View Slide

  69. Object.freeze(cat);
    A getter’s value isn’t going to be frozen

    View Slide

  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

    View Slide

  71. enumerable

    View Slide

  72. only an object’s own
    properties are enumerable*

    View Slide

  73. only an object’s own
    properties are enumerable*
    *its parent’s (prototype)
    properties will not be enumerable

    View Slide

  74. Object.
    getOwnPropertyDescriptors([])
    {
    length: {
    value: 0,
    writable: true,
    enumerable: false,
    configurable: false
    },
    __proto__: Object
    }

    View Slide

  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!

    View Slide

  76. objects are complex!

    View Slide

  77. objects are complex!
    but also super cool

    View Slide

  78. objects are complex!
    but also super cool
    don’t be afraid to peek under the
    hood at how they work!

    View Slide

  79. @vaidehijoshi
    thank you!

    View Slide

  80. @vaidehijoshi

    thank you!

    View Slide

  81. @vaidehijoshi

    thank you!
    basecs.org

    View Slide

  82. baseds.org
    @vaidehijoshi

    thank you!
    basecs.org

    View Slide