This content originally appeared on DEV Community and was authored by Homeira K.
Objects are one of the most powerful and flexible data structures in JavaScript. If arrays are great for ordered lists, objects are your go-to when working with key-value pairs — where each piece of data has a name (a “key”) and a value. They’re perfect for representing real-world entities like users, books, products, or even video game items.
Let’s imagine you’re building a user profile system. Instead of juggling variables like this:
let name = “Jordan”;
let age = 30;
let email = “jordan@example.com“;
let isMember = true;
You can wrap all that data into one neat object:
let user = {
name: “Jordan”,
age: 30,
email: “jordan@example.com“,
isMember: true
};
Much cleaner, right?
So what is an object, really?
An object is a collection of key-value pairs. You define it using curly braces {}. The key is like a label, and the value can be anything — a string, number, boolean, array, another object, or even a function.
Here’s another example:
let book = {
title: “The Alchemist”,
author: “Paulo Coelho”,
year: 1988,
isAvailable: false
};
Each key in the object (title, author, year, etc.) is paired with its corresponding value.
Accessing and updating object values
To get a value from an object, use dot notation or bracket notation:
console.log(book.title); // “The Alchemist”
console.log(book[“year”]); // 1988
To update a value:
book.isAvailable = true;
To add a new key:
book.genre = “Fiction”;
And to remove a key:
delete book.year;
Why use objects?
- Organized structure: Store related info in a single variable
- Readable code: Easier to understand than scattered variables
- Dynamic: Add/remove keys on the fly
- Real-world modeling: Great for user profiles, inventory systems, and more
- Powerful pairing with arrays: Loop over object collections
A mix of objects and arrays
Objects get even more powerful when combined with arrays. For example, a collection of user objects:
let users = [
{ name: “Alice”, age: 25 },
{ name: “Bob”, age: 32 },
{ name: “Charlie”, age: 28 }
];
You can loop through the array and access each user’s info:
users.forEach(user => {
console.log(${user.name} is ${user.age} years old.);
});
Nested objects
Objects can contain other objects:
let library = {
section: “Fiction”,
book: {
title: “1984”,
author: “George Orwell”
}
};
One more cool trick: methods
An object can also store functions as values — called methods:
let dog = {
name: “Buddy”,
speak: function() {
console.log(“Woof!”);
}
};
dog.speak();
And that’s your five-minute crash course on JavaScript objects!
Objects are everywhere in JavaScript — from API responses to app settings to the window object itself. Master them, and you’re halfway to mastering JavaScript.
Until next time — keep your keys sharp and your values dynamic.
console.log(library.book.author); // “George Orwell”
Resources:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects
https://www.w3schools.com/js/js_objects.asp
Want a deep dive next time on methods or how to loop through objects? Let me know!
This content originally appeared on DEV Community and was authored by Homeira K.