Understanding Objects in JavaScript
Let’s think about how we describe things in the real world. If someone asks you to describe yourself, you wouldn't just hand them a random list of facts like: ["Suprabhat", 23, "Meerut", true].
If you store this data in a JavaScript Array (which we learned about recently), the computer only knows these values by their numbered position (index 0, index 1, index 2). Looking at myArray[1], another developer might wonder: Is 25 their age? Their lucky number? The day they were born? Arrays are fantastic for ordered lists of similar items (like a list of groceries or a list of emails). But when you want to describe a single, complex thing, like a user profile, a product in a store, or a specific car, arrays fall short because the data loses its context.
To solve this problem, we need a way to attach labels to our data so we always know exactly what it means. This is exactly what Objects are designed to do.
In this blog, we will understand what objects are, how to create them, how to read and change their data, and how objects are fundamentally different from arrays.
What Objects Are and Why We Need Them
In JavaScript, an Object is a collection of related data stored in key-value pairs.
Think of an object like a dictionary or a physical file folder. The key is the label on the folder (like "Name" or "Age"), and the value is the actual paper inside the folder ("Suprabhat" or 23).
This key-value structure means you no longer have to remember that index 0 is the name and index 1 is the age. You just ask the object for its name or its age directly.
Creating an Object
To create an object, we use curly braces {}. Inside, we write our keys and values, separated by a colon :. Each key-value pair (called a property) is separated by a comma.
Let's create a real-world example of a person object:
let person = {
name: "Suprabhat",
age: 23,
city: "Meerut"
};
console.log(person);
// Output: { name: 'Suprabhat', age: 23, city: 'Meerut' }
The Difference Between Arrays and Objects
To make this crystal clear, let's look at them side-by-side:
- Array: Best for a list of similar things. Order matters. Accessed by numbers (indexes).
let userArray = ["Suprabhat", 23, "Meerut"];
console.log(userArray[0]); // We just have to guess that 0 is the name
- Object: Best for describing one complex thing. Order does not matter. Accessed by labels (keys).
let userObject = { name: "Suprabhat", age: 23, city: "Meerut" };
console.log(userObject.name); // It is very clear what we are getting
Accessing Object Properties
Once you have data inside an object, there are two main ways to read it: Dot Notation and Bracket Notation.
1. Dot Notation (The Most Common Way)
You simply write the object's name, a dot ., and the key you want to access. It is clean and easy to read.
let person = { name: "Suprabhat", age: 23 };
console.log(person.name); // Output: Suprabhat
console.log(person.age); // Output: 23
2. Bracket Notation (The Flexible Way)
Sometimes, dot notation doesn't work. For example, if your key has a space in it (like "first name") or if you are using a variable to find the key. In these cases, you use square brackets [] and pass the key as a string.
let person = { name: "Suprabhat", "favorite color": "Green" };
// console.log(person.favorite color); // This would cause an error!
console.log(person["favorite color"]); // Output: Green
// Using a variable:
let whatToFind = "name";
console.log(person[whatToFind]); // Output: Suprabhat
Updating, Adding, and Deleting Properties
Objects are highly flexible. Even after you create an object, you can easily change its contents.
Updating an existing property:
If the key already exists, assigning a new value will simply overwrite the old one.
let person = { name: "Suprabhat", age: 22 };
person.age = 23; // Happy Birthday!
console.log(person.age); // Output: 23
Adding a new property:
If the key does not exist yet, JavaScript will automatically create it for you.
let person = { name: "Suprabhat", age: 23 };
person.job = "Developer"; // Adds a new key-value pair
console.log(person);
// Output: { name: 'Suprabhat', age: 23, job: 'Developer' }
Deleting a property:
If you want to completely remove a key-value pair, use the delete keyword.
let person = { name: "Suprabhat", age: 23, city: "Meerut" };
delete person.city;
console.log(person);
// Output: { name: 'Suprabhat', age: 23 }
Looping Through Object Keys
With an array, we used a standard for loop to count through the numbered indexes. But objects don't use numbered indexes!
To loop through all the keys in an object, JavaScript gives us a special loop called the for...in loop.
let person = {
name: "Suprabhat",
age: 23,
city: "Meerut"
};
for (let key in person) {
// 'key' will be "name", then "age", then "city"
// 'person[key]' gives us the matching value
console.log(key + " is " + person[key]);
}
// Output:
// name is Suprabhat
// age is 23
// city is Meerut
Note: We must use bracket notation person[key] here because key is a variable changing on every loop!
Conclusion
Objects are essential for structuring data in a meaningful way. By using key-value pairs, objects allow you to label your data so that it is always clear, readable, and easy to manage. While arrays are your go-to for lists, objects are your ultimate tool for describing specific, detailed items.
