Understanding Objects in JavaScript

JavaScript is built around objects. Almost everything in JavaScript can be represented using objects. Understanding objects is essential for writing structured and scalable JavaScript code.

In this article, we will learn what objects are, why they are used, and how to work with them in JavaScript.

What Are Objects and Why Are They Needed

In programming, we often need to store related data together. For example, consider information about a person such as their name, age, and city.

If we store these values separately, the code becomes difficult to manage.

let name = "Mahesh";
let age = 21;
let city = "Mumbai";

A better approach is to group this related data together using an object.

An object in JavaScript is a collection of key-value pairs.

let person = {
  name: "Mahesh",
  age: 21,
  city: "Mumbai"
};

Here:

• name, age, and city are keys (properties)

• "Mahesh", 21, "Mumbai" are values

This structure makes the code more organized and easier to work with.

Creating Objects

Objects in JavaScript are created using curly braces {}.

Example:

let person = {
  name: "Mahesh",
  age: 21,
  city: "Mumbai"
};

Each property inside the object is written as:

key: value

Multiple properties are separated using commas.

Accessing Object Properties

There are two ways to access properties of an object.

1. Dot Notation

Dot notation is the most common way.

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

Output:

Mahesh
21

2. Bracket Notation

Bracket notation uses square brackets.

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

Output:

Mumbai

Bracket notation is useful when the property name is stored inside a variable.

let key = "name";
console.log(person[key]);

Updating Object Properties

Object values can be updated easily.

person.age = 22;

console.log(person.age);

Output:

22

JavaScript simply replaces the old value with the new one.

Adding New Properties

We can also add new properties to an existing object.

person.country = "India";

console.log(person);

Now the object becomes:

{
  name: "Mahesh",
  age: 22,
  city: "Mumbai",
  country: "India"
}

Deleting Properties

JavaScript provides the delete keyword to remove a property.

delete person.city;

console.log(person);

Now the object no longer contains the city property.

Looping Through Object Keys

Sometimes we need to access all properties of an object. For this purpose, we can use a for...in loop.

let person = {
  name: "Mahesh",
  age: 21,
  city: "Mumbai"
};

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

Output:

name Mahesh
age 21
city Mumbai

The loop goes through each key in the object.

Difference Between Array and Object

Arrays and objects both store data, but they are used differently.

Feature	Array	Object
Structure	Ordered list	Key-value pairs
Access	Index (0,1,2)	Property name
Use Case	List of items	Structured data

Example of an array:

let fruits = ["apple", "banana", "mango"];
console.log(fruits[0]);

Example of an object:

let person = {
  name: "Mahesh",
  age: 21
};

console.log(person.name);

Visual Representation of an Object

You can imagine an object like this:

person
 ├── name → Mahesh
 ├── age → 21
 └── city → Mumbai

Each key points to a value, forming a key-value structure.