Understanding Objects in JavaScript

What Are Objects and Why Are They Needed?

An object in JavaScript is a collection of key–value pairs used to store related data together.

You can think of an object as a real-world entity. For example, a person has details like name, age, and city. Instead of storing these details in separate variables, we can store them inside one object.

Example

• name, age, city are keys (also called properties)

• "Sudhanshu", 25, "Pune" are values

const person = {
  name: "Sudhanshu",
  age: 25,
  city: "Pune"
};

Why Are Objects Needed?

Objects are needed because they help us store and organize related data together.

They are useful when we want to represent real-world things that have multiple properties.

• Group related information in one place

• Represent real-world entities like users, students, or products

• Store multiple values in a single variable

• Write cleaner and more organized code

Without Objects

let name = "Sudhanshu";
let age = 25;
let city = "Pune";

---

Creating an Object in JavaScript

The most common method for creating an object is by using curly braces {}.

Example

• person → the object name

• name, age, city → keys (properties)

• "Sudhanshu", 25, "Pune" → values

const person = {
  name: "Sudhanshu",
  age: 25,
  city: "Pune"
};

---

Accessing properties (dot notation and bracket notation)

Accessing Object Properties

In JavaScript, we often need to retrieve values stored inside an object. This is called accessing object properties.

There are two common ways to access properties:

• Dot Notation

• Bracket Notation

Example Object: -

const person = {
  name: "Sudhanshu",
  age: 25,
  city: "Pune"
};

Dot Notation

Dot notation is the most commonly used method to access object properties.

Syntax:

objectName.propertyName

Example:

• person.name accesses the name property

• person.age accesses the age property

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

// output:- 
Sudhanshu
25

---

Updating Object Properties

In JavaScript, we can change the value of an existing object property. This is called updating an object property.

To update a property, we simply assign a new value to that property.

Example Object

This object contains three properties: name, age, and city.

const person = {
  name: "Sudhanshu",
  age: 25,
  city: "Pune"
};

Updating a Property Using Dot Notation

We can update a property using dot notation.

the value of age is changed from 25 to 26.

person.age = 26;

console.log(person.age);

// 26

Updating a Property Using Bracket Notation

We can also update a property using bracket notation.

person["city"] = "Mumbai";

console.log(person.city);

Output: Mumbai
the city property is updated from Pune to Mumbai.

---

In JavaScript, objects are flexible, which means we can add new properties or remove existing properties whenever needed.

---

Example Object

const person = {
  name: "Sudhanshu",
  age: 25,
  city: "Pune"
};

This object currently has three properties: name, age, and city.

---

Adding New Properties

We can add a new property to an object by assigning a value to a new key.

Example

person.country = "India";

console.log(person);

Output

{
  name: "Sudhanshu",
  age: 25,
  city: "Pune",
  country: "India"
}

country is the new property added to the object.
"India" is the value assigned to that property.

Deleting Properties

To remove a property from an object, we use the delete keyword.

Example

delete person.city;

console.log(person);

Output

{
  name: "Sudhanshu",
  age: 25,
  country: "India"
}

The city property has been removed from the object.

---

Looping through object keys

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

The for...in loop allows us to iterate over each key (property) in an object.

Example Object

const student = {
  name: "Sudhanshu",
  age: 21,
  city: "Pune"
};

Using for...in Loop

• key represents each property name in the object.

• student[key] is used to access the value of that property.

During each loop iteration:

1. The loop gets a key from the object

2. student[key] retrieves the value of that key

for (let key in student) {
  console.log(key + ": " + student[key]);
}

Output

name: Sudhanshu
age: 21
city: Pune

---

Short Summary

In JavaScript, objects are used to store related data as key–value pairs in a single structure. They help represent real-world entities like a person with properties such as name, age, and city, making code more organized and easier to manage.

Objects are created using curly braces {} and their properties can be accessed using dot notation (person.name) or bracket notation (person["name"]). Objects are flexible, allowing properties to be updated, added, or deleted.

JavaScript also provides the for...in loop to iterate through an object's keys and access their values. Overall, objects are an important way to store and manage grouped data efficiently.