By Saurabh Prajapati | Full-Stack Software Engineer at IBM India
Why I Decided to Explore This
When I first started learning JavaScript, arrays felt natural to me. A list of things? Easy. But then I kept running into this pattern everywhere in codebases at work:
const user = { name: "Saurabh", age: 25, city: "India" };
And I thought — wait, this looks different. What even is this?
That curiosity led me down a rabbit hole of JavaScript objects. And honestly? It was one of those topics where once it clicked, I started seeing it everywhere. APIs return objects. React state is an object. Config files are objects.
Let me walk you through everything I learned — step by step, the way I wish someone had explained it to me.
So... What Even Is an Object?
Think about a real person. They have a name, an age, a city they live in. Now, how would you store all of that in code?
You could use separate variables:
let name = "Saurabh";
let age = 25;
let city = "Ahmedabad";
But this gets messy fast. What if you had 100 users? You'd have 300 variables flying around.
That's where objects come in. An object lets you group related data together under one name.
const person = {
name: "Saurabh",
age: 25,
city: "Ahmedabad"
};
Clean, right? Everything about that person lives in one place.
The Key-Value Pair Structure
Here's the mental model that made it click for me:
An object is like a dictionary — or even a real-life ID card.
Every piece of information has a label (key) and a value.
┌─────────────────────────────┐
│ person │
├──────────────┬──────────────┤
│ KEY │ VALUE │
├──────────────┼──────────────┤
│ name │ "Saurabh" │
│ age │ 25 │
│ city │ "Ahmedabad" │
└──────────────┴──────────────┘
The key is always a string (or symbol, but let's not go there yet)
The value can be anything — a string, number, boolean, array, even another object
Wait, How Is This Different from an Array?
Great question — I confused these two at first.
Here's the honest difference:
// Array — ordered list, accessed by index (position)
const fruits = ["apple", "mango", "banana"];
console.log(fruits[0]); // "apple"
// Object — labeled data, accessed by key (name)
const person = { name: "Saurabh", age: 25 };
console.log(person.name); // "Saurabh"
| Feature |
Array |
Object |
| Stores |
Ordered list of items |
Key-value pairs |
| Access by |
Index (0, 1, 2) |
Key (name, age) |
| Best for |
Lists of similar things |
Describing one "thing" |
| Example |
List of users |
One user's details |
Use an array when you have a collection of things. Use an object when you want to describe one thing with multiple properties.
Creating Objects
There are a few ways to create objects. The most common (and cleanest) is the object literal syntax:
const person = {
name: "Saurabh",
age: 25,
city: "Ahmedabad"
};
That's it. Curly braces {}, key-value pairs separated by colons :, and commas , between pairs.
You can also create an empty object and add properties later (we'll get to that):
const person = {};
Accessing Properties
Okay, so we have an object. Now how do we read the values?
There are two ways to do this.
1. Dot Notation (Most Common)
const person = {
name: "Saurabh",
age: 25,
city: "Ahmedabad"
};
console.log(person.name); // "Saurabh"
console.log(person.age); // 25
console.log(person.city); // "Ahmedabad"
Simple and readable. This is what you'll use 90% of the time.
2. Bracket Notation
console.log(person["name"]); // "Saurabh"
console.log(person["age"]); // 25
Looks a bit unusual at first. But here's when it's actually really useful — when the key is stored in a variable:
const key = "name";
console.log(person[key]); // "Saurabh" 🎉
I didn't get why bracket notation existed until I hit this exact situation. Now I use it whenever the property name is dynamic (like from user input or an API response).
Updating Object Properties
Objects are mutable — you can change their values after creation.
const person = {
name: "Saurabh",
age: 25,
city: "Ahmedabad"
};
// Update an existing property
person.age = 26;
console.log(person.age); // 26
Wait, isn't person a const? Can we still change it?
Yes! const means you can't reassign the variable itself, but you can modify what's inside the object. This tripped me up early on.
// ❌ This will throw an error
person = { name: "Someone else" };
// ✅ This is perfectly fine
person.name = "SP";
Adding and Deleting Properties
Adding a New Property
Just assign to a new key — even if it didn't exist before:
const person = {
name: "Saurabh",
age: 25
};
// Add a new property
person.country = "India";
person.isAvailable = true;
console.log(person);
// { name: "Saurabh", age: 25, country: "India", isAvailable: true }
This felt almost too easy at first. No need to declare it — just assign and it's there.
Deleting a Property
Use the delete keyword:
delete person.age;
console.log(person);
// { name: "Saurabh", country: "India", isAvailable: true }
Honestly, I rarely use delete in real projects. It's cleaner to either set a property to null or undefined, or just not include it at all. But it's good to know.
Looping Through Object Keys
Here's something I spent too long Googling before it stuck.
You can't loop over an object with a regular for loop like you do with arrays. Objects aren't indexed.
But you have a few solid options:
Option 1: for...in Loop
const person = {
name: "Saurabh",
age: 25,
city: "Ahmedabad"
};
for (let key in person) {
console.log(key + ": " + person[key]);
}
// name: Saurabh
// age: 25
// city: Ahmedabad
This loops over every key in the object. Notice how we use bracket notation person[key] here — because key is a variable. Dot notation wouldn't work!
Option 2: Object.keys(), Object.values(), Object.entries()
These are super useful helpers:
// Get all keys as an array
console.log(Object.keys(person));
// ["name", "age", "city"]
// Get all values as an array
console.log(Object.values(person));
// ["Saurabh", 25, "Ahmedabad"]
// Get key-value pairs as an array of arrays
console.log(Object.entries(person));
// [["name", "Saurabh"], ["age", 25], ["city", "Ahmedabad"]]
I use Object.entries() a lot when I need to loop with both the key and the value at the same time:
for (let [key, value] of Object.entries(person)) {
console.log(`\({key}: \){value}`);
}
This blew my mind when I first saw it. So clean!
Key Discoveries Along the Way
Here's what surprised me most:
Objects can hold anything as values — including functions (which become "methods") and other objects. This is how things like console.log() actually work.
Properties don't have to be valid variable names — if your key has spaces or special characters, you must use quotes and bracket notation:
const obj = { "my-key": "value" };
console.log(obj["my-key"]); // "value"
Order isn't guaranteed — well, mostly. Numeric keys are sorted first, then string keys in insertion order. Don't rely on order if you need a sorted list — use an array instead.
Practical Application: Where You'll Actually Use This
Once I understood objects, I started noticing them everywhere:
API responses — almost every API returns JSON, which is just... objects
React state — useState({ loading: false, data: null, error: null })
Config files — package.json is literally a JavaScript object
Function parameters — passing objects as arguments keeps code clean
A quick real-world example from my work at IBM with enterprise apps:
// A config object for a Maximo API call
const apiConfig = {
endpoint: "/api/mbo/workorder",
method: "GET",
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer token123"
},
timeout: 5000
};
Once you understand objects, patterns like this start making complete sense.
Wrapping Up
Alright, let's recap what we covered:
What objects are — key-value pairs that group related data
How to create them — using object literal syntax {}
Accessing properties — dot notation and bracket notation (and when to use each)
Updating properties — direct assignment
Adding and deleting — just assign new keys or use delete
Looping — for...in, Object.keys(), Object.values(), Object.entries()
Objects are one of those foundational topics in JavaScript that everything else builds on. Spend time here, experiment in your browser console, and build a few small things with them.
Have a go at the student assignment above, and if you feel confident, try creating an object that represents yourself — name, skills (as an array!), and current role.
I'm still exploring deeper object patterns myself — things like object destructuring, the spread operator, and object methods. If you want me to cover those next, let me know!
About the Author
Saurabh Prajapati is a Full-Stack Software Engineer at IBM India Software Lab, where he works on Maximo — building cloud-native, enterprise-level solutions.
He specializes in GenAI, React, and modern web technologies, and loves sharing his learning journey with the developer community. He's worked across multiple companies building AI-powered tools, enterprise applications, and scalable web platforms.
