Understanding Objects in JavaScript

Hey There! So you've been writing JavaScript for a bit now, and you've probably worked with variables, arrays, and functions. Now it's time to talk about one of the coolest and most useful features in JavaScript: objects.

Trust me, once you get your hands on objects, you'll want to use theme everywhere you can. Let's dive in!

What Are Objects and Why Do We Need Them?

Think about how you'd describe yourself. You have a name, an age, maybe a favorite color, where you live, what you study. Now imagine trying to store all that information using separate variables:

let personName = "Alex";
let personAge = 22;
let personCity = "Mumbai";
let personEmail = "alex@example.com";

This works, but it's messy. What if you need to manage 10 people? You'd have person1Name, person2Name, person3Name... It will become a nightmare.

Objects solve this problem. They let you bundle related information together in one neat package.

let person = {
  name: "Alex",
  age: 22,
  city: "Mumbai",
  email: "alex@example.com"
};

Everything about this person is stored in one place. That's the power of objects.

Objects Are Key-Value Pairs

Here's the simple truth: objects store data as key-value pairs.

• The key is the property name (like name, age)

• The value is the actual data (like "Rahul", 21)

Think of it like a real dictionary where you look up a word (key) to find its meaning (value).

let car = {
  brand: "Toyota",      // key: brand, value: "Toyota"
  model: "Camry",       // key: model, value: "Camry"
  year: 2023,           // key: year, value: 2023
  isElectric: false     // key: isElectric, value: false
};

Arrays vs Objects: What's the Difference?

You might be wondering, "I already know arrays. Why do I need objects?"

Arrays are great when you have a list of similar items where order matters.

let fruits = ["apple", "banana", "orange"];
// Access by position: fruits[0] → "apple"

Objects are perfect when you have related but different pieces of information where names matter more than order.

let student = {
  name: "Priya",
  age: 21,
  course: "Computer Science"
};
// Access by name: student.name → "Priya"

Feature	Array	Object
Structure	Ordered list	Key-value pairs
Access	By index (0, 1, 2...)	By property name
Use case	Similar items	Related properties
Example	["red", "blue", "green"]	{color: "red", size: "M"}

Creating Objects

There are a couple ways to create objects, but let's focus on the most common one: object literal notation.

// Empty object
let emptyObject = {};

// Object with properties
let book = {
  title: "The Great Gatsby",
  author: "F. Scott Fitzgerald",
  pages: 180,
  isAvailable: true
};

Notice the syntax:

• Curly braces {}

• Properties separated by commas

• Each property is key: value

• Strings in quotes, numbers and booleans without quotes

Accessing Object Properties

Once you've created an object, you need to get data out of it. There are two ways:

1. Dot Notation (Most Common)

This is what you'll use 90% of the time. Just use a dot (.) followed by the property name.

let person = {
  name: "Rahul",
  age: 25,
  city: "Delhi"
};

console.log(person.name);   // "Rahul"
console.log(person.age);    // 25
console.log(person.city);   // "Delhi"

2. Bracket Notation (For Special Cases)

Sometimes you need to use brackets with the property name as a string.

let person = {
  name: "Rahul",
  age: 25,
  "favorite color": "blue"  // Property with space
};

console.log(person["name"]);            // "Rahul"
console.log(person["favorite color"]);  // "blue" - dot notation won't work here!

When to use bracket notation:

• Property names with spaces or special characters

• Property name is stored in a variable

• Property name is dynamic (decided at runtime)

let property = "age";
console.log(person[property]);  // 25

Updating Object Properties

Need to change something in an object, Just assign a new value.

let user = {
  username: "coder123",
  points: 100
};

console.log(user.points);  // 100

// Update property
user.points = 150;

console.log(user.points);  // 150

You can use either dot or bracket notation:

user.username = "superCoder";
user["points"] = 200;

Adding New Properties

Didn't include something when you created the object? No problem! Just assign it.

let phone = {
  brand: "Samsung",
  model: "Galaxy S23"
};

// Add new property
phone.color = "black";
phone.storage = "256GB";

console.log(phone);
// {
//   brand: "Samsung",
//   model: "Galaxy S23",
//   color: "black",
//   storage: "256GB"
// }

It's literally that simple. If the property doesn't exist, JavaScript creates it for you.

Deleting Properties

Want to remove a property completely? Use the delete keyword.

let laptop = {
  brand: "Dell",
  ram: "16GB",
  price: 60000,
  discount: 5000
};

// Delete the discount property
delete laptop.discount;

console.log(laptop);
// {
//   brand: "Dell",
//   ram: "16GB",
//   price: 60000
// }

Looping Through Object Keys

Sometimes you want to go through all the properties in an object. The for...in loop is perfect for this.

let student = {
  name: "Sneha",
  age: 20,
  course: "Data Science",
  semester: 4
};

// Loop through all keys
for (let key in student) {
  console.log(key + ": " + student[key]);
}

// Output:
// name: Sneha
// age: 20
// course: Data Science
// semester: 4

Notice how we use student[key] (bracket notation) because key is a variable, not a literal property name.

Other Useful Methods

Modern JavaScript gives us some handy methods too:

let product = {
  name: "Headphones",
  price: 2999,
  brand: "Sony"
};

// Get all keys as an array
console.log(Object.keys(product));
// ["name", "price", "brand"]

// Get all values as an array
console.log(Object.values(product));
// ["Headphones", 2999, "Sony"]

// Get key-value pairs as a nested array
console.log(Object.entries(product));
// [["name", "Headphones"], ["price", 2999], ["brand", "Sony"]]

Quick Reference Cheat Sheet

// Create
let obj = { key: "value" };

// Access
obj.key           // Dot notation
obj["key"]        // Bracket notation

// Update
obj.key = "new value";

// Add
obj.newKey = "another value";

// Delete
delete obj.key;

// Loop
for (let key in obj) {
  console.log(key, obj[key]);
}

// Useful methods
Object.keys(obj)      // Array of keys
Object.values(obj)    // Array of values
Object.entries(obj)   // Array of [key, value] pairs

Wrapping Up

Objects are everywhere in JavaScript. APIs return objects, configurations use objects, your data will be objects. They're fundamental.

Here's what we covered:

• Objects store related data as key-value pairs

• Create them with {key: value} syntax

• Access with dot notation (obj.key) or brackets (obj["key"])

• Update, add, and delete properties easily

• Loop through with for...in or use Object.keys()