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.
81% of participants stated they felt more confident about their tech job prospects after attending a bootcamp. Get matched to a bootcamp today.
The average bootcamp grad spent less than six months in career transition, from starting a bootcamp to finding their first job.
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.
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.