Quick Notes Based On "Objects" Section of Frontend Masters' "Complete Intro to Web Development, v2"
Tags: javascript, fundamentals, objects, frontendmasters
Published: 2021-08-15 15:20:18

What I did:

&nbsp;&nbsp;&nbsp; `person = {`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `firstName: 'Benjamin',`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `lastName: 'Boorstein',`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `nickname: 'Ben',`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `state: 'SC',`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `country: 'USA',`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `favoriteNumber: 8,`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `favoriteDessert: 'The Franklin Fountain\'s Mt. Vesuvius',`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `favoriteThingMomMade: 'Potato latkes'`
&nbsp;&nbsp;&nbsp; `}`

> What is just above is an 'object'. Objects can be thought of as collections. The name of this object is `person`. Within `person`'s curly braces are several 'key-value pairs'. `firstName` is an example of a 'key' and `'Benjamin'` is the 'value' associated with the `firstName` 'key'. The way to access `'Benjamin'` is `person`.`firstName`. Also notice that there is a `,` after every value in the object except for the final value. This is required.

&nbsp;&nbsp;&nbsp; `console.log(person)` // the whole `person` object
&nbsp;&nbsp;&nbsp; `console.log(person.state)` // SC
&nbsp;&nbsp;&nbsp; `console.log(person['state'])` // SC

> A more complex example:

&nbsp;&nbsp;&nbsp; `people = {`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `person1: {`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `firstName: 'Jim',`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `lastName: 'Beam'`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `},`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `person2: {`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `firstName: 'Michael',`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `lastName: 'Jordan',`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `knownAs: 'Jordan',`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `greatDefenderToo: true,`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `basketballJerseyNumbers: [23, 45, 12],`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `baseballJerseyNumber: 45,`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `theBest() {`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `return 'Jordan is the best.'`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `}`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `},`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `person3: {`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `firstName: 'Dave',`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `lastName: 'Weckl'`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `}`
&nbsp;&nbsp;&nbsp; `}`

&nbsp;&nbsp;&nbsp; `console.log(people)` // the whole `people` object
&nbsp;&nbsp;&nbsp; `console.log(people.person2)` // the whole `person2` object
&nbsp;&nbsp;&nbsp; `console.log(people.person2.theBest())` // Jordan is the best.
&nbsp;&nbsp;&nbsp; `console.log(people.person3.lastName)` // Weckl

> What does the above example (the `people` object) teach us about objects in general?
>> We can nest objects. (And note that we can do this many many times even though here it's only done once.)

>> Within an object can be values of many different data types, exemplified in the `people` object's `person2` object, in which we have three string values, one boolean value, one array value, one number value, and one function. If the data type at `people`.`person2`.`basketballJerseyNumbers` is unfamilar to you, that is the 'array' referenced in the previous sentence. I may make a post about arrays another time.

> About the value at `people`.`person2`.`theBest()`:
>> One of the coolest things about objects (at least that I know of) is that they can store functions.
>>> `theBest()` is a function, and if the syntax seems confusing, it could have been written as `theBest: function()`. So yes, `theBest` is the 'key' and what comes after it is the value associated with it. Brian Holt (the instructor) states that there is one small difference between these two ways of writing it but that it's not a significant enough difference to discuss at this point.

> A couple other things to bear in mind:
>> We can only repeat key names in an object if each of these identical key names is in its own nested object. So you can see that within the `people` object, the `firstName` key name, for example, is used three times, but it still works because each time it's used it's in its own nested object.

>> Unlike with key names, we can repeat values within one object, as you can see with `'Jordan'` appearing as a value twice within the `person2` object.

>> People will often use "function" and "method" interchangeably when talking about functions in the context of objects. Just note that a method is the name for a function when the function is on an object. So, for example, I technically should have referred to `theBest()` as a "method" instead of as a "function". 

What I learned:
- I learned that there is a small difference between writing `theBest()` and `theBest: function()`.

What I still might not understand:
- What I described just above, under "What I learned:".