Understand Objects in JavaScript

When learning JavaScript, variables help us store individual pieces of data such as numbers, strings, or boolean values. However, real-world data is often more complex and usually consists of multiple related pieces of information. This is where objects become useful.

What Are Objects and Why Are They Needed?

An object in JavaScript is a data structure used to store multiple related values in a single variable. These values are stored as key–value pairs.

Think of an object like a real-world entity that has different properties.

For example, if we want to represent a person in our program, we might want to store information like their name, age, and city. Instead of creating multiple variables, we can group them together using an object.

const person = {
  name: "Sam",
  age: 29,
  city: "Haryana"
};

In this example:

name, age, and city are keys (properties)
"Sam", 29, and "Haryana" are their values

Objects help us organize related data together, making our code easier to manage and understand.

Creating Objects

Objects are created using curly braces {}.

const person = {
  name: "Sam",
  age: 29,
  city: "Haryana"
};

Each property inside the object is written as:

key: value

Multiple properties are separated using commas.

Accessing Object Properties

We can access object properties in two ways.

1. Dot Notation

The most common way to access object properties is using dot notation.

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

Output:

sam
29

2. Bracket Notation

Another way to access properties is bracket notation.

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

Output:

Haryana

Bracket notation is useful when the property name is dynamic or stored in a variable.

Updating Object Properties

We can update an object's property by assigning a new value.

person.age = 23;

console.log(person.age);

Output:

Objects allow their properties to be updated easily.

Adding New Properties

We can also add new properties to an object.

person.country = "India";

console.log(person);

Now the object becomes:

{
  name: "Sam",
  age: 23,
  city: "Haryana",
  country: "India"
}

Deleting Object Properties

If we want to remove a property from an object, we can use the delete keyword.

delete person.city;

console.log(person);

Now the city property will be removed.

Looping Through Object Keys

Sometimes we want to access all properties of an object. We can use a for...in loop to iterate through the keys.

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

Output:

name Sam
age 29
country India

Here:

key represents the property name
person[key] gives the value of that property

Difference Between Arrays and Objects

Example of an array:

const fruits = ["apple", "banana", "mango"];

Example of an object:

const person = {
  name: "Sam",
  age: 29
};

Arrays are used for lists of data, while objects are used for structured data with properties.

As a beginner you should start by making object on your own like this:

Create an object representing a student.

Create an object called student.
Add properties:
- name
- age
- course
Update one property.
Print all keys and values using a loop.

Example starter code:

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

student.age = 21;

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

Summary

Objects are one of the most important data structures in JavaScript. They allow us to store and organize related data using key–value pairs. By learning how to create objects, access properties, update them, and loop through them, we can represent real-world data more effectively in our programs.

Understanding objects is an essential step toward writing more structured and maintainable JavaScript code.

Understanding Objects in JavaScript

Comments

More from this blog

How Instagram Stores Reels, Photos, and Drafts Behind the Scenes

How WhatsApp Works Without Internet: Offline Messaging and Sync Explained

Expo Router vs React Navigation - Which One Should You Use in 2026?

How Instagram, WhatsApp, Uber & Netflix Would Be Built Today Using Expo Router

How React Virtual DOM works under the hood

What Are Objects and Why Are They Needed?

Creating Objects

Accessing Object Properties

1. Dot Notation

2. Bracket Notation

Updating Object Properties

Adding New Properties

Deleting Object Properties

Looping Through Object Keys

Difference Between Arrays and Objects

Summary

Command Palette

Comments

More from this blog

What Are Objects and Why Are They Needed?

Creating Objects

Accessing Object Properties

1. Dot Notation

2. Bracket Notation

Updating Object Properties

Adding New Properties

Deleting Object Properties

Looping Through Object Keys

Difference Between Arrays and Objects

Summary