Understanding Objects in JavaScript

Introduction

If you've written any JavaScript, you've probably used an array to store a list of values. Arrays are great for ordered data. But what if you need to describe something, not just list things?

That's where objects come in.

What is an Object?

An object in JavaScript is a collection of key-value pairs. Each key is a string (called a property), and each value can be anything: a number, a string, a boolean, even another object or a function.

Think of it like a contact card. A contact card doesn't just hold a list, it holds labeled information: a name, a phone number, a city. That labeled structure is exactly what an object gives you.

Here's the difference made concrete:

// An array: ordered, but no labels
const person = ["Alice", 30, "Mumbai"];

// An object: labeled, descriptive
const person = {
    name: "Alice",
    age: 30,
    city: "Mumbai"
};

With the array, you have to remember that index 0 is the name and index 2 is the city. With the object, the data explains itself.

Creating an Object

The most common way to create an object is with curly braces, also called object literal syntax.

const person = {
    name: "Alice",
    age: 30,
    city: "Mumbai"
};

Each line inside is a property. The key is on the left, the value is on the right, and they're separated by a colon. Properties are separated by commas.

You can also create an empty object and add properties later:

const person = {};
person.name = "Alice";
person.age = 30;

Both approaches are valid. Object literals are more common when you know the data upfront.

Accessing Properties

There are two ways to read a property from an object.

Dot Notation

console.log(person.name); // "Alice"
console.log(person.age);  // 30

This is the standard way. Clean, readable, and works most of the time.

Bracket Notation

console.log(person["name"]); // "Alice"
console.log(person["city"]); // "Mumbai"

Bracket notation is useful when the property name is stored in a variable:

const key = "age";
console.log(person[key]); // 30

You can't do that with dot notation. person.key would look for a property literally named "key", not the value stored in the variable.

Updating Properties

To change a property's value, just reassign it:

person.age = 31;
console.log(person.age); // 31

Works the same way with bracket notation:

person["city"] = "Pune";
console.log(person.city); // "Pune"

There's nothing special about updating vs. setting. If the property exists, the value gets replaced. If it doesn't exist, the property gets created.

Adding and Deleting Properties

You can add new properties to an object at any time, even after it's been created:

person.email = "alice@example.com";
console.log(person.email); // "alice@example.com"

To remove a property, use the delete keyword:

delete person.city;
console.log(person.city); // undefined

After deletion, accessing that property returns undefined. The key is gone.

Looping Through an Object

If you want to go through all the properties in an object, for...in is the most direct way:

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

// name : Alice
// age : 31
// email : alice@example.com

On each iteration, key holds the property name as a string. person[key] gives you the value for that property. Notice bracket notation here; dot notation won't work because key is a variable.

You can also use Object.keys(), Object.values(), and Object.entries() if you want to work with the keys or values as arrays:

console.log(Object.keys(person));
// ["name", "age", "email"]

console.log(Object.values(person));
// ["Alice", 31, "alice@example.com"]

Object.entries(person).forEach(([key, value]) => {
    console.log(key, ": ", value);
});

Object.entries() is particularly handy when you need both the key and value together without the for...in syntax.

Putting It Together

Here's everything applied to one object:

const person = {
    name: "Alice",
    age: 30,
    city: "Mumbai"
};

// Access
console.log(person.name);       // "Alice"
console.log(person["city"]);    // "Mumbai"

// Update
person.age = 31;

// Add
person.email = "alice@example.com";

// Delete
delete person.city;

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

// name: Alice
// age: 31
// email: alice@example.com

Conclusion

Objects are one of the most-used structures in JavaScript. Once you're comfortable with creating, reading, updating, and looping through them, a lot of JavaScript code starts making more sense because objects show up everywhere: in API responses, in function arguments, in component state, and more.