JavaScript Objects: A Guide

While lists are a useful method of storing data, they are inconvenient to use when you want to store multiple properties about a specific object in the list. For instance, if you want to store data on all the cookies sold at a cookie store, you’d need to create multiple lists to store the data.

That’s where objects come in. Objects allow you to store data in name:value pairs, which means you can add labels to the data you have stored in your application.

In this guide, we’re going to discuss what objects are and how you can use them in your code. We’ll talk about creating objects, modifying objects and deleting objects in the JavaScript programming language.

What is an Object?

An object is a data type in JavaScript. It is made up of zero or more names and values, which are paired together. Each name acts as a label for a value. This means that if you want to access a particular value in an object, all you have to do is reference its label. Names are sometimes referred to as “keys”.

A value can contain any type of data, whether it’s a string, a number or another object. Values can also contain properties and methods, which are functions that apply to a particular object.

Keys and values are mapped together to create a key:value pair in a JS object.

JavaScript objects are the concept upon which JSON (which stands for JavaScript Object Notation) was built. While JSON is slightly different from JavaScript, both of these data structures use the name:value pair approach to store data.

How to Create an Object

There are two ways you can create an object. You can use the object constructor approach or declare an object literal.

The object constructor uses the “new” keyword to create a new object:

const cookie = new Object();

This creates an empty object to which we can add values. We can also declare an object using an object literal, which is simply a set of curly brackets:

const cookie = {};

In both of these examples we have created an empty object. You’ll find these methods used interchangeably in JavaScript applications. The object literal method is perhaps more common on account of its simplicity; you only need to create a set of curly brackets.

To create an object with data, we can use the object literal syntax:

const raspberry_white_choc = {
	name: "Raspberry White Chocolate Chip",
	price: 1.50,
	available: true,
	stock: 42
}

This object contains four names and values. For instance, the label “price” is associated with the floating-point number 1.50. The label “available” is associated with the boolean value “true”.

How to Read an Object

So far we’ve discussed how to create an object, but an object is not much use if you can’t access its contents. There are two ways to read the contents of an object. You can use either dot notation (.) or bracket notation ([]).

Let’s say we want to retrieve the name of our chocolate chip cookie. We could do so using this code:

console.log(raspberry_white_choc.name);

This code returns: Raspberry White Chocolate Chip. In our example, we have referenced the name of our object – “raspberry_white_choc” – followed by a dot, then the name of the property whose value we want to retrieve. This is why it’s called dot notation. There is a dot between the object and property name.

You can also use bracket notation to read an object:

console.log(raspberry_white_choc["available"]);

Our code returns: true. Bracket notation is where you specify the name of an object, then the name of the value you want to retrieve. The name of the value you want to retrieve should be enclosed in quotation marks, then square brackets.

How to Modify an Object

There are three possible ways in which you can modify an object:

• Add items to an object
• Modify existing object items
• Remove items from an object

Let’s discuss these one-by-one, with reference to our cookie example from earlier.

Add Items to an Object

Unlike lists, there is no push() or append() function you can use to add a value to an object. All you have to do is assign a new value to a property using the assignment operator.

Let’s say that we want to add the value “gluten_free” to our object. We could do so using either of the following statements:

// Using bracket notation
raspberry_white_choc["gluten_free"] = false;
console.log(raspberry_white_choc.gluten_free);
// Using dot notation
raspberry_white_choc.gluten_free = false;
console.log(raspberry_white_choc.gluten_free);

Our code returns:

false
false

In both of these examples, we’ve created a new item in our object called “gluten_free”. The value we have assigned this item is “false”.

Modify Existing Object Items

Changing the contents of an object works in the same way as assigning new values to an object. Both methods use the assignment operator to modify the object.

Suppose we have changed our recipe for the raspberry white chocolate chip cookie and it is now gluten free. We could change the “gluten_free” item in our object using this code:

raspberry_white_choc.gluten_free = true;
console.log(raspberry_white_choc.gluten_free);

Our code returns: true. You could also use bracket notation to make such a change, if you prefer.

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

Find Your Bootcamp Match

Remove Items from an Object

The “delete” keyword allows you to remove a property from an object. The following code allows us to delete the “gluten_free” property from our object:

delete raspberry_white_choc.gluten_free;
console.log(raspberry_white_choc);

Our code returns:

{ available: true, name: "Raspberry White Chocolate Chip", price: 1.5, stock: 42 }

As you can see, the name “gluten_free” is no longer present in our object. That’s because we used the delete keyword to remove it.

Conclusion

The JavaScript object structure makes it easy to store related data. In this article, we talked about how an object could store information on a cookie for a cookie store. We could have also used an object to store user accounts, recipes at a bakery or calendar engagements.