Understanding Objects in JavaScript

Objects are one of the most important data types in JavaScript. They let us store related information together using key-value pairs, making data easier to organize and manage.

Instead of storing separate variables for every piece of information, we can group everything into a single object.

What Are Objects?

An object is a collection of related data stored as key-value pairs.

• Key: The name of the property.

• Value: The data stored in that property.

For example, instead of writing:

const name = "Alice";
const age = 22;
const city = "Delhi";

We can group everything into one object:

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

name, age, and city are keys. "Alice", 22, and "Delhi" are values.

Why Are Objects Needed?

Imagine you're building a student management system.

Without objects:

const student1Name = "Rahul";
const student1Age = 20;
const student1Course = "BCA";

const student2Name = "Priya";
const student2Age = 21;
const student2Course = "MCA";

This becomes difficult to manage.

Using objects:

const student1 = {
  name: "Rahul",
  age: 20,
  course: "BCA"
};

const student2 = {
  name: "Priya",
  age: 21,
  course: "MCA"
};

Everything related to a student stays together.

Creating Objects

Objects are created using curly braces {}.

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

Objects can store different types of values.

const user = {
  name: "John",
  age: 25,
  isStudent: false
};

Accessing Object Properties

There are two ways to access object properties.

1. Dot Notation

The simplest and most common way.

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

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

Output

Alice
22

2. Bracket Notation

Use square brackets and the property name as a string.

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

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

Output

Alice
22

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

const key = "name";

console.log(person[key]);

Output

Alice

Updating Object Properties

Changing a property is straightforward.

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

person.age = 23;

console.log(person);

Output

{
  name: "Alice",
  age: 23
}

Adding New Properties

New properties can be added at any time.

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

person.city = "Delhi";

console.log(person);

Output

{
  name: "Alice",
  age: 22,
  city: "Delhi"
}

Deleting Properties

Use the delete keyword.

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

delete person.city;

console.log(person);

Output

{
  name: "Alice",
  age: 22
}

Looping Through Object Keys

The for...in loop lets us iterate through every key in an object.

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

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

Output

name Alice
age 22
city Delhi

Notice that we use bracket notation inside the loop because key is a variable.

Object Methods

An object can store not only data but also functions. When a function is stored as a property of an object, it is called an object method.

const person = {
  name: "Alice",
  age: 22,

  greet: function () {
    console.log("Hello!");
  }
};

person.greet();

Output

Hello!

You can also access other properties of the same object using the this keyword.

const person = {
  name: "Alice",
  age: 22,

  introduce: function () {
    console.log("Hi, I'm " + this.name);
  }
};

person.introduce();

Output

Hi, I'm Alice

Array vs Object

Although both store data, they serve different purposes.

Array	Object
Stores ordered data	Stores named data
Uses numeric indexes	Uses keys
Access with array[0]	Access with object.name
Best for lists	Best for describing things

Array Example

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

console.log(fruits[0]);

Output

Apple

Object Example

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

console.log(person.name);

Output

Alice

Use an array when the order of items matters, such as a list of fruits. Use an object when you want to describe an entity with named properties, such as a person or a student.

Array vs Object Diagram

Array

fruits
│
├── [0] → "Apple"
├── [1] → "Banana"
└── [2] → "Orange"


Object

person
│
├── name → "Alice"
├── age  → 22
└── city → "Delhi"

Objects make JavaScript programs easier to read and maintain by grouping related information into a single structure. They're the preferred way to represent real-world entities like users, products, students, or books.

Conclusion

Objects are a fundamental part of JavaScript because they let you organize related data using key-value pairs. They are ideal for representing real-world entities such as people, students, products, and cars.

In this article, you learned how to:

• Understand what objects are and why they are needed.

• Create objects.

• Access properties using dot and bracket notation.

• Update, add, and delete properties.

• Loop through object keys and values.

• Understand the difference between arrays and objects.

Mastering objects is an essential step toward learning more advanced JavaScript concepts, as they are used extensively in web development, APIs, and modern JavaScript frameworks.