Skip to main content

Command Palette

Search for a command to run...

Understanding Objects in JavaScript

Everything you need to know about key-value pairs, from creation to looping, explained simply.

Updated
4 min readView as Markdown
Understanding Objects in JavaScript
D
FrontEnd Devloper | React.js | Tailwind

If you've been working with JavaScript, you've probably used arrays to store lists of data. But what happens when you need to store more complex, structured information? That's where objects come in.

As we continue our journey through the Web Dev Cohort 2026, understanding objects is a massive stepping stone toward becoming a full-stack engineer. Let's break down what objects are, why we need them, and how to use them.


What Are Objects and Why Do We Need Them?

Imagine you want to store information about a person. You could use an array:

let personArray = ["Divyanshu", 25, "Delhi"];

But there's a problem here. Looking at personArray[1], how do you know if 25 is the person's age, their lucky number, or their house number? An array is just an ordered list; it doesn't give us context.

An object solves this by storing data in a key-value pair structure. Instead of relying on an index (like 0, 1, or 2), you use a descriptive "key" (a label) to store and access a "value".


Creating Objects

Creating an object is straightforward. We use curly braces {} and define our key-value pairs inside them.

let person = {
  name: "Divyanshu",
  age: 25,
  city: "Delhi"
};

Now, the data is perfectly clear. The key is name and the value is "Divyanshu".


Accessing Properties

To get information out of an object, you have two main options: Dot Notation and Bracket Notation.

1. Dot Notation

This is the most common and easiest way to access a property. You just write the object name, a dot, and the key.

console.log(person.name); // Output: Divyanshu
console.log(person.city); // Output: Delhi

2. Bracket Notation

Sometimes you need to use bracket notation. This is especially useful if your key has a space in it (which isn't recommended, but possible) or if you are using a variable to access the key.

console.log(person["age"]); // Output: 25

let propertyToCheck = "city";
console.log(person[propertyToCheck]); // Output: Delhi

Modifying Objects: Updating, Adding, and Deleting

Objects are dynamic. You can change them even after you've created them.

Updating Properties

To change an existing value, just reassign it using dot or bracket notation.

person.age = 26;
console.log(person.age); // Output: 26

Adding New Properties

Adding a new property is just as easy. Simply assign a value to a key that doesn't exist yet.

person.profession = "Developer";
console.log(person); 
// Output: { name: 'Divyanshu', age: 26, city: 'Delhi', profession: 'Developer' }

Deleting Properties

If you need to remove a property completely, use the delete keyword.

delete person.city;
console.log(person); 
// Output: { name: 'Divyanshu', age: 26, profession: 'Developer' }

Looping Through Object Keys

Sometimes you want to go through all the properties in an object, maybe to print them out to the console. Because objects aren't ordered like arrays, we use a special loop called the for...in loop.

let car = {
  brand: "Toyota",
  model: "Corolla",
  year: 2022
};

for (let key in car) {
  console.log(key + ": " + car[key]);
}

// Output:
// brand: Toyota
// model: Corolla
// year: 2022

Notice how we used car[key] (bracket notation) inside the loop. If we used car.key, JavaScript would look for a property literally named "key", which doesn't exist!


📝 Try It Yourself! (Assignment Idea)

Ready to put this into practice? Here is a quick challenge to test your skills:

  1. Create an object representing a student.

  2. Add the following properties: name, age, and course.

  3. Update the course property to a new subject.

  4. Print all the keys and their corresponding values using a for...in loop.

The END :).