Skip to main content

Command Palette

Search for a command to run...

Understanding Objects in JavaScript

Updated
4 min read
Understanding Objects in JavaScript

When learning JavaScript, you quickly realize that storing and organizing data is very important. Sometimes a single variable is not enough.

For example, imagine you want to store details about a person like their name, age, and city. Creating separate variables for each value can become messy.

This is where Objects in JavaScript come in.

Objects help us store related information together in a structured way.

What Are Objects in JavaScript?

An object is a collection of key–value pairs.

  • Key → the name of the property

  • Value → the data stored in that property

Think of an object like a real-life profile card.

Example:

Person Profile
--------------
Name  → Rahul
Age   → 22
City  → Delhi

In JavaScript, the same data can be represented like this:

const person = {
  name: "Rahul",
  age: 22,
  city: "Delhi"
};

Here:

  • name, age, and city are keys

  • "Rahul", 22, "Delhi" are values

Together they form an object.

Why Do We Need Objects?

Objects help us:

  • Group related data together

  • Represent real-world entities

  • Make code more organized and readable

Without objects, we might write something like this:

let name = "Rahul";
let age = 22;
let city = "Delhi";

With objects, everything stays in one place.

const person = {
  name: "Rahul",
  age: 22,
  city: "Delhi"
};

Much cleaner, right?

Creating Objects in JavaScript

Objects are created using curly braces {}.

Example:

const person = {
  name: "Rahul",
  age: 22,
  city: "Delhi"
};

Each property is written as:

key : value

Properties are separated by commas.

Accessing Object Properties

There are two ways to access object properties.

1. Dot Notation

The most common way.

console.log(person.name);
console.log(person.age);

Output:

Rahul
22

2. Bracket Notation

Another way is using square brackets.

console.log(person["city"]);

Output:

Delhi

Bracket notation is useful when the property name is dynamic.

Updating Object Properties

We can update a value by assigning a new one.

person.age = 23;

console.log(person.age);

Output:

23

Objects in JavaScript are mutable, which means their values can be changed.

Adding New Properties

We can easily add new properties to an object.

person.country = "India";

console.log(person);

Now the object becomes:

{
  name: "Rahul",
  age: 23,
  city: "Delhi",
  country: "India"
}

Deleting Properties

To remove a property, we use the delete keyword.

delete person.city;

console.log(person);

Now the object will no longer contain the city property.

Looping Through Object Keys

Sometimes we want to access all properties of an object.

We can do this using a for...in loop.

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

Output:

name Rahul
age 23
country India

Here:

  • key represents the property name

  • person[key] gives the value

Array vs Object

Both arrays and objects store data, but they are used differently.

Array Object
Stores ordered data Stores structured data
Uses indexes Uses keys
Accessed by number Accessed by property name

Example of an array:

const fruits = ["Apple", "Banana", "Mango"];

Example of an object:

const person = {
  name: "Rahul",
  age: 22
};

Use arrays when order matters.
Use objects when describing something with properties.

Visualizing an Object

You can think of an object like this:

person
│
├── name → Rahul
├── age  → 22
└── city → Delhi

Each key points to a value.

Assignment Practice

Try this small exercise to practice objects.

Step 1: Create a student object

const student = {
  name: "Ankit",
  age: 20,
  course: "Computer Science"
};

Step 2: Update a property

student.age = 21;

Step 3: Print all keys and values

for (let key in student) {
  console.log(key, student[key]);
}

Output example:

name Ankit
age 21
course Computer Science

Final Thoughts:-

Objects are one of the most important concepts in JavaScript.

They allow us to represent real-world data in a structured way and make our code easier to manage.

Once you are comfortable with objects, you will start using them everywhere — in APIs, backend development, and modern JavaScript frameworks.