Understanding, Creating and Using JavaScript Objects

Do you ever find yourself struggling to understand a concept in JavaScript? I know I have…. too many times to count. For me, one of those difficult concepts was the idea of JavaScript objects.

Understanding objects is an essential part of learning the JavaScript programming language. According to W3Schools,

‘In JavaScript, almost “everything” is an object.’

If you’d like to understand JavaScript objects a bit better, then this article might just be for you. I’d like to talk a little bit about two ways to create JavaScript objects, as well as a couple of the many ways you can use them.

Let’s start unpacking this little thing we call a JavaScript object….

According to Mozilla Developer Network, a JavaScript object is….

“a collection of properties, and a property is an association between a name (or key) and a value. A property’s value can be a function, in which case the property is known as a method.”

Let me give you an analogy. Imagine a JavaScript object is like your favorite pair of shoes. Let’s give this pair of shoes a name. How about ‘myFaveShoes’?

This pair of shoes also has some attributes — a brand, a size and a color. In a JavaScript object, we’d call those attributes ‘properties’. The color, size and brand of your shoes would determine the ‘value’ of each of those properties in a JavaScript object.

The value of JavaScript object properties can be a string, a boolean, a number, a function and much more.

There are two ways to create a JavaScript object. One way is using what we call the ‘object constructor’. The other is using ‘object literal’.

Let’s take a look at a JavaScript object I created. The first example is using object literal and the second is using the object constructor.

Object Literal

Below I’ve created a JavaScript object in a variable (‘const’) called ‘myFaveShoes’. My real life favorite shoes happen to be a pair of red Converse shoes in a size 8.5. I’ve gone ahead and given those ‘values’ to the brand, size and color ‘properties’.

In our example, two of these properties have string values and one has a number. As you can see, I’ve also added a property of ‘worn’ and given it a Boolean value of ‘true’ for good measure.

What makes this ‘object literal’ is the fact that I’m using literal notation. This means I’m initializing the object with curly brackets and separating all the properties by commas within those brackets.

const myFaveShoes = {
brand: “Converse”,
size: 8.5,
color: “red”,
worn: true
};

The Object Constructor

In this example, I am initializing a JavaScript object using the object constructor. Let’s see how that looks first. After that, we’ll talk about how it works.

const myFaveShoes = new Object();
myFaveShoes.brand = “Converse”;
myFaveShoes.size = 8.5;
myFaveShoes.color = “red”;
myFaveShoes.worn = true;

This method does the exact same thing as object literal. Both methods create an object called ‘myFaveShoes’ and give it the properties ‘brand’, ‘size’, ‘color’ and ‘worn’. The properties of both example objects are assigned their appropriate values.

The object constructor uses the keyword ‘new’ to create a new JavaScript object.

Object literal is the method you’ll see most often in JavaScript. I prefer this method because its easier to write, easier to read and in general just makes more sense.

Accessing Information Inside an Object

Now that we know a couple of ways to create JavaScript objects, let’s have some fun learning how to access the information held inside. Many times when working with APIs, you’ll have to pull information from an object like the object literal we created above. There are many other uses for JavaScript objects, APIs are just one example.

Let’s look at an example where we’re creating a short paragraph all about our favorite pair of shoes. We’ll use the information stored in our object to create some sentences that say, “I love my red Converse.” , “ I wear size 8.5.” and “True, they are worn out.” We’ll log our sentence to the console so we can see our code in action.

As a reminder, here’s what our object looks like.

const myFaveShoes = {
brand: “Converse”,
size: 8.5,
color: “red”,
worn: true
};

Here’s how we might go about accessing the properties in our object to extract the values….

console.log(“I love my ” + myFaveShoes.color + “ ” + myFaveShoes.brand + “.”, “I wear size ” + myFaveShoes.size + “.”, myFaveShoes.worn + “, they are worn out.”);

If you’d like to take a look at this in your favorite code editor, feel free to copy and paste. However, if you’re using Codepen, you’ll have to type it yourself or at least retype the quotes (“”). I discovered the quotes don’t format correctly when copying from Medium into Codepen.

So what exactly did we do here? We logged various strings to the console. But instead of typing out “red”, “Converse”, 8.5 for size and ‘true’, we accessed the information in our object using the variable name, then the dot operator (.), then the property name.

In the console, the values of each of these properties within the our object are returned to us, completing the sentence. Simple enough right?

But what if we had more than one favorite pair of shoes? How could we write that in code? Building on our last example, we could create two separate objects, but that isn’t the most efficient way. Here’s one way we could accomplish this inside the same JavaScript object.

const myFaveShoes = {
pairOne: {
brand: “Converse”,
size: 8.5,
color: “red”,
worn: true
},
pairTwo: {
brand: “Hush Puppies”,
size: 8.5,
color: “blue”,
type: “sandals”
}
};

What exactly is going on here? Inside our original object we’ve created two more objects. These internal objects hold the information about two of my favorite pairs of shoes.

So you might be wondering, we can store JavaScript objects within objects? That’s right, we can!

So how would we access the information stored in these objects within an object now? Here’s an example…

console.log(“I love my “ + myFaveShoes.pairTwo.color + “ “ + myFaveShoes.pairTwo.brand + “ “ + myFaveShoes.pairTwo.type + “.”, “I wear size “ + myFaveShoes.pairTwo.size);
console.log(“I love my “ + myFaveShoes.pairOne.color + “ “ + myFaveShoes.pairOne.brand + “.”, “I wear size “ + myFaveShoes.pairOne.size + “.”, myFaveShoes.pairOne.worn + “, they are worn out.”);

As you can see, we’ve accessed the information about each pair of shoes by calling out the name of the parent object, ‘myFaveShoes’. Next we see the dot operator (.), followed by the name of the one of the objects inside, ‘pairOne’ or ‘pairTwo’. Now, we see another dot operator. Finally, we call the property holding the appropriate value we need.

If you input this code into a code editor and look at it in the console in your browser, you can see the result. We are now logging two different paragraphs to the console about my favorite pairs of shoes.

In reality, I could have used only one console.log() for everything, but for clarity, I chose to use two.

These are just a couple of ways you can build and use JavaScript objects. I hope that this post has helped you to understand the concept of objects. If you’d like to learn more, try out Free Code Camp’s Basic JavaScript exercises. Another curriculum I’d highly recommend for basic JavaScript, HTML and CSS exercises is called Dash by General Assembly. With these resources, you’ll gain useful insight into the world of objects and basic JavaScript.

Thanks so much for reading!