Skip to main content

Command Palette

Search for a command to run...

Understanding Objects in JavaScript

Every object is an envelope. Inside: clues. Each key unlocks a value.

Updated
•9 min read•View as Markdown
Understanding Objects in JavaScript
J

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"
What is an Object — key-value pairs

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 vs Object — side by side comparison
// 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.

Scene 02 — Creating and Accessing objects

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.

Scene 03 — Update, Add, Delete properties

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.

Scene 04 — Object.keys, values, entries, and for...in

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.

Scene 05 — Object.freeze() — the final twist
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 ones

  • Update a property by reassigning it, add by assigning a new key, delete with delete obj.key

  • for...in loops through all keys

  • Object.keys(), .values(), .entries() return arrays you can then chain methods on

  • Object.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. 🕵️😉