Understanding Objects in JavaScript
Every object is an envelope. Inside: clues. Each key unlocks a value.

Turning chai into code and ideas into full-stack applications. Sharing lessons from my development journey, one commit at a time.
The Detective's Case File — JavaScript Objects
Every object is an envelope. Inside: clues. Each key unlocks a value.
It's midnight. Detective Aryan receives a sealed envelope on his desk.
What's inside, a JavaScript object — a scrambled collection of clues about a suspect. He has one night to read it, reshape it, update the evidence, and make absolutely sure nobody tampers with it before court.
By the end of this blog, you'll know exactly how he did it.
🗃️ Before the Case — What is an Object?
You already know arrays — ordered lists accessed by index number.
Objects are different. Instead of numbered slots, objects use named slots. Instead of asking "what's at position 2?", you ask "what is the suspect's name?"
An object is a collection of key-value pairs. Each key is a label. Each value is the data stored under that label. Together, they describe one thing in detail.
// An array — ordered, accessed by index
const reps = [5, 12, 3];
reps[0]; // 5
// An object — named, accessed by key
const suspect = {
name: "Victor Malhotra",
age: 42,
motive: "greed",
alibi: false
};
suspect.name; // "Victor Malhotra"
Every entry inside {} is a property — a key followed by a colon, followed by its value.
const suspect = {
name: "Victor Malhotra", // key: "name", value: "Victor Malhotra"
age: 42, // key: "age", value: 42
motive: "greed", // key: "motive", value: "greed"
alibi: false // key: "alibi", value: false
};
Three things every object guarantees:
Named — every value has a meaningful label, not just a position number
Flexible — values can be strings, numbers, booleans, arrays, even other objects
Mutable — you can add, update, or remove properties at any time (unless frozen — more on that soon)
💡 Think of an object as a form filled out for one person. Each field on the form is a key. What they wrote in that field is the value.
Array vs Object — Which One Do You Use?
This is the question every beginner stumbles on. Here's the rule:
Use an array when you have a list of similar items in order
Use an object when you're describing one thing with multiple named properties
// Array — a list of suspects (ordered, same type)
const suspects = ["Victor", "Priya", "Dev"];
suspects[0]; // "Victor" — first in the list
// Object — one suspect described in detail (named properties)
const suspect = {
name: "Victor",
age: 42,
city: "Mumbai"
};
suspect.name; // "Victor" — accessed by label
| Array | Object | |
|---|---|---|
| Access by | Index number ([0], [1]) |
Key name (.name, ["age"]) |
| Best for | Lists, sequences, ordered data | Describing one entity |
| Order matters? | Yes | No |
| Example | [88, 92, 76] scores |
{ name, age, score } student |
📌 Creating an Object
Aryan sits down at his desk. First order of business: create the suspect's case file.
You create an object using curly braces {} — called an object literal. Inside, you list your key-value pairs separated by commas.
// Object literal — the most common way to create objects
const suspect = {
name: "Victor Malhotra",
age: 42,
city: "Mumbai",
motive: "greed",
alibi: false
};
Keys are always strings (though you don't need quotes around them when they're simple words). Values can be any data type.
const caseFile = {
id: "CF-2024-007", // string
priority: 1, // number
solved: false, // boolean
suspects: ["Victor", "Dev"], // array
leadDetective: { // nested object
name: "Aryan",
badge: "A-42"
}
};
📌 Opening the Envelope: Accessing Properties
The case file is sealed. Aryan needs to read it. There are two ways to open it — two notations.
Dot notation — the everyday tool
const suspect = {
name: "Victor Malhotra",
age: 42,
motive: "greed"
};
suspect.name; // "Victor Malhotra"
suspect.age; // 42
suspect.motive; // "greed"
suspect.weapon; // undefined ← key doesn't exist
Bracket notation — for dynamic keys
// When you know the key upfront — use dot
suspect.name;
// When the key is stored in a variable — use brackets
const field = "motive";
suspect[field]; // "greed" ← reads the variable's value as the key
// Also useful for keys with spaces or special characters
suspect["full name"] = "Victor R. Malhotra";
suspect["full name"]; // works — dot notation wouldn't
💡 Use dot notation by default. Switch to bracket notation when your key is dynamic (stored in a variable) or when it contains spaces or special characters.
📌 The Evidence Changes: Updating, Adding, Deleting
New witnesses come forward. The evidence shifts. Aryan updates the file.
Updating an existing property
const suspect = { name: "Victor", age: 42, motive: "greed" };
// Change age — key already exists, just reassign
suspect.age = 43;
console.log(suspect.age); // 43
// Works with bracket notation too
suspect["motive"] = "revenge";
console.log(suspect.motive); // "revenge"
Adding a new property
// Key doesn't exist yet — just assign it
suspect.weapon = "candlestick";
suspect.location = "library";
console.log(suspect);
// { name: "Victor", age: 43, motive: "revenge",
// weapon: "candlestick", location: "library" }
Deleting a property
// Remove a key entirely
delete suspect.alibi;
console.log(suspect.alibi); // undefined ← gone
console.log("alibi" in suspect); // false ← key no longer exists
| Operation | Syntax | Result |
|---|---|---|
| Update | suspect.age = 43 |
Value changes |
| Add | suspect.weapon = "x" |
New key added |
| Delete | delete suspect.alibi |
Key removed |
| Check exists | "alibi" in suspect |
true or false |
📌 Reading the Full File: Looping Through Objects
Aryan needs to read every single clue — not just one. He needs to loop.
for...in — loop through all keys
const suspect = {
name: "Victor",
age: 42,
motive: "greed"
};
for (let key in suspect) {
console.log(key, ":", suspect[key]);
}
// name : Victor
// age : 42
// motive : greed
Object.keys(), Object.values(), Object.entries()
These three give you an array back — which means you can then use all your array methods on them.
Object.keys(suspect);
// → ["name", "age", "motive"]
Object.values(suspect);
// → ["Victor", 42, "greed"]
Object.entries(suspect);
// → [["name", "Victor"], ["age", 42], ["motive", "greed"]]
Practical example — print a full summary
Object.entries(suspect).forEach(([key, value]) => {
console.log(`\({key}: \){value}`);
});
// name: Victor
// age: 42
// motive: greed
💡
Object.entries()is the most powerful of the three — it gives you both the key and value together, making it perfect for transforming or displaying object data.
📌 The Final Twist: Object.freeze()
Victor knew the evidence file would be reviewed in court. So he planned to tamper with it the night before — change his alibi, flip a witness statement, vanish a motive.
What he didn't count on: Detective Aryan had frozen the object.
const alibi = {
location: "home",
witness: true
};
// Lock it down — nothing can be changed
Object.freeze(alibi);
// Tamper attempt — silently fails in normal mode, throws in strict mode
alibi.location = "restaurant";
alibi.witness = false;
delete alibi.location;
// Evidence untouched
console.log(alibi.location); // "home" ← unchanged
console.log(alibi.witness); // true ← unchanged
// Check if frozen
Object.isFrozen(alibi); // true
💡
Object.freeze()makes an object immutable — no property can be added, updated, or deleted. This is useful for constants, configuration objects, and any data that should never change after creation.
Victor forgot to freeze his alibi. One mutation. Case closed. 🔒
🧠 Quick Cheat Sheet — All Object Operations
const suspect = {
name: "Victor",
age: 42,
motive: "greed"
};
// CREATE
const obj = { key: value };
// ACCESS
suspect.name; // dot notation
suspect["name"]; // bracket notation
// UPDATE
suspect.age = 43;
// ADD
suspect.weapon = "candlestick";
// DELETE
delete suspect.alibi;
// CHECK
"name" in suspect; // true / false
// LOOP
for (let key in suspect) { ... }
// READ COLLECTIONS
Object.keys(suspect); // ["name", "age", "motive"]
Object.values(suspect); // ["Victor", 42, "greed"]
Object.entries(suspect); // [["name","Victor"], ...]
// FREEZE
Object.freeze(suspect); // nothing can change now
🏋️ Today's Assignment
Open your browser console. The detective's orders.
// Step 1 — Create a student object
const student = {
name: "Aryan",
age: 22,
course: "JavaScript"
};
// Step 2 — Add a new property
student.grade = "A";
// Step 3 — Update one property
student.age = 23;
// Step 4 — Print all keys and values using a loop
for (let key in student) {
console.log(`\({key}: \){student[key]}`);
}
// name: Aryan
// age: 23
// course: JavaScript
// grade: A
// Step 5 — Try Object.keys, values, entries
console.log(Object.keys(student));
console.log(Object.values(student));
// Step 6 — Delete the grade and verify it's gone
delete student.grade;
console.log("grade" in student); // false
💡 Bonus: Try
Object.freeze(student)at the end and see what happens when you try to change a property.
🔑 Key Takeaways
An object stores key-value pairs — named data about one thing
Use dot notation (
obj.key) for known keys, bracket notation (obj["key"]) for dynamic onesUpdate a property by reassigning it, add by assigning a new key, delete with
delete obj.keyfor...inloops through all keysObject.keys(),.values(),.entries()return arrays you can then chain methods onObject.freeze()locks the object permanently — nothing can mutate it
Found this useful? Drop a reaction and share with someone learning JavaScript. See you in next blog. 🕵️😉