Now we will revisit the topic of Objects. We’re going into the deep end this time!

Remember: JavaScript is an object oriented programming language after all! Real life objects have properties and things they can do, as do JavaScript Objects.

Let’s look at a cell phone as a first example…

Properties or characteristics of a cell phone:

• Color

• Size

• Model

Methods or actions or a cell phone:

• Make calls

• Take photos

• Play music

Objects in code are very similar. Imagine a user as a JavaScript Object. If you've signed into Instagram, TikTok, Facebook, or your email, you are a user Object!

Properties or characteristics of a user Object:

• Email

• Name

• Gender

Methods or actions of a user Object:

• Login

• Logout

Another Object could be a blog Object:

Properties of a blog Object:

• Title

• Content

• Author

Methods of a blog Object:

• Publish

• Un-publish

• Delete

This is one of things that makes JavaScript so awesome: You can think of what you code in terms of real life objects and "convert" them into JavaScript Objects. But there are also built-in Objects we'll eventually use. For now let's dig into some more detail on building, modifying and using Objects throughout JavaScript.

Now it’s time for a fun exercise…

This time I want you to start some JavaScript in the browser console. Open a new tab in the browser and use F12 to access the console. Here’s a starter chunk of code you can throw into the console in Chrome:

This is a user object with properties of name, age, email and location and an array with some blog titles. When we log this Object to the Console you’ll see something interesting:

Let's break this open by clicking on the arrow to see what is inside this "Prototype":

By drilling down we’ll see constructor:Object, hasOwnProperty:,valueOF: and many more attributes. We’ll cover this more later on.

What's important to understand right now is that we can access inherent or built-in properties of an Object beyond the the ones we have given or applied to our Object ourselves. Let's access one of our properties from the Object by using dot notation:

This will (obviously) give us:

You didn’t know it but you’ve been using literal notation for Objects. Let’s review dot notation next. But first…

Now what if we want to overwrite a value of age to something else? Easy! Access the property with dot notation and enter the new/updated value:

Here I’ve updated the value of user.age to 35 instead of 20. If we log it to the console we’ll get 35 instead of 20 now! We have updated age with dot notation outside of the Object literal. The Object literal is all of that stuff in the curly braces:

There is another type of notation associated with Objects called bracket notation which we will review next. But first…

We can also use bracket notation with Objects. For example: console.log(user[“name”]); will access the name crystal as well. Try running this code in the console in Chrome:

You will get (you guessed it!): Crystal

We can then change or update a value of a key with bracket notation, like so:

This will update name from Crystal to Rian. Either form of notation will work. We will, however, mostly work with dot notation in our lessons. There is, however, another way to make an Object besides using literal notation. It's called constructor notation! We’ll cover that shortly. But first…

We utilized the new keyword in JavaScript to create an Object. Here's how it looks using the same general user Object we just made with literal notation:

Here is what is going on with the constructor “new” keyword being used to create an Object:

• This time we are creating the let variable “user” and using the keyword new followed by Object()

• There are no curly braces used, instead we use dot notation with the name of the variable followed by the property key

• Instead of a colon we use an equal sign and define the value with a semicolon at the end of each statement

We can also add as many properties and methods as we want when we create an Object using constructor notation. I'm showing you the Object constructor notation here so you know it exists but as I stated earlier, we'll stick to the literal notation for most if not all of the lessons!