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
   

   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