Understanding Objects in JavaScript

When I started learning JavaScript, arrays made sense pretty quickly because they felt like a list. But then I reached objects, and that is where JavaScript started feeling more practical.

Why?

Because in real life, most things are not just single values or simple lists. A person has a name, age, city, course, and many other details. Storing all of that in separate variables becomes messy very fast.

That is where objects help.

In this article, we’ll understand objects in a simple, real-life way with clear examples.

Why Do We Need Objects?

Let’s say I want to store details about a student.

Without an object, I might write:

let studentName = "Nawazish"; let studentAge = 21; let studentCourse = "JavaScript"; let studentCity = "Lucknow";

This works, but it does not feel organized.

All these values belong to one student, so it makes more sense to keep them together.

That is exactly what an object does.

An object lets us store related information in one place.

What Is an Object?

An object is a collection of key-value pairs.

That simply means:

• a key is the name of a property

• a value is the actual data stored in that property

For example:

let student = { name: "Nawazish", age: 21, course: "JavaScript" };

Here:

• name is a key, and "Nawazish" is its value

• age is a key, and 21 is its value

• course is a key, and "JavaScript" is its value

So instead of keeping related data in many variables, we can keep it inside one object.

Real-Life Example of an Object

I find it easiest to think of an object like a form or profile card.

For example, a student profile:

let student = { name: "Nawazish", age: 21, city: "Lucknow", course: "Web Development" };

This feels natural because all the information belongs to the same student.

Creating Objects in JavaScript

We create objects using curly braces {}.

Example

let person = { name: "Aman", age: 22, city: "Delhi" };

This creates an object called person.

Inside it, each property is written like this:

key: value

Visual Representation of an Object

student | |-- name -> "Nawazish" |-- age -> 21 |-- city -> "Lucknow" |-- course -> "Web Development"

This is the easiest way to picture an object in the beginning.

Array vs Object

When I was learning, one confusion I had was this: when should I use an array, and when should I use an object?

The easiest difference is:

• array stores values in order

• object stores values with names

Array Example

let fruits = ["apple", "banana", "mango"];

Here, we access values by index:

fruits[0]; // apple

Object Example

let student = { name: "Nawazish", age: 21 };

Here, we access values by property name:

student.name; // Nawazish

Simple Comparison

Array -> ordered list of values Object -> named properties with values

So if I just need a list, I use an array.

If I need structured information about one thing, I use an object.

Accessing Object Properties

There are two main ways to access object properties:

• dot notation

• bracket notation

1. Dot Notation

This is the cleaner and more common way.

let student = { name: "Nawazish", age: 21, city: "Lucknow" }; console.log(student.name); // Nawazish console.log(student.age); // 21

Here, we write:

objectName.propertyName

2. Bracket Notation

We can also access properties using brackets.

let student = { name: "Nawazish", age: 21, city: "Lucknow" }; console.log(student["name"]); // Nawazish console.log(student["city"]); // Lucknow

In bracket notation, the property name is written as a string.

Dot Notation vs Bracket Notation

Most of the time, dot notation feels simpler.

But bracket notation is useful when the property name is dynamic or when it has spaces.

For beginner-level learning, it is enough to remember:

• dot notation is simple and common

• bracket notation also works and is useful in some cases

Updating Object Properties

We can change the value of an existing property very easily.

Example

let student = { name: "Nawazish", age: 21, course: "JavaScript" }; student.age = 22; console.log(student);

Now the age property becomes 22.

This is useful because object data can be updated whenever needed.

Adding New Properties

Objects are flexible, so we can also add new properties after creating them.

Example

let student = { name: "Nawazish", age: 21 }; student.course = "Web Development"; student.city = "Lucknow"; console.log(student);

Now the object has new properties too.

Output will look like this:

{ name: "Nawazish", age: 21, course: "Web Development", city: "Lucknow" }

Deleting Properties

We can remove a property using the delete keyword.

Example

let student = { name: "Nawazish", age: 21, city: "Lucknow" }; delete student.city; console.log(student);

Now the city property is removed.

Looping Through Object Keys

Once I understood objects, the next question was: how do we print all properties one by one?

For that, we can use a for...in loop.

Example

let student = { name: "Nawazish", age: 21, course: "JavaScript" }; for (let key in student) { console.log(key); }

Output:

name age course

This prints all the keys.

Printing Both Keys and Values

If we want both the property name and its value:

let student = { name: "Nawazish", age: 21, course: "JavaScript" }; for (let key in student) { console.log(key, student[key]); }

Output:

name Nawazish age 21 course JavaScript

This is a very useful beginner pattern.

Assignment Example

Let’s do the assignment idea step by step.

Create an Object Representing a Student

let student = { name: "Nawazish", age: 21, course: "Web Development" };

Update One Property

student.age = 22;

Add One More Property

student.city = "Lucknow";

Print All Keys and Values Using a Loop

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

Possible output:

name Nawazish age 22 course Web Development city Lucknow

A Simple Real-Life Way to Remember Objects

This is the easiest way I think about objects:

An object is like a profile card.

A student profile has:

• name

• age

• city

• course

A product profile has:

• name

• price

• brand

A user profile has:

• username

• email

• password

So whenever I need to describe one thing with many details, an object is usually the right choice.

Quick Summary

• objects store data in key-value pairs

• they help keep related information together

• we create objects using { }

• we can access properties using dot notation or bracket notation

• we can update, add, and delete properties

• we can loop through object keys using for...in

Final Thoughts

When I first learned objects, they felt a little different from arrays. But once I started thinking of them as a way to describe real things like a student, a product, or a user, they became much easier to understand.

That is probably the best way to learn objects: don’t treat them like a dry concept. Treat them like a real-life data structure for storing details about something.

Once that clicks, objects start feeling very natural in JavaScript.