Understanding Objects in JavaScript

What Objects Are and Why They Are Needed?

In JavaScript, objects are used to store related information together in a structured way. If you think about real-world things, most of them have multiple pieces of information associated with them. For example, a person has a name, age, and city. Instead of storing these values in separate variables, JavaScript allows us to group them into a single object.

An object is essentially a collection of key-value pairs. The key describes the property, and the value stores the information.

For example, if you wanted to describe a person, you might store their name, age, and city inside one object. This makes your data easier to organize and manage.

Objects are especially useful when dealing with structured data such as user profiles, products in a store, or student records.

Creating Objects

Objects in JavaScript are created using curly braces {}. Inside the braces, you define properties as key-value pairs.

Example:

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

Here, student is the object.
name, age, and course are keys, and the values are "Rahul", 20, and "Computer Science".

This structure clearly groups all the information related to the student in one place.

Accessing Properties (Dot Notation and Bracket Notation)

Once an object is created, you often need to access its properties. JavaScript provides two ways to do this.

The most common method is dot notation.

console.log(student.name);

Output:

Rahul

Another way is bracket notation, where the property name is written as a string inside brackets.

console.log(student["age"]);

Output:

20

Both approaches access the same value. Dot notation is simpler and commonly used, while bracket notation is useful when property names are dynamic or stored in variables.

Updating Object Properties

Object properties can be updated by assigning a new value to the key.

Example:

student.age = 21;

Now the object becomes:

{
  name: "Rahul",
  age: 21,
  course: "Computer Science"
}

You can confirm the change by printing the object.

console.log(student);

Updating properties allows objects to reflect changes as your program runs.

Adding and Deleting Properties

JavaScript objects are flexible, which means you can add new properties anytime.

Example:

student.city = "Delhi";

Now the object contains a new key:

{
  name: "Rahul",
  age: 21,
  course: "Computer Science",
  city: "Delhi"
}

You can also remove properties using the delete keyword.

delete student.course;

After this operation, the course property will no longer exist in the object.

Looping Through Object Keys

Sometimes you need to go through all the properties of an object. JavaScript provides a simple way to do this using a for...in loop.

Example:

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

If the object looks like this:

let student = {
  name: "Rahul",
  age: 21,
  city: "Delhi"
};

The loop will print:

name Rahul
age 21
city Delhi

The loop accesses each key in the object and then retrieves the corresponding value.

Objects vs Arrays

It is helpful to understand how objects differ from arrays.

Arrays store values in an ordered list, where each value is accessed using a numeric index.

Objects store values using named keys, which describe what the data represents.

For example:

Array:

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

Object:

let person = {
  name: "Rahul",
  age: 21,
  city: "Delhi"
};

Arrays are ideal for lists, while objects are better for representing structured information about something.

Example: Student Object

Let’s put everything together.

let student = {
  name: "Aman",
  age: 19,
  course: "Engineering"
};

student.age = 20;
student.city = "Mumbai";

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

Above example creates an object, updates a property, adds a new property, and then loops through all keys and values.