$30 off During Our Annual Pro Sale. View Details »

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.

Vaidehi Joshi

April 18, 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. (we’re hiring!)

    View Slide

  3. {}

    View Slide

  4. let cat = {};

    View Slide

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

    View Slide

  6. cat.sound
    cat[“sound”]

    View Slide

  7. property
    descriptors

    View Slide

  8. meta objects for all the
    properties on an object

    View Slide

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

    View Slide

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

    cat.sound

    View Slide

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

    View Slide

  12. value
    writable
    cat.sound
    data property

    View Slide

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

    View Slide

  14. data property
    object
    string
    number

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  18. enumerable
    configurable

    View Slide

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

    View Slide

  20. enumerable
    configurable

    View Slide

  21. getters &
    setters

    View Slide

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

    View Slide

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

    View Slide

  24. get
    set
    accessor property
    cat.loudSound

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  29. data property
    accessor property

    View Slide

  30. new properties can be
    added to the object
    extensible

    View Slide

  31. enumerable
    configurable

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  37. enumerable

    View Slide

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

    View Slide

  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!

    View Slide

  40. When possible, use Reflect, not Object!
    Reflect

    View Slide

  41. View Slide

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

    View Slide

  43. baseds.org
    @vaidehijoshi

    thank you!
    basecs.org

    View Slide