# Understanding Objects in JavaScript — A Developer's Exploration

> *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:

```javascript
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:

```javascript
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.

```javascript
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**.

```plaintext
┌─────────────────────────────┐
│         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:

```javascript
// 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:

```javascript
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):

```javascript
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)

```javascript
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

```javascript
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:

```javascript
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.

```javascript
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.

```javascript
// ❌ 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:

```javascript
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:

```javascript
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

```javascript
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:

```javascript
// 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:

```javascript
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:
    
    ```javascript
    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:

```javascript
// 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.

*   📧 [saurabhprajapati120@gmail.com](mailto:saurabhprajapati120@gmail.com)
    
*   💻 GitHub: [prajapatisaurabh](https://github.com/prajapatisaurabh)
    
*   🔗 LinkedIn: [saurabh-prajapati](https://linkedin.com/in/saurabh-prajapati)