JavaScript Objects – Representing Real-World Data

In the previous article, we learned about arrays, which allow us to store multiple values in a single variable. However, arrays are best suited when storing similar types of data.

Consider a student:

Name  : Rahul
Age   : 20
Marks : 85
City  : Kolkata

Using an array:

let student =
[
    "Rahul",
    20,
    85,
    "Kolkata"
];

This works, but it is difficult to understand what each value represents.

To solve this problem, JavaScript provides Objects.

Objects allow us to store data using key-value pairs, making programs easier to understand and maintain.

In this article, we will learn:

• What objects are

• Why objects are needed

• Creating objects

• Properties and methods

• Accessing object data

• Modifying objects

• Object constructors

• Object methods

• Nested objects

• Real-world examples

---

What is an Object?

An object is a collection of related data stored as key-value pairs.

Example:

let student =
{
    name : "Rahul",

    age : 20,

    marks : 85
};

Here:

name  → Key

Rahul → Value

---

Real-Life Example

Think of an object as a student information card.

Student

Name  : Rahul

Age   : 20

Marks : 85

All information belongs to one student.

---

Why Objects are Needed

Without objects:

let name = "Rahul";

let age = 20;

let marks = 85;

Managing related data becomes difficult.

Using an object:

let student =
{
    name : "Rahul",

    age : 20,

    marks : 85
};

Everything stays organized.

---

Structure of an Object

let objectName =
{
    key1 : value1,

    key2 : value2
};

---

Creating an Object

Example:

let car =
{
    brand : "Toyota",

    model : "Fortuner",

    year : 2024
};

---

Object Properties

Properties store information.

Example:

let student =
{
    name : "Rahul",

    age : 20
};

Properties:

name

age

---

Accessing Object Properties

There are two methods.

---

Method 1: Dot Notation

Syntax:

object.property

Example:

let student =
{
    name : "Rahul",

    age : 20
};

document.write(
student.name
);

Output:

Rahul

---

Example

document.write(
student.age
);

Output:

20

---

Method 2: Bracket Notation

Syntax:

object["property"]

Example:

document.write(
student["name"]
);

Output:

Rahul

---

Comparison

student.name

and

student["name"]

Both produce the same result.

---

Complete Example

let student =
{
    name : "Rahul",

    age : 20,

    marks : 85
};

document.write(
student.name
);

document.write("<br>");

document.write(
student.age
);

document.write("<br>");

document.write(
student.marks
);

Output:

Rahul

20

85

---

Modifying Properties

Properties can be changed.

Example:

let student =
{
    name : "Rahul",

    age : 20
};

student.age = 21;

document.write(
student.age
);

Output:

21

---

Adding New Properties

Example:

let student =
{
    name : "Rahul"
};

student.city = "Kolkata";

document.write(
student.city
);

Output:

Kolkata

---

Deleting Properties

Example:

let student =
{
    name : "Rahul",

    age : 20
};

delete student.age;

Remaining object:

{
    name : "Rahul"
}

---

Object Methods

Objects can contain functions.

Functions inside objects are called methods.

---

Example

let student =
{
    name : "Rahul",

    greet : function()
    {
        document.write(
        "Hello"
        );
    }
};

student.greet();

Output:

Hello

---

Understanding Methods

greet : function()
{
}

Function stored inside object.

---

Example – Car Object

let car =
{
    brand : "Toyota",

    start : function()
    {
        document.write(
        "Car Started"
        );
    }
};

car.start();

Output:

Car Started

---

The this Keyword

Refers to the current object.

Example:

let student =
{
    name : "Rahul",

    show : function()
    {
        document.write(
        this.name
        );
    }
};

student.show();

Output:

Rahul

---

Dry Run

Current Object

↓

student

↓

this.name

↓

Rahul

---

Object Constructor

Used to create multiple similar objects.

---

Example

function Student(
name,
age
)
{
    this.name = name;

    this.age = age;
}

---

Creating Objects

let s1 =
new Student(
"Rahul",
20
);

let s2 =
new Student(
"Amit",
22
);

---

Accessing Data

document.write(
s1.name
);

Output:

Rahul

---

Complete Constructor Example

function Student(
name,
age
)
{
    this.name = name;

    this.age = age;
}

let s1 =
new Student(
"Rahul",
20
);

document.write(
s1.name
);

document.write("<br>");

document.write(
s1.age
);

Output:

Rahul

20

---

Nested Objects

Objects can contain other objects.

Example:

let student =
{
    name : "Rahul",

    address :
    {
        city : "Kolkata",

        state : "West Bengal"
    }
};

---

Accessing Nested Data

document.write(
student.address.city
);

Output:

Kolkata

---

Object Inside Object Structure

Student

│

├── Name

└── Address

     ├── City

     └── State

---

Looping Through Object Properties

Using for...in.

Example:

let student =
{
    name : "Rahul",

    age : 20,

    marks : 85
};

for(let key in student)
{
    document.write(
    key +
    " : " +
    student[key]
    );

    document.write("<br>");
}

Output:

name : Rahul

age : 20

marks : 85

---

Arrays vs Objects

Array	Object
Stores values	Stores key-value pairs
Index based	Key based
Ordered	Named properties

---

Example

Array:

let fruits =
[
"Apple",
"Mango"
];

Object:

let fruit =
{
name:"Apple",

color:"Red"
};

---

Practical Program – Employee Object

let employee =
{
    id : 101,

    name : "Amit",

    salary : 50000
};

document.write(
employee.name
);

document.write("<br>");

document.write(
employee.salary
);

Output:

Amit

50000

---

Practical Program – Product Details

let product =
{
    name : "Laptop",

    price : 50000,

    brand : "HP"
};

document.write(
product.name
);

document.write("<br>");

document.write(
product.price
);

Output:

Laptop

50000

---

Complete Program

<!DOCTYPE html>

<html>

<body>

<script>

let student =
{
    name : "Rahul",

    age : 20,

    marks : 85
};

document.write(
student.name
);

document.write("<br>");

document.write(
student.age
);

document.write("<br>");

document.write(
student.marks
);

</script>

</body>

</html>

Output:

Rahul

20

85

---

Common Mistakes Beginners Make

Missing Commas

Wrong:

let student =
{
    name:"Rahul"

    age:20
};

Correct:

let student =
{
    name:"Rahul",

    age:20
};

---

Using Dot Instead of Colon

Wrong:

name."Rahul"

Correct:

name:"Rahul"

---

Accessing Wrong Property

Wrong:

student.city

when city does not exist.

Output:

undefined

---

Real-Life Applications

Objects are used in:

• Student management systems

• Banking applications

• E-commerce websites

• Hospital systems

• Employee databases

• Mobile apps

Platforms like Amazon, Google, and Facebook use millions of objects to represent users, products, orders, and services.

---

Advantages of Objects

• Organize related data

• Easy to understand

• Flexible structure

• Real-world representation

• Support methods and properties

---

Conclusion

Objects are one of the most powerful features of JavaScript. They help represent real-world entities in a structured and meaningful way.