JavaScript Objects

Objects are used to store multiple related values in the form of key-value pairs. They help organize complex data in a structured way.

Objects are one of the most important concepts in JavaScript because almost every real-world application uses them.

Why Objects are Important?

Store related data together
Organize complex information
Improve code readability
Used in real-world applications
Support properties and methods

Syntax of Object

let objectName = {

    key1: value1,

    key2: value2

};

Explanation of Syntax

Objects are written inside curly braces {}.
Data is stored as key-value pairs.
Keys are called properties.
Values can be any datatype.

Basic Object Example

The following example creates a student object.

let student = {

    name: "Rahul",

    age: 20,

    course: "JavaScript"

};

console.log(student);

Output

{
  name: "Rahul",
  age: 20,
  course: "JavaScript"
}

Detailed Explanation

The object stores student information.
name, age, and course are properties.
Each property has a corresponding value.

Accessing Object Properties

Object properties can be accessed using dot notation.

let student = {

    name: "Rahul",

    age: 20

};

console.log(student.name);

console.log(student.age);

Output

Rahul

20

Explanation

student.name accesses the name property.
student.age accesses the age property.

Accessing Properties using Bracket Notation

Properties can also be accessed using square brackets.

let person = {

    name: "Ali",

    city: "Delhi"

};

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

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

Output

Ali

Delhi

Explanation

Bracket notation uses property names as strings.
Useful for dynamic property access.

Updating Object Properties

Object properties can be modified anytime.

let car = {

    brand: "Toyota",

    color: "White"

};

car.color = "Black";

console.log(car);

Output

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

Explanation

The color property changes from White to Black.
Objects are mutable in JavaScript.

Adding New Properties

New properties can be added dynamically.

let mobile = {

    brand: "Samsung"

};

mobile.price = 20000;

console.log(mobile);

Output

{
  brand: "Samsung",
  price: 20000
}

Explanation

A new property named price is added.
JavaScript objects are flexible.

Deleting Object Properties

The delete keyword removes object properties.

let user = {

    name: "Rahul",

    age: 20

};

delete user.age;

console.log(user);

Output

{
  name: "Rahul"
}

Explanation

The delete keyword removes the age property.
The object updates dynamically.

Object Methods

Functions inside objects are called methods.

let person = {

    name: "Rahul",

    greet: function(){

        console.log("Hello");

    }

};

person.greet();

Output

Hello

Explanation

greet is a method.
The function belongs to the object.
Methods define object behavior.

Using this Keyword

The this keyword refers to the current object.

let student = {

    name: "Rahul",

    showName: function(){

        console.log(this.name);

    }

};

student.showName();

Output

Rahul

Explanation

this.name refers to the object's name property.
this helps access current object data.

Looping Through Object Properties

The for...in loop is used to access object properties.

let student = {

    name: "Rahul",

    age: 20,

    city: "Delhi"

};

for(let key in student){

    console.log(key + ": " + student[key]);

}

Output

name: Rahul

age: 20

city: Delhi

Explanation

The loop accesses every property name.
student[key] accesses property values dynamically.

Nested Objects

Objects can contain other objects.

let employee = {

    name: "Rahul",

    address: {

        city: "Delhi",

        pincode: 110001

    }

};

console.log(employee.address.city);

Output

Delhi

Explanation

The address object exists inside employee object.
Nested objects help organize complex data.

Complete Real Life Example

The following example shows a simple student profile system using JavaScript objects.

<!DOCTYPE html>

<html>

<head>

    <title>JavaScript Objects Example</title>

</head>

<body>

<h2>Student Profile</h2>

<button onclick="showProfile()">

Show Profile

</button>

<div id="output"></div>

<script>

function showProfile(){

    let student = {

        name: "Rahul",

        age: 20,

        course: "JavaScript",

        city: "Delhi"

    };

    document.getElementById("output").innerHTML =

    "<h3>Student Details</h3>" +

    "Name: " + student.name + "<br>" +

    "Age: " + student.age + "<br>" +

    "Course: " + student.course + "<br>" +

    "City: " + student.city;

}

</script>

</body>

</html>

Output

Student Profile

Student Details

Name: Rahul

Age: 20

Course: JavaScript

City: Delhi

Detailed Explanation of Example

The object stores student information together.
The button executes showProfile() function.
Object properties are accessed using dot notation.
innerHTML dynamically displays profile details.
Objects help organize real-world structured data.

Common Mistakes

Forgetting commas between properties.
Using wrong property names.
Confusing arrays with objects.
Using incorrect bracket notation.

Best Practices

Use meaningful property names.
Keep related data together.
Use methods for object behavior.
Organize nested objects properly.
Write clean and readable structures.

Important Notes

Objects store data in key-value format.
Objects use curly braces {}.
Properties store object data.
Methods are functions inside objects.
Objects are widely used in JavaScript applications.

Summary

Objects store related data together.
Properties store object values.
Methods define object behavior.
Objects support dynamic updates.
this refers to the current object.
Nested objects organize complex data.
Objects are essential in JavaScript development.