Skip to main content
HashnodeThitaInfo Blogs

Command Palette

Search for a command to run...

Understanding Objects in JavaScript — A Developer's Exploration

Published
•9 min read
Understanding Objects in JavaScript — A Developer's Exploration
S
Saurabh Prajapati

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.

#chaiaurcode#saurabhprajapati#thitainfo#hiteshchoudharylco#chaicode#webdevcohort2026

More from this blog

ThitaInfo Blogs

37 posts

Making AI simple, fun, and practical for developers.