JS Objects - Silent Mutation Broke User Sessions

Every real-world app you use — Instagram, Spotify, your bank's website — is built on data. A song has a title, an artist, a duration, and a genre. A user has a name, an email, and an age. If you tried to store all of that in separate, disconnected variables, your code would become impossible to manage before you even got started. JavaScript objects are the solution to this exact problem, and they're at the heart of almost everything you'll ever build on the web.

Before objects, imagine needing to track five pieces of information about 100 users. That's 500 variables. And when you pass data to a function, you'd need to pass all five separately every single time. Objects let you wrap all related data into one tidy package and hand it around your code as a single unit. They reflect how we naturally think about things in the real world — as entities with multiple characteristics.

By the end of this article you'll know how to create objects from scratch, read and update their properties using both dot notation and bracket notation, add and delete properties on the fly, loop over an object's contents, and understand the difference between primitive values and objects (a concept that trips up almost every beginner). You'll be ready to use objects confidently in real projects.

What Is a JavaScript Object and How Do You Create One?

An object in JavaScript is a collection of key-value pairs. The 'key' is the name of a piece of information (like 'firstName'), and the 'value' is the actual data stored under that name (like 'Sarah'). Together, each key-value pair is called a property.

The most common and readable way to create an object is with curly braces {}. This is called an object literal, and it's the go-to syntax for most JavaScript developers.

Inside the curly braces, you list your properties separated by commas. Each property is written as key: value. The key is usually written without quotes (unless it contains spaces or special characters), and the value can be any data type — a string, a number, a boolean, an array, or even another object.

Notice how grouping related data this way instantly makes your code more readable. Instead of six separate variables floating around, everything about a user lives in one place. That's the core win objects give you.

// Creating an object using object literal syntax — the most common approach
const userProfile = {
  firstName: 'Sarah',          // string property
  lastName: 'Okonkwo',         // string property
  age: 28,                     // number property
  isPremiumMember: true,       // boolean property
  favouriteGenres: ['jazz', 'lo-fi', 'classical'], // array as a property value
};

// Let's see the whole object printed to the console
console.log(userProfile);

// You can also create an empty object first, then add properties later
const emptyCart = {};
console.log(emptyCart); // prints an empty object — useful when you build data dynamically

Reading and Updating Object Properties — Dot vs Bracket Notation

Once you have an object, you need to get data out of it and put new data in. There are two ways to access a property: dot notation and bracket notation. Both do the same job — pick the right one for the situation.

Dot notation (object.propertyName) is cleaner and the one you'll use 90% of the time. Bracket notation (object['propertyName']) is more flexible — it lets you use a variable as the key, which is powerful when you don't know the property name until the code actually runs.

Updating a property is just as simple — you access it the same way and assign a new value with =. If the property doesn't exist yet, this same syntax creates it. There's no separate 'add property' command. Assignment does it all.

Deleting a property uses the delete keyword. It completely removes the key-value pair from the object, not just sets it to null. Use this with care — deleting properties can sometimes affect performance in JavaScript engines that optimise objects.

const bookListing = {
  title: 'The Pragmatic Programmer',
  author: 'David Thomas',
  pageCount: 352,
  isAvailable: true,
};

// --- DOT NOTATION --- clean and readable when you know the key name upfront
console.log(bookListing.title);       // reading the title property
console.log(bookListing.pageCount);   // reading the page count

// --- BRACKET NOTATION --- use this when the key is stored in a variable
const propertyToLookUp = 'author';    // we only know the key at runtime
console.log(bookListing[propertyToLookUp]); // bracket notation reads the variable's value as the key

// --- UPDATING a property --- same syntax, just assign a new value
bookListing.isAvailable = false;      // the book has been checked out
console.log(bookListing.isAvailable); // now false

// --- ADDING a new property --- just assign to a key that doesn't exist yet
bookListing.rating = 4.8;             // this property didn't exist before
console.log(bookListing.rating);      // JavaScript creates it on the spot

// --- DELETING a property ---
delete bookListing.pageCount;         // remove the pageCount property entirely
console.log(bookListing.pageCount);   // undefined — the property is gone

Looping Over an Object and Nesting Objects Inside Objects

Most real-world objects contain more properties than you'd want to type out one by one. JavaScript gives you a for...in loop specifically designed to iterate over every key in an object. On each iteration, the loop gives you the current key as a string, and you use bracket notation to get the value.

Objects can also be nested — meaning a property's value can itself be an object. This is how real data is structured. Think of a user profile that has an address: the address has a street, a city, and a postcode. It makes sense to group those three inside their own nested object rather than flattening everything into one level.

To access deeply nested properties, you just chain dot notation: user.address.city. Read it left to right — start at user, go into the address object, then grab the city property inside it.

Be careful with for...in — it can loop over inherited properties from the object's prototype chain in some situations. Using hasOwnProperty() is a defensive habit that guarantees you only touch properties you actually defined.

// A nested object — the address is an object living inside userAccount
const userAccount = {
  username: 'galaxy_dev',
  email: 'alex@example.com',
  followersCount: 1240,
  address: {                        // nested object starts here
    street: '42 Maple Avenue',
    city: 'Bristol',
    postcode: 'BS1 4AA',
  },
};

// Accessing a nested property — chain dot notation
console.log(userAccount.address.city);     // drill into address, then grab city
console.log(userAccount.address.postcode); // same idea, different property

console.log('--- Looping over top-level properties ---');

// for...in loops over every key in the object
for (const key in userAccount) {
  // hasOwnProperty guards against accidentally looping over inherited properties
  if (userAccount.hasOwnProperty(key)) {
    console.log(`${key}: ${userAccount[key]}`); // bracket notation uses the key variable
  }
}

// Object.keys() is a modern alternative — returns an array of own keys only
console.log('--- Using Object.keys() ---');
const keys = Object.keys(userAccount);
console.log(keys); // clean array of just the property names

Objects Are Reference Types — the Concept That Trips Everyone Up

Here's the thing that bites almost every beginner at some point: objects in JavaScript don't behave like numbers or strings when you copy or compare them.

With a number or string (primitive types), when you assign one variable to another, you get a true independent copy. Change one and the other is unaffected.

With objects, when you assign one variable to another, you don't copy the object — you copy the reference to it. Both variables now point at the exact same object in memory. So if you change a property through one variable, the other variable reflects that change too, because they're both looking at the same thing.

This also means two objects that look identical are NOT equal when you compare them with ===, because === checks whether they're the same reference (the same object in memory), not whether they have the same content.

To make a true shallow copy of an object, use the spread operator ({...originalObject}) or Object.assign(). For deeply nested objects, you need a deep clone, which JSON.parse(JSON.stringify(obj)) handles for simple cases.

// --- Demonstrating the reference behaviour ---

const originalOrder = {
  item: 'Mechanical Keyboard',
  quantity: 1,
  dispatched: false,
};

// This does NOT create a copy — both variables point at the same object
const orderReference = originalOrder;

orderReference.dispatched = true; // we change it through orderReference...
console.log(originalOrder.dispatched); // ...but originalOrder reflects the change too!

// --- Making a true shallow COPY using the spread operator ---
const orderCopy = { ...originalOrder }; // spread creates a new object with the same properties

orderCopy.quantity = 3;               // changing the copy
console.log(originalOrder.quantity);  // original is untouched — they're now separate
console.log(orderCopy.quantity);      // the copy has the updated value

// --- Equality check on objects ---
const cartA = { product: 'Notebook', price: 4.99 };
const cartB = { product: 'Notebook', price: 4.99 };

console.log(cartA === cartB); // false — same content, but different objects in memory
console.log(cartA === cartA); // true — same reference, pointing at the exact same object

Object Spreading and Merging – Combining Objects Safely

When you need to combine multiple objects into one, or create a new object from an existing one with modifications, the spread operator (...) is your best friend. Introduced in ES6, spread allows you to copy properties from one object into another elegantly.

For merging two objects, you can do: const merged = { ...objA, ...objB }. If both have the same property, the later source overwrites the earlier one. This is a shallow merge — nested objects are still shared references.

Object.assign() is the older alternative and does the same shallow merge. The spread syntax is generally preferred for readability.

Be careful with deep merging. A simple spread will not clone nested objects; they remain references. For a deep merge, you need to recursively merge or use a utility like Lodash's _.merge() or structuredClone() combined with spread.

// Shallow merge using spread
const defaults = { theme: 'light', notifications: true };
const userPrefs = { theme: 'dark', fontSize: 14 };
const config = { ...defaults, ...userPrefs };
console.log(config);
// { theme: 'dark', notifications: true, fontSize: 14 }

// Object.assign alternative
const config2 = Object.assign({}, defaults, userPrefs);

// Shallow copy and modify a property
const original = { a: 1, b: { c: 2 } };
const copy = { ...original, b: { ...original.b } }; // manually deep clone nested

// Deep merge using JSON (simple case, no functions/dates)
const deepCopy = JSON.parse(JSON.stringify(original));