«Back to Home

Learn JavaScript

Topics

Introduction to Objects in JavaScript

Objects are among the most important constructs in JavaScript. In real applications, most of the data you work with is stored and managed using objects. They allow you to store data in key–value pairs, facilitating the grouping of related information.

For example, instead of using multiple variables like this:

let name = "Aman";
let age = 21;
let course = "BCA";

You can store everything inside one object:

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

Objects help you organize your data cleanly and efficiently.

What Is an Object?

An object is a collection of key–value pairs.

  • Keys ? names of properties

  • Values ? the data stored inside those properties

Objects are written inside curly braces { }.

Example:

let person = {
    name: "Riya",
    age: 20,
    city: "Delhi"
};

Accessing Object Values

There are two ways to access values:

1. Dot notation

console.log(person.name);
console.log(person.age);

2. Bracket notation

console.log(person["city"]);

Output:

Riya
20
Delhi

Bracket notation is useful when keys contain spaces or special characters.

Adding New Properties to an Object

You can add new values easily.

person.country = "India";
person["gender"] = "Female";

console.log(person);

Output:

{
  name: "Riya",
  age: 20,
  city: "Delhi",
  country: "India",
  gender: "Female"
}

Updating Values in an Object

person.city = "Mumbai";

Deleting Properties

delete person.age;

console.log(person);

Objects Can Store Any Data Type

Objects can store:

  • Strings

  • Numbers

  • Booleans

  • Arrays

  • Functions

  • Other objects

Example:

let car = {
    brand: "Honda",
    model: "City",
    year: 2020,
    colors: ["black", "white"],
    owner: {
        name: "Karan",
        age: 30
    }
};

console.log(car.owner.name);
console.log(car.colors[1]);

Output:

Karan
white

Objects with Functions (Methods)

A function inside an object is called a method.

let student = {
    name: "Meera",
    age: 21,

    greet() {
        console.log("Hello, " + this.name);
    }
};

student.greet();

Output:

Hello, Meera

this refers to the current object.

Looping Through Objects (for…in)

To print all keys and values:

let product = {
    title: "Laptop",
    price: 50000,
    brand: "HP"
};

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

Output:

title : Laptop
price : 50000
brand : HP

Array of Objects (Very Important)

Used in real projects like APIs, databases, and UI lists.

let students = [
    { name: "Riya", marks: 85 },
    { name: "Aman", marks: 72 },
    { name: "Karan", marks: 90 }
];

for (let s of students) {
    console.log(s.name, "-", s.marks);
}

Output:

Riya - 85
Aman - 72
Karan - 90

Real-Life Example: Order Details

let order = {
    id: 101,
    items: ["Laptop", "Mouse"],
    total: 55000,
    status: "Shipped"
};

console.log("Order ID:", order.id);
console.log("Total Amount:", order.total);

Why Objects Are Important

Objects are everywhere in JavaScript:

  • User details

  • Product info

  • API responses

  • Settings and configurations

  • DOM elements

  • Frameworks like React, Node.js

Understanding objects is essential for advanced JavaScript.

Common Mistakes Beginners Make

  1. Forgetting commas between properties

  2. Accessing keys incorrectly

  3. Using dot notation for dynamic keys

  4. Confusing arrays and objects

  5. Using this inside arrow functions (not recommended)

Example Program (Complete)

let student = {
    name: "Aman",
    age: 22,
    subjects: ["HTML", "CSS", "JS"],

    details() {
        console.log("Name:", this.name);
        console.log("Age:", this.age);
        console.log("Subjects:", this.subjects);
    }
};

student.details();

Output:

Name: Aman
Age: 22
Subjects: HTML,CSS,JS

Practice Tasks (Do It Yourself)

  1. Create an object for a student with name, age, course, and marks.

  2. Add a new key to the student object after creating it.

  3. Delete one property from the object.

  4. Create an array of 3 product objects and print their names.

  5. Create an object with a method that prints a message.

Author
Manas Mohapatra
94 20.4k 16.8m