Understanding Objects in JavaScript

Objects are similar to arrays in the sense that they act like a container that can store data. But instead of storing values by index like arrays, objects store data as key–value pairs.

In the real world, almost everything can be described as an object. For example, a person can have properties like name, age, and city. JavaScript objects work in a similar way by grouping related information together.

An object can store different types of data such as numbers, strings, arrays, other objects, and even functions. Because of this flexibility, objects are a powerful way to organize and manage data in JavaScript.

In this article, we will understand what objects are in JavaScript and how to work with them.

What Are Objects in JavaScript?

Objects are a collection of related data stored as key-value pairs.

Let’s say we want to take user information from a form and store it in a variable. The form may contain different types of data such as the user's name, age, phone number, email ID, and whether the person is a college student or not.

If we try to store all this information using normal variables, we would need many different variables. We could also store them in an array, but arrays only store values by index. They do not clearly label what each value represents.

For example, in an array it might look like this:

["Soumyaditya", 22, "9876543210", "abc@email.com", true]

Looking at this array, it is hard to know which value represents the name, age, or phone number.

Objects solve this problem by storing data using keys that describe the values. Each value has a label.

Example:

name: "Soumyaditya"

Here name is the key and "Soumyaditya" the value.

Creating objects

Now let’s create a simple object. In JavaScript, objects are created using curly braces {}. Inside these braces, we write related key-value pairs and store the object in a variable.

Example:

let user = {
name: "Soumyaditya",
age: 22,
phone: "9876543210",
email: "abc@email.com",
isStudent: true
};

This way, all the related information about the user is stored in one structured object.

Accessing properties

Now that we know how to create an object, we also need to understand how to access the values stored inside it.

Unlike arrays, where we access values using a fixed index like 0, 1, or 2, objects work differently. In objects, we access values using their keys.

So if we want to access any value inside an object, we must know the key of that value.

There are mainly two ways to access properties in an object.

1. Dot Notation

Dot notation is the most common way to access properties in an object.

The syntax is simple. We write the object name, followed by a dot (.), and then the key of the property we want.

Example:

let user = { name: "Soumyaditya", age: 22 }; 
console.log(user.age);

In this example, user is the object.
By writing user.age, JavaScript looks for the age key inside the user object and returns its value.

2. Square Bracket Notation

Another way to access object properties is using square brackets [].

This method becomes very useful when the key contains spaces or special characters.

Example:

let user = { "uname obj": "soumyaditya" };

Here the key contains a space. If we try to access it using dot notation like this:

user.uname obj

JavaScript will throw an error.

Instead, we use square brackets and put the key inside quotes.

console.log(user["uname obj"]);

Using square brackets allows us to safely access properties even when the key contains spaces or unusual characters.

Updating Object Properties

Objects are flexible, which means we can easily change or update the value of a property whenever we need.

To update a property, we simply access the property using its key and assign a new value to it.

Example:

let user = {
  name: "Soumyaditya",
  age: 22,
  city: "Kolkata"
};

user.age = 23;

console.log(user.age);

In this example, the value of age was originally 22. After assigning a new value using user.age = 23The property gets updated.

Objects make updating data very simple because we can directly modify the value using the key of that property.

We can also update properties using square bracket notation.

Example:

user["city"] = "Delhi";

This will update the city value from "Kolkata" to "Delhi".

So whenever we need to modify data inside an object, we can easily do it by accessing the property and assigning a new value.

Adding and Deleting Properties

One useful feature of JavaScript objects is that we can add new properties or remove existing ones whenever we want.

Adding Properties

To add a new property, we simply use the object name and a new key, then assign a value to it.

Example:

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

student.course = "Computer Science";

console.log(student);

Here the object originally had only name and age.
After writing student.course = "Computer Science", a new property called course is added to the object.

Deleting Properties

Sometimes we may want to remove a property from an object.
JavaScript provides the delete keyword for this.

Example:

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

delete student.age;

console.log(student);

In this example, the age The property is removed from the object.

Because objects are dynamic in JavaScript, we can easily add, update, or delete properties whenever needed.

Looping Through Object Keys

Sometimes we need to see all the properties inside an object. For example, if an object contains many key-value pairs, it would be difficult to access each property manually.

JavaScript provides a simple way to go through all the keys of an object using a for...in loop.

Example:

let student = {
  name: "Aman",
  age: 21,
  course: "Web Development"
};

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

In this example, the loop goes through every key inside the student object and prints it.

Output:

name
age
course

If we want to print both the key and its value, we can access the value using bracket notation.

Example:

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

Output:

name: Aman
age: 21
course: Web Development

The for...in A loop is useful when we want to iterate through all the properties of an object without knowing the keys beforehand.

Conclusion

Objects are one of the most important data structures in JavaScript. They allow us to store related information together using key-value pairs, which makes data easier to organise and understand.

In this article, we learned what objects are and why they are useful. We also saw how to create objects, access their properties using dot and square bracket notation, update values, add new properties, delete existing ones, and loop through object keys.

Understanding objects is an important step in learning JavaScript because many real-world applications use objects to manage and structure data. Once you are comfortable with objects, it becomes much easier to work with more complex JavaScript concepts and build real projects.