Understanding Objects in JavaScript

When we start learning JavaScript, one of the first data structures we usually see is arrays. Arrays are great when we want to store multiple values in order.

const fruits = ["Apple", "Banana", "Mango"];

This works perfectly when the data is just a list of items. But what if we want to store different types of information about something?
Imagine you want to store information about a person:

• name

• age

• city

If you try using an array, it would look something like this:

const person = ["Nausheen", 21, "Patna"];

But now a problem appears. If someone reads this code later, they won’t immediately know what each value means. Is 22 the age? Or something else?
This is where objects become very useful.

Objects allow us to store data in a key–value structure, which makes the data much more meaningful and readable.

---

What Objects Are and Why We Need Them

In JavaScript, an object is a collection of key-value pairs. Think of it like a small container of information about something.

A person can be represented like this:

const person = {
  name: "Nausheen",
  age: 21,
  city: "Patna"
};

what’s happening here:

• name, age, and city are keys

• "Nausheen", 22, and "Patna" are values

So instead of storing random values, we now have clear labels for each piece of data. This makes the data easier to understand. If someone reads this object later, they instantly know what each value represents. That’s the main reason objects are used everywhere in JavaScript they help us structure real-world data in a meaningful way.

---

Creating Objects

Creating an object in JavaScript is very simple. We use curly braces {}, inside the braces, we write key-value pairs separated by commas.

const student = {
  name: "Piyush",
  age: 26,
  course: "Computer Science"
};

Here we created a student object. It contains three pieces of information about the student. You can think of an object as a small data record describing something.

In real applications, objects are used to represent things like:

• users

• products

• orders

• blog posts

• settings

Almost everything in JavaScript applications eventually becomes an object.

---

Accessing Object Properties

Once we create an object, the next step is accessing the values stored inside it. JavaScript provides two ways to do this.

---

1. Dot Notation

The most common way is dot notation.

const person = {
  name: "Nausheen",
  age: 21,
  city: "Patna"
};

console.log(person.name); // Nausheen

Here we accessed the name property using a dot. We can access any property this way.

console.log(person.age); // 21
console.log(person.city); // Patna

Dot notation is simple and is used most of the time.

---

2. Bracket Notation

The second way is bracket notation.

console.log(person["name"]); // Nausheen

Both methods give the same result. The difference is mainly syntax. Bracket notation is useful when the property name is stored in a variable.

const key = "age";

console.log(person[key]);

This flexibility makes bracket notation powerful in certain situations.

---

Updating Object Properties

Objects are not fixed. We can easily update their values.

const person = {
  name: "Nausheen",
  age: 21,
  city: "Patna"
};

person.age = 22;

console.log(person);

Output:

{ name: "Nausheen", age: 22, city: "Patna" }

We simply assign a new value to the property. This replaces the old value. Updating properties is very common in applications when data changes.

---

Adding and Deleting Properties

Objects are flexible. We can add new properties anytime.

const person = {
  name: "Nausheen",
  age: 21
};

person.city = "Delhi";

console.log(person);

Output:

{ name: "Nausheen", age: 21, city: "Delhi" }

We added a new property called city. Now let’s see how to delete a property.

JavaScript provides the delete keyword.

delete person.age;

console.log(person);

Output:

{ name: "Nausheen", city: "Delhi" }

So objects allow us to add, update, or remove properties whenever we want.

---

Looping Through Object Keys

Sometimes we want to go through all properties of an object. For that, we use a for...in loop.

const person = {
  name: "Nausheen",
  age: 21,
  city: "Delhi"
};

for (let key in person) {
  console.log(key, person[key]);
}

Output:

name Nausheen
age 21
city Delhi

Here’s what’s happening:

• key represents each property name

• person[key] gives the value for that property

This loop allows us to iterate through the entire object.

---

Array vs Object

Beginners sometimes confuse arrays and objects, so it’s important to understand the difference. An array stores values in an ordered list.

const fruits = ["Apple", "Banana", "Mango"];

We access items using indexes

fruits[0]
fruits[1]

But an object stores values using keys.

const person = {
  name: "Nausheen",
  age: 22
};

We access values using property names

person.name
person.age

So the main difference is:
Array => values stored using indexes
Object => values stored using keys

Arrays are good for lists. Objects are good for structured information.

---

Practice Assignment

To really understand objects, try this small exercise.

Step 1: Create a student object

const student = {
  name: "Aman",
  age: 21,
  course: "BCA"
};

Step 2: Update one property

student.age = 22;

Step 3: Print all keys and values

for (let key in student) {
  console.log(key, student[key]);
}

Try running this in your console and experiment with adding new properties.

---

Final Thoughts

Objects are one of the most important concepts in JavaScript. They allow us to represent real-world things like people, products, & data in a structured way. Once you understand objects, many other JavaScript concepts become easier to learn.

Just remember the key ideas:

Objects store data as key-value pairs
Dot notation and bracket notation access values
Properties can be added, updated, or deleted
for...in loop helps iterate through object keys

And the best way to learn is always the same open your console, create some objects, and start experimenting with them. That’s where the real understanding begins.