You can group related data together into a single data structure by using a JavaScript object, like this:

const desk = {
   height: "4 feet",
   weight: "30 pounds",
   color: "brown",
   material: "wood",
 };

An object contains properties, or key-value pairs. The desk object above has four properties. Each property has a name, which is also called a key, and a corresponding value.

For instance, the key height has the value "4 feet". Together, the key and value make up a single property.

height: "4 feet",

The desk object contains data about a desk. In fact, this is a reason why you’d use a JavaScript object: to store data. It’s also simple to retrieve the data that you store in an object. These aspects make objects very useful.

This article will get you up and running with JavaScript objects:

  • how to create an object
  • how to store data in an object
  • and retrieve data from it.

Let’s start by creating an object.

How to Create an Object in JavaScript

I'll create an object called pizza below, and add key-value pairs to it.

const pizza = {
   topping: "cheese",
   sauce: "marinara",
   size: "small"
};

The keys are to the left of the colon : and the values are to the right of it. Each key-value pair is a property. There are three properties in this example:

  • The key topping has a value “cheese”.
  • The key sauce has a value “marinara”.
  • The key size has a value “small”.

Each property is separated by a comma. All of the properties are wrapped in curly braces.

This is the basic object syntax. But there are a few rules to keep in mind when creating JavaScript objects.

Object Keys in JavaScript

Each key in your JavaScript object must be a string, symbol, or number.

Take a close look at the example below. The key names 1 and 2 are actually coerced into strings.

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

It’s a difference made clear when you print the object.

console.log(shoppingCart);
//Result: { '1': 'apple', '2': 'oranges' }

There’s another rule to keep in mind about key names: if your key name contains spaces, you need to wrap it in quotes.

Take a look at the programmer object below. Notice the last key name, "current project name" . This key name contains spaces so, I wrapped it in quotes.

const programmer = {
   firstname: "Phil",
   age: 21,
   backendDeveloper: true,
   languages: ["Python", "JavaScript", "Java", "C++"],
   "current project name": "The Amazing App"
};

Object Values in JavaScript

A value, on the other hand, can be any data type, including an array, number, or boolean. The values in the above example contain these types: string, integer, boolean, and an array.

You can even use a function as a value, in which case it’s known as a method. sounds(), in the object below, is an example.

const animal = {
   type: "cat",
   name: "kitty",
   sounds() { console.log("meow meow") }
};

Now say you want to add or delete a key-value pair. Or you simply want to retrieve an object’s value.

You can do these things by using dot or bracket notation, which we’ll tackle next.

How Dot Notation and Bracket Notation Work in JavaScript

Dot notation and bracket notation are two ways to access and use an object’s properties. You’ll probably find yourself reaching for dot notation more often, so we'll start with that.

How to Add a Key-Value Pair with Dot Notation in JavaScript

I'll create an empty book object below.

const book = {};

To add a key-value pair using dot notation, use the syntax:

objectName.keyName = value

This is the code to add the key (author) and value ("Jane Smith") to the book object:

book.author = "Jane Smith";

Here's a breakdown of the above code:

  • book is the object's name
  • . (dot)
  • author is the key name
  • = (equals)
  • "Jane Smith" is the value

When I print the book object, I’ll see the newly added key-value pair.

console.log(book);
//Result: { author: 'Jane Smith' }

I’ll add another key-value pair to the book object.

book.publicationYear = 2006;

The book object now has two properties.

console.log(book);
//Result: { author: 'Jane Smith', publicationYear: 2006 }

How to Access Data in a JavaScript Object Using Dot Notation

You can also use dot notation on a key to access the related value.

Consider this basketballPlayer object.

const basketballPlayer = {
   name: "James",
   averagePointsPerGame: 20,
   height: "6 feet, 2 inches",
   position: "shooting guard"
};

Say you want to retrieve the value “shooting guard.” This is the syntax to use:

objectName.keyName

Let's put this syntax to use to get and print the "shooting guard" value.

console.log(basketballPlayer.position);
//Result: shooting guard

Here's a breakdown of the above code:

  • basketballPlayer is the object's name
  • . (dot)
  • position is the key name

This is another example.

console.log(basketballPlayer.name);
//Result: James

How to Delete a Key-Value Pair in JavaScript

To delete a key-value pair use the delete operator. This the syntax:

delete objectName.keyName

So to delete the height key and its value from the basketballPlayer object, you’d write this code:

delete basketballPlayer.height;

As a result, the basketballPlayer object now has three key-value pairs.

console.log(basketballPlayer);
//Result: { name: 'James', averagePointsPerGame: 20, position: 'shooting guard' }

You’ll probably find yourself reaching for dot notation frequently, though there are certain requirements to be aware of.

When using dot notation, key names can’t contain spaces, hyphens, or start with a number.

For example, say I try to add a key that contains spaces using dot notation. I’ll get an error.

basketballPlayer.shooting percentage = "75%";
//Results in an error

So dot notation won’t work in every situation. That’s why there’s another option: bracket notation.

How to Add a Key-Value Pair Using Bracket Notation in JavaScript

Just like dot notation, you can use bracket notation to add a key-value pair to an object.

Bracket notation offers more flexibility than dot notation. That’s because key names can include spaces and hyphens, and they can start with numbers.

I'll create an employee object below.

const employee = {};

Now I want to add a key-value pair using bracket notation. This is the syntax:

objectName[“keyName”] = value

So this is how I’d add the key (sales) and value (“occupation”) to the employee object:

employee["occupation"] = "sales";

Here's a breakdown of the above code:

  • employee is the object's name
  • "occupation" is the key name
  • = (equals)
  • "sales" is the value

Below are several more examples that use bracket notation's flexibility to add a variety of key-value pairs.

//Add multi-word key name
employee["travels frequently"] = true;
 
//Add key name that starts with a number and includes a hyphen
employee["1st-territory"] = "Chicago";
 
//Add a key name that starts with a number
employee["25"] = "total customers";

When I print the employee object, it looks like this:

{
  '25': 'total customers',
  occupation: 'sales',
  'travels frequently': true,
  '1st-territory': 'Chicago'
}

With this information in mind, we can add the “shooting percentage” key to the basketballPlayer object from above.

const basketballPlayer = {
   name: "James",
   averagePointsPerGame: 20,
   height: "6 feet, 2 inches",
   position: "shooting guard"
};

You may remember that dot notation left us with an error when we tried to add a key that included spaces.

basketballPlayer.shooting percentage = "75%";
//Results in an error

But bracket notation leaves us error-free, as you can see here:

basketballPlayer["shooting percentage"] = "75%";

This is the result when I print the object:

{
  name: 'James',
  averagePointsPerGame: 20,
  height: '6 feet, 2 inches',
  position: 'shooting guard',
  'shooting percentage': '75%'
}

How to Access Data in a JavaScript Object Using Bracket Notation

You can also use bracket notation on a key to access the related value.

Recall the animal object from the start of the article.

const animal = {
   type: "cat",
   name: "kitty",
   sounds() { console.log("meow meow") }
};

Let's get the value associated with the key, name. To do this, wrap the key name quotes and put it in brackets. This is the syntax:

objectName[“keyName”]

Here's the code you'd write with bracket notation: animal["name"];.

This is a breakdown of the above code:

  • animal is the object's name
  • ["name"] is the key name enclosed in square brackets

Here’s another example.

console.log(animal["sounds"]());

//Result: 
meow meow
undefined

Note that sounds() is a method, which is why I added the parentheses at the end to invoke it.

This is how you’d invoke a method using dot notation.

console.log(animal.sounds());

//Result: 
meow meow
undefined

JavaScript Object Methods

You know how to access specific properties. But what if you want all of the keys or all of the values from an object?

There are two methods that will give you the information you need.

const runner = {
   name: "Jessica",
   age: 20,
   milesPerWeek: 40,
   race: "marathon"
};

Use the Object.keys() method to retrieve all of the key names from an object.

This is the syntax:

Object.keys(objectName)

We can use this method on the above runner object.

Object.keys(runner);

If you print the result, you’ll get an array of the object’s keys.

console.log(Object.keys(runner));
//Result: [ 'name', 'age', 'milesPerWeek', 'race' ]

Likewise, you can use the Object.values() method to get all of the values from an object. This is the syntax:

Object.values(objectName)

Now we'll get all of the values from the runner object.

console.log(Object.values(runner));
//Result: [ 'Jessica', 20, 40, 'marathon' ]

We’ve covered a lot of ground. Here’s a summary of the key ideas:

Objects:

  • Use objects to store data as properties (key-value pairs).
  • Key names must be strings, symbols, or numbers.
  • Values can be any type.

Access object properties:

  • Dot notation: objectName.keyName
  • Bracket notation: objectName[“keyName”]

Delete a property:

  • delete objectName.keyName

There’s a lot you can do with objects. And now you’ve got some of the basics so you can take advantage of this powerful JavaScript data type.

I write about learning to program, and the best ways to go about it on amymhaddad.com. I also tweet about programming, learning, and productivity: @amymhaddad.