Skip to main content
X

Explore your training options in 10 minutes

JavaScript Tutorials

JavaScript Objects: A Guide

James Gallagher - December 29, 2020


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.

Get offers and scholarships from top coding schools illustration

Find Your Bootcamp Match

  • Career Karma matches you with top tech bootcamps
  • Access exclusive scholarships and prep courses










By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

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 ([]).

Venus, a software engineer at Rockbot

"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

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.

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.

About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.

What's Next?

James Gallagher

About the author: James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others. He also serves as a researcher at Career Karma, publishing comprehensive reports on the bootcamp market.

Skip to main content