Quick Notes Based On "Objects" Section of Frontend Masters' "Complete Intro to Web Development, v2"

#javascript #fundamentals #objects #frontendmasters

What I did:

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

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.

    console.log(person) // the whole person object
    console.log(person.state) // SC
    console.log(person['state']) // SC

A more complex example:

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

    console.log(people) // the whole people object
    console.log(people.person2) // the whole person2 object
    console.log(people.person2.theBest()) // Jordan is the best.
    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".