Skip to main content

Command Palette

Search for a command to run...

๐Ÿ—‚๏ธ Meet Armaan And Why JavaScript is a Better Way to Store my Life

A beginner's guide to JavaScript Objects told through a real and authentic story

Updated
โ€ข5 min read
๐Ÿ—‚๏ธ Meet Armaan  And Why JavaScript is a Better Way to Store my Life

The Problem With Lists

I just joined a new gym. on my first day i saw that the receptionist pulled out a notebook and started scribbling something on it

Armaan
21
Calgary
Mota 

A week later, someone new picked up that notebook. They stared at the four lines.
"Is 21 his age or his membership number? Is Calgary where he lives or where he was born? "

The data was there. But context was missing.

// โŒ Array โ€” data without context
const armaan = ["Armaan", 21, "Calgary", "Mota"];

console.log(armaan[1]); // 21 โ€” but what does 1 mean?

Arrays are great for ordered lists a queue of tasks, a list of scores, days of the week. But when you're describing a thing like a person, a product, a car you need labels. You need meaning attached to data.

That's where JavaScript Objects walk in.


What is an Object?

When I actually registered at the gym, the receptionist handed me a form:

Name    : Armaan
Age     : 21
City    : Calgary
Role    : Fitness Enthusiast

Every field has a label (key) and a value. That's exactly what a JavaScript object is a collection of key-value pairs.

const armaan = {
  name: "Armaan",
  age: 21,
  city: "Calgary",
  role: "Fitness Enthusiast"
};


Now anyone reading this code immediately understands what each value means. No guessing. No confusion.

Here's how the structure looks visually:

โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
โ”‚             arjun  (object)             โ”‚
โ”‚                                         โ”‚
โ”‚   KEY       โ”‚   VALUE                                           โ”‚
โ”‚  โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”‚โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€     
โ”‚   name      โ”‚   "Armaan"    (string)    โ”‚  
โ”‚   age       โ”‚   21         (number)     โ”‚
โ”‚   city      โ”‚   "Calgary"  (string)     โ”‚
โ”‚   role      โ”‚   "Fitness Enthusiast"    โ”‚
โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜

๐Ÿ’ก Chamka Point : Use an array when order matters. Use an object when labels matter.


Sharma Ji Ki Family โ€” Array vs Object

Array: "Beta, tu toh sirf number hai ghar mein pehle aa, doosre aa, teesre aa. Koi naam nahi, bas position hai teri. JAISE BHAI TERI IMPORTANCE HAI GHARPE - KUCHBHI" [0] โ†’ "Armaan" [1] โ†’ 27 [2] โ†’ "Calgary"

Object: "Aur yeh dekho โ€” iska toh naam bhi hai, kaam bhi hai, pehchaan bhi hai!" name โ†’ "Armaan" age โ†’ 21 city โ†’ "Calgary"

Array : Roll No. 1 - koi identity nahi ๐Ÿ˜ข

Object: Arjun Sharma - IIT, Pune, topper ๐Ÿ˜Ž


Accessing Properties

Three days in, My's personal trainer wants to greet me by name before his session. She opens my profile and looks up just the name field.

In JavaScript, you access object properties in two ways:

Dot Notation - Saaf aur Simple

console.log(arjun.name);  // "Armaan"
console.log(arjun.age);   // 21
console.log(arjun.city);  // "Calgary"

simple bolu to mostly yehi use hoga (we would be using this most of the time)

Bracket Notation - Flexible and Dynamic

console.log(armaan["name"]);  // "Armaan"

// Useful when the key is stored in a variable
const field = "city";
console.log(arjun[field]);   // "Calgary"

๐Ÿ’ก Chamka Point - Dot notation --- > when you know the key name upfront.
Bracket notation ---> when the key is dynamic or comes from a variable.


Updating Properties

Three months pass. i got a job offer in NYC and relocated. The gym needs to update my city on record.

armaan.city = "NYC";
armaan.age = 22; // Birthday came around too ๐ŸŽ‚

console.log(armaan);
// { name: "Armaan", age: 22, city: "NYC", role: "Fitness Enthusiast" }

Updating a property is as simple as watching reels rather then attending live class.


Adding and Deleting Properties

I am now a serious member. The gym assigns me a personal trainer and a locker hihihih . But my profile needs new fields:

// Adding new properties
arjun.trainer = "Hitesh sir";
arjun.lockerNumber = 69; // Lucky number hai

You simply assign a value to a key that doesn't exist yet JavaScript creates it automatically. No special syntax needed.

Six months later, Arjun decides to go solo and cancels his personal trainer. Time to remove that field:

// Deleting a property
delete armaan.trainer;

console.log(armaan.trainer); // undefined โ€” tata by by gaya 

The delete keyword removes the key-value pair from the object entirely.


Looping Through an Object

It's year-end and the gym is running a full member audit. The manager wants to print every detail about me without manually typing each key. This is where for...in comes in:

for (let key in armaan) {
  console.log(key + ": " + armaan[key]);
}

Output:

name: Armaan
age: 22
city: NYC
role: Fitness Enthusiast
lockerNumber: 69

๐Ÿ’ก Chamka Point - armaan[key] uses bracket notation โ€” because key is a variable holding the key name at runtime. This is exactly the moment bracket notation becomes essential.

You can also grab just the keys or just the values:

console.log(Object.keys(armaan));
// ["name", "age", "city", "role", "lockerNumber"]

console.log(Object.values(armaan));
// ["Armaan", 22, "NYC", "Fitness Enthusiast", 69]

What's Next?

You now know how to create, read, update, add, delete, and loop through objects and that covers the vast majority of what you'll use in real JavaScript projects.

When you're ready to go deeper, look into:

  • Nested objects โ€” objects inside objects

  • Methods โ€” when an object's value is a function

  • Object destructuring โ€” a cleaner way to pull out values

But for now? Go build something with what you have. I would be proud. ๐Ÿ’ช


Found this helpful? Drop a reaction and share it with someone who's just starting out with JavaScript!