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.

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