Skip to content
Gallery
JS Fundamentals: Objects, Arrays, and Functions
Share
Explore
Objects & Arrays

icon picker
Objects

What is an object?


var obj = {};
Let's get started with objects. Objects are the most important data structure to understand in the JavaScript language. Whenever you are trying to learn a data structure — whether it is the native JavaScript data structures like an object or an array or a more computer science-y data structures like trees there are a few things you should make sure you master.
First, you should seek to understand the CRUD operations. You may have seen that acronym for when describing an API, but it is just as important when trying to understand the basic operations for a data structure. The C stands for “create” so how do we add a value to our data structure? The R stands for “read.” How do we look up or receive a value from this data structure? The U stands for "update” — how do you change an existing value and reassign it to a new value. Lastly, we have D which stands for “Delete”. Deleting of value is the same as updating a value. When deleting, often you are just assigning the previous value to null or undefined.
Next you should understand how the data structure is represented in pictures and how that relates to how it is stored in memory (or not).

Create

Okay so we talked about what CRUD stands for so let's take a look how we create new value in the existing object:
const obj = {key: "value"};
What is object literal notation?
What are the limitations of object literal notation?
Further reading:

Read

We added a key and value to our object. Now let's move on to the R, reading that value. Objects are interesting because each entry into the data structure contains both a key and a value. We are usually interested in the value when interacting with an object, but it's important to understand how to do both.
What are some ways that you have seen values being accessed on an object?
Bracket notation
One way that was mentioned was using what is called bracket notation. Here is what it looks like:
const obj = {};

obj["exampleKey"] = "exampleValue";
The expression inside of the brackets will be evaluated and then it will be “stringified” or toString() will be called on it.
Why do we need the quotes above? What happens if we remove them?
const obj = {};

obj[exampleKey] = "exampleValue";
Run the code in the console or a to find out!
Dot notation
The other approach that we mention which is more of a shorthand is called dot notation. Dot notation is a shorthand and only works with strings.
obj.exampleKey = "exampleValue";

What are the limitations of dot notation?

Update and Delete

Moving on to the U and the D updating and deleting values
What are some ways that you've done that In the past?
delete obj.exampleKey;
obj.exampleKey = undefined;

Further Reading

Next 👉


©2021 for


Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.