Understanding Objects in JavaScript 🧩

Objects are one of the most important concepts in JavaScript. They help developers organize and store related data in a structured way.

In real-world applications like user profiles, shopping carts, or product details, objects are widely used.

In this article, we will learn:

• What objects are

• Why objects are needed

• How to create objects

• How to access properties

• How to update, add, and delete properties

• How to loop through object keys

• The difference between arrays and objects

Let’s get started 🚀

---

1. What Are Objects in JavaScript?

An object in JavaScript is a collection of key-value pairs.

Each piece of data is stored with a key (property name) and a value.

Example

const person = {
  name: "John",
  age: 25,
  city: "New York"
};

Here:

Key	Value
name	John
age	25
city	New York

So the object stores related information about a person in one place.

---

Why Are Objects Needed?

Without objects, we would store related data in separate variables.

Example without objects:

let name = "John";
let age = 25;
let city = "New York";

Managing data like this becomes difficult as the application grows.

Objects help us:

✅ Group related data
✅ Represent real-world entities
✅ Access data easily
✅ Organize large applications

---

Visual Representation of an Object

Think of an object like a container storing data.

Person Object
-----------------
name  → John
age   → 25
city  → New York

Each key points to a value.

---

2. Creating Objects in JavaScript

Objects are created using curly braces {}.

Syntax

const objectName = {
  key1: value1,
  key2: value2
};

Example

const car = {
  brand: "Toyota",
  model: "Camry",
  year: 2022
};

Here:

• brand, model, year → keys

• "Toyota", "Camry", 2022 → values

---

3. Accessing Object Properties

There are two ways to access object properties.

---

Dot Notation

This is the most commonly used method.

Syntax

objectName.key

Example

console.log(car.brand);
console.log(car.year);

Output

Toyota
2022

---

Bracket Notation

This method uses square brackets.

Syntax

objectName["key"]

Example

console.log(car["model"]);

Output

Camry

---

Dot Notation vs Bracket Notation

Dot Notation	Bracket Notation
Easier to write	More flexible
Used most of the time	Useful when keys are dynamic
Example: car.brand	Example: car["brand"]

Example with dynamic property:

let property = "year";

console.log(car[property]);

Output

2022

---

4. Updating Object Properties

We can update object values easily.

Example

car.year = 2023;

Now the object becomes:

{
  brand: "Toyota",
  model: "Camry",
  year: 2023
}

---

5. Adding New Properties

New properties can be added anytime.

Example

car.color = "Black";

Now the object becomes:

{
  brand: "Toyota",
  model: "Camry",
  year: 2023,
  color: "Black"
}

---

6. Deleting Properties

To remove a property, we use the delete keyword.

Example

delete car.model;

Now the object becomes:

{
  brand: "Toyota",
  year: 2023,
  color: "Black"
}

---

7. Looping Through Object Keys

We can use the for...in loop to iterate through object properties.

Example

for (let key in car) {
  console.log(key + " : " + car[key]);
}

Output

brand : Toyota
year : 2023
color : Black

Here:

• key represents the property name

• car[key] returns the corresponding value

---

Assignment Example: Student Object 🎓

Now let's complete the assignment task.

---

Step 1: Create the Object

const student = {
  name: "Emma",
  age: 20,
  course: "Computer Science"
};

---

Step 2: Update One Property

student.age = 21;

---

Step 3: Print All Keys and Values

for (let key in student) {
  console.log(key + " : " + student[key]);
}

Output

name : Emma
age : 21
course : Computer Science

---

Difference Between Array and Object

Both arrays and objects store data, but they work differently.

Array	Object
Stores ordered data	Stores structured data
Uses index numbers	Uses keys
Example: [10,20,30]	Example: {name:"John"}

---

Array Example

const numbers = [10, 20, 30];

console.log(numbers[0]);

Output

10

---

Object Example

const user = {
  name: "John"
};

console.log(user.name);

Output

John

---

Visual Comparison

Array

[10, 20, 30]

0 → 10
1 → 20
2 → 30

Object

User

name → John
age  → 25
city → New York

---

Conclusion 🚀

Objects are a fundamental part of JavaScript and are widely used in real-world applications. They allow developers to store related information in an organized structure using key-value pairs.

In this article, we learned:

✔ What objects are
✔ Why they are useful
✔ How to create objects
✔ How to access properties
✔ How to update, add, and delete properties
✔ How to loop through object keys
✔ The difference between arrays and objects

Understanding objects will help you build better JavaScript applications and prepare you for more advanced topics.

---