JavaScript Objects: Storing and Managing Structured Data

You already know how to store a single value in a variable. You know how to store a list of values in an array. But what if you want to store multiple pieces of information that all describe one thing — like a person's name, age, and city? That's where objects come in.

The Problem Objects Solve

Say you want to describe a person using what you already know:

let name = "Alice";
let age  = 28;
let city = "New York";

These three variables are related — they all describe the same person. But JavaScript has no idea they're connected. They're just three separate boxes floating around in your code.

An object solves this by grouping all related data under one roof:

let person = {
  name: "Alice",
  age:  28,
  city: "New York"
};

One variable, one person, all their details in one place.

What Is an Object?

An object is a collection of key-value pairs. Each piece of data has a name (the key) and a value.

Object: person
--------------------------
| Key    | Value         |
--------------------------
| name   | "Alice"       |
| age    | 28            |
| city   | "New York"    |
--------------------------

The key is always a string. The value can be anything — a string, number, boolean, array, or even another object.

Arrays vs Objects

Both arrays and objects store multiple values, but they serve different purposes.

Array                          Object
------------------------------  --------------------------------
Ordered list of values          Named collection of values
Accessed by index (0, 1, 2...)  Accessed by key ("name", "age")
Best for: list of similar items Best for: describing one thing

let colors = ["red","green"]    let person = { name: "Alice" }
colors[0] → "red"               person.name → "Alice"

Use an array when you have a list of similar items. Use an object when you have different properties that describe a single entity.

Creating an Object

The most common way to create an object is with object literal syntax — curly braces with key-value pairs separated by commas.

let car = {
  brand: "Toyota",
  model: "Camry",
  year:  2022,
  color: "white"
};

Each key-value pair is separated by a comma. The key and value are separated by a colon.

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

let car = {};

Accessing Properties

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

Dot Notation

let person = {
  name: "Alice",
  age:  28,
  city: "New York"
};

console.log(person.name); // "Alice"
console.log(person.age);  // 28
console.log(person.city); // "New York"

This is the most common and readable way. Use it whenever the key name is known and straightforward.

Bracket Notation

console.log(person["name"]); // "Alice"
console.log(person["age"]);  // 28

Bracket notation is useful when the key is stored in a variable or when the key contains spaces or special characters.

let key = "city";
console.log(person[key]); // "New York"

You cannot do person.key here — that would look for a property literally named "key", not the value of the variable.

Updating Properties

To change the value of an existing property, simply reassign it:

let person = {
  name: "Alice",
  age:  28
};

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

person["name"] = "Alicia";
console.log(person.name); // "Alicia"

Both dot and bracket notation work for updating.

Adding and Deleting Properties

Adding a new property

You can add a property to an object at any time — even after it was created:

let person = {
  name: "Alice"
};

person.age    = 28;
person.city   = "New York";
person.active = true;

console.log(person);
// { name: "Alice", age: 28, city: "New York", active: true }

Deleting a property

Use the delete keyword to remove a property from an object:

delete person.active;

console.log(person);
// { name: "Alice", age: 28, city: "New York" }

The property is gone entirely — not just set to undefined.

Looping Through Object Keys

Unlike arrays, objects are not directly iterable with a regular for loop. Instead, use for...in to loop through all keys.

let person = {
  name: "Alice",
  age:  28,
  city: "New York"
};

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

// name: Alice
// age: 28
// city: New York

On each iteration, key holds the current property name. Use bracket notation person[key] to get its value — dot notation won't work here since key is a variable.

You can also get all keys as an array using Object.keys():

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

Putting It All Together

let book = {
  title:  "The Alchemist",
  author: "Paulo Coelho",
  year:   1988
};

// Access
console.log(book.title);  // "The Alchemist"

// Update
book.year = 1993;

// Add
book.genre = "Fiction";

// Delete
delete book.year;

// Loop
for (let key in book) {
  console.log(key + ": " + book[key]);
}
// title: The Alchemist
// author: Paulo Coelho
// genre: Fiction

Practice Assignment

Work through these steps to practice everything covered:

1. Create an object representing a student:

let student = {
  name:   "Raj",
  age:    21,
  course: "Computer Science"
};

2. Access and print individual properties:

console.log(student.name);   // "Raj"
console.log(student.course); // "Computer Science"

3. Update one property:

student.age = 22;
console.log(student.age); // 22

4. Add a new property:

student.city = "Mumbai";

5. Print all keys and values using a loop:

for (let key in student) {
  console.log(key + ": " + student[key]);
}
// name: Raj
// age: 22
// course: Computer Science
// city: Mumbai

Quick Recap

• An object stores related data as key-value pairs

• Use arrays for ordered lists of similar items, objects for describing a single entity

• Create objects with curly braces: let obj = { key: value }

• Access values with dot notation (obj.key) or bracket notation (obj["key"])

• Update properties by reassigning: obj.key = newValue

• Add new properties the same way; remove them with delete

• Loop through object keys using for...in

Objects are one of the most fundamental building blocks of JavaScript. Everything from API responses to class instances is built on them. Getting comfortable with the basics here will make everything that comes next feel much more natural.

Happy coding! 🚀

If you enjoyed this article, check out my other blogs on this profile. 🔗 Connect with me: LinkedIn | GitHub | X (Twitter)