Objects: Working With Real-World Data Structures

Arrays are great for ordered lists, but most real-world data is actually a collection of named properties, not a numbered list — a user has a name, an email, and an age, not item 0, item 1, item 2. That's what objects are for, and they're arguably the most important data structure in JavaScript, since arrays, functions, and even classes are all built on top of the same underlying object mechanics.

const user = {
  name: "Tony Stark",
  alias: "Iron Man",
  age: 45,
  isHero: true
};
console.log(user.name);
console.log(user["alias"]);

Reading And Writing Object Properties

An object is a set of key-value pairs wrapped in curly braces. You can read a property with dot notation (user.name) or bracket notation (user["alias"]) — they do the same thing, but bracket notation is required when the key is stored in a variable or contains characters dot notation can't handle, like a space or a hyphen.

const field = "age";
console.log(user[field]);

const data = { "first-name": "Vikesh" };
console.log(data["first-name"]);

user[field] works because field holds the string "age" at runtime — dot notation can't do this, since user.field would literally look for a property named "field," not whatever field contains. This distinction matters a lot once you're building anything dynamic, like reading form data where the field name comes from user input.

Adding And Removing Properties

Adding, changing, and removing properties is straightforward.

user.email = "tony@starkindustries.test";
user.age = 46;
delete user.isHero;
console.log(user);

Assigning to a property that doesn't exist yet creates it; assigning to one that exists overwrites it; delete removes it entirely. Note this works even though user was declared with const — as covered in lesson 2, const locks the variable binding, not the object's contents.

Working With Arrays Of Objects

Real applications almost always deal with arrays of objects — think a list of blog posts, users, or products. This combination is where the array methods from the last lesson really shine.

const posts = [
  { title: "JavaScript Basics", author: "Vikesh Singh", published: true },
  { title: "Draft Post", author: "Tony Stark", published: false },
  { title: "Advanced CSS", author: "Vikesh Singh", published: true }
];

const published = posts.filter(p => p.published);
console.log(published.length);

const titles = published.map(p => p.title);
console.log(titles);

filter() keeps only the published posts, and map() pulls out just the titles into a plain array of strings. This filter-then-map pattern is one of the most common things you'll write in real projects — it's exactly how you'd prepare data to display on a page.

Destructuring Objects And Arrays

A feature worth knowing: object and array destructuring, which lets you pull values out into their own variables in one line instead of repeating object.property everywhere.

const { name, alias } = user;
console.log(name, alias);

const [first, second] = ["Vikesh", "Tony"];
console.log(first, second);

function describe({ name, age }) {
  return name + " is " + age + " years old";
}
console.log(describe(user));

Destructuring in a function parameter, like in describe(), is extremely common once you start working with APIs that return objects — it lets you grab exactly the fields you need without first assigning the whole object to a throwaway variable name.

Comparing Objects With Strict Equality

One common beginner mistake worth flagging directly: trying to compare two objects with === and expecting them to be equal just because they look the same.

const a = { x: 1 };
const b = { x: 1 };
console.log(a === b);
console.log(a === a);

a === b is false, even though they have identical contents, because === for objects checks whether both sides point to the exact same object in memory, not whether their contents match. a === a is true, because it's literally the same object referenced twice. This is a very common source of "why isn't my comparison working" bugs, and the honest fix usually involves comparing specific properties, not the whole object directly.

It's also worth knowing that objects can hold functions as values, called methods, which is how an object groups both its data and the behavior that belongs to that data together. You briefly saw this with car.showBrandRegular() earlier in this course — the key insight is that inside a regular function used as a method, this refers back to the object it was called on, giving that method access to the object's own properties without needing them passed in separately. This single idea — data and the functions that operate on it, bundled together — is the seed of object-oriented thinking in JavaScript, well before any formal class syntax gets involved.

A final practical habit worth building: before writing a new object structure for some piece of data, sketch out on paper or in a comment what fields it actually needs and what each one represents. A clear shape decided up front — { id, title, author, publishedAt } rather than guessing field names as you go — prevents a surprising number of later bugs where one part of your code expects a field that another part never actually set.

A small challenge: build a small array of two or three objects representing products with a name and a price, then use filter to find products above a certain price, and destructuring to pull the name straight out of the first result.