Objects are one of the most important concepts in JavaScript. They allow developers to store related data and functionality together in a structured way.
Unlike arrays that mainly store collections of values, objects store data in the form of key-value pairs. Each key represents a property name and each value represents the data associated with that property.
Objects are widely used in modern web applications to represent real-world entities such as users, products, students, employees, accounts, and many other things.
An object is a collection of related information stored as properties and behaviors stored as methods.
A property contains data, while a method contains a function that performs an action.
let student = {
name:"Rahul",
age:20,
course:"Computer Science"
};
In this example, student is an object containing three properties: name, age, and course.
Objects help developers organize complex information in a meaningful structure. They make programs easier to understand, maintain, and expand.
JavaScript provides multiple ways to create objects.
The object literal method is the simplest and most commonly used way to create objects.
let objectName = {
property:value
};
let car = {
brand:"Toyota",
model:"Fortuner",
year:2025
};
document.write(car.brand);
Toyota
JavaScript provides the Object constructor to create objects.
let person = new Object(); person.name = "Amit"; person.age = 25; document.write(person.name);
Amit
Constructor functions allow developers to create multiple objects with the same structure.
function Student(name,age)
{
this.name = name;
this.age = age;
}
let s1 = new Student("Rahul",20);
document.write(s1.name);
Rahul
Properties are values associated with an object. They describe the characteristics of an object.
let mobile = {
brand:"Samsung",
price:30000,
color:"Black"
};
| Property | Value |
|---|---|
| brand | Samsung |
| price | 30000 |
| color | Black |
JavaScript provides two ways to access object properties.
Dot notation is the most common way to access object values.
let student = {
name:"Ravi",
age:21
};
document.write(student.name);
Ravi
Bracket notation is useful when property names are stored in variables or contain special characters.
let student = {
name:"Ravi",
age:21
};
document.write(student["age"]);
21
New properties can be added to existing objects at any time.
let person = {
name:"Amit"
};
person.age = 25;
document.write(person.age);
25
Existing object values can be modified by assigning a new value.
let product = {
name:"Laptop",
price:50000
};
product.price = 60000;
document.write(product.price);
60000
The delete keyword removes a property from an object.
let user = {
name:"Rahul",
age:20
};
delete user.age;
document.write(user.name);
Rahul
A method is a function that is stored as a property of an object. Object methods are used to perform actions related to the data stored inside an object.
Methods help combine data and functionality together, making objects more powerful and useful.
let student = {
name:"Rahul",
greet:function()
{
document.write("Hello " + this.name);
}
};
student.greet();
Hello Rahul
In this example, greet() is a method of the student object.
The this keyword refers to the current object that is executing the method.
It allows a method to access properties and other methods of the same object.
let employee = {
name:"Amit",
salary:50000,
display:function()
{
document.write(this.name);
}
};
employee.display();
Amit
Here, this.name refers to the name property of the employee object.
An object can contain multiple methods to perform different operations.
let calculator = {
add:function(a,b)
{
return a+b;
},
multiply:function(a,b)
{
return a*b;
}
};
document.write(calculator.add(10,20));
30
A nested object is an object that contains another object as one of its properties.
Nested objects are useful for representing complex information in a structured format.
let student = {
name:"Rahul",
address:
{
city:"Delhi",
country:"India"
}
};
document.write(student.address.city);
Delhi
Arrays can store multiple objects. This structure is commonly used when handling collections of data.
let users = [
{
name:"Amit",
age:25
},
{
name:"Neha",
age:22
}
];
document.write(users[1].name);
Neha
Arrays of objects are frequently used when working with API data, databases, and applications.
JavaScript allows properties to be accessed dynamically using variables with bracket notation.
let student = {
name:"Ravi",
marks:90
};
let property = "marks";
document.write(student[property]);
90
The Object.keys() method returns an array containing all property names of an object.
let person = {
name:"Rahul",
age:20,
city:"Mumbai"
};
let result = Object.keys(person);
document.write(result);
name,age,city
The Object.values() method returns an array containing all values of an object.
let product = {
name:"Laptop",
price:50000,
brand:"Dell"
};
let result = Object.values(product);
document.write(result);
Laptop,50000,Dell
The Object.entries() method converts object properties into an array of key-value pairs.
let student = {
name:"Amit",
marks:85
};
let result = Object.entries(student);
document.write(result);
name,Amit,marks,85
The for...in loop is commonly used to iterate through object properties.
let mobile = {
brand:"Samsung",
price:30000,
color:"Black"
};
for(let key in mobile)
{
document.write(key);
}
brand price color
let user = {
name:"Rahul",
age:25,
city:"Pune"
};
for(let key in user)
{
document.write(user[key]);
}
Rahul 25 Pune
The Object.assign() method is used to copy properties from one or more objects into another object.
let first = {
name:"Rahul"
};
let second = {
age:20
};
let result = Object.assign(first,second);
document.write(result.name);
Rahul
Creating a copy of an object is called cloning. JavaScript provides different methods for cloning objects.
let user = {
name:"Amit",
age:22
};
let copy = {...user};
document.write(copy.name);
Amit
let original = {
name:"Neha",
city:"Delhi"
};
let clone = Object.assign({},original);
document.write(clone.city);
Delhi
The hasOwnProperty() method checks whether an object contains a specific property.
let student = {
name:"Ravi",
age:21
};
document.write(student.hasOwnProperty("name"));
true
The Object.freeze() method prevents modification of an object.
let user = {
name:"Rahul"
};
Object.freeze(user);
user.name="Amit";
document.write(user.name);
Rahul
After freezing, properties cannot be changed, added, or deleted.
The Object.seal() method prevents adding or deleting properties but allows updating existing properties.
let product = {
name:"Mobile",
price:20000
};
Object.seal(product);
product.price=25000;
document.write(product.price);
25000
An object constructor is a special type of function used to create multiple objects with the same structure. It works like a blueprint for creating similar objects.
Constructor functions are useful when an application needs many objects having the same properties and methods.
function ObjectName(property1, property2)
{
this.property1 = property1;
this.property2 = property2;
}
function Student(name, age, course)
{
this.name = name;
this.age = age;
this.course = course;
}
let student1 = new Student("Rahul",20,"B.Tech");
document.write(student1.name);
Rahul
The new keyword creates a new object from the constructor function.
Methods can also be added inside constructor functions to provide behavior to objects.
function Employee(name,salary)
{
this.name = name;
this.salary = salary;
this.display = function()
{
document.write(this.name);
}
}
let emp = new Employee("Amit",50000);
emp.display();
Amit
JavaScript classes provide a modern and cleaner way to create objects. Classes were introduced in ES6 and are based on prototype inheritance.
A class acts as a template from which multiple objects can be created.
class ClassName
{
constructor()
{
}
}
class Student
{
constructor(name,age)
{
this.name = name;
this.age = age;
}
display()
{
document.write(this.name);
}
}
let s1 = new Student("Neha",21);
s1.display();
Neha
The constructor method is automatically called when a new object is created from a class.
It is mainly used to initialize object properties.
class Car
{
constructor(brand)
{
this.brand = brand;
}
}
let car1 = new Car("BMW");
document.write(car1.brand);
BMW
Inheritance allows one object or class to access properties and methods of another object or class.
It helps reduce duplicate code and improves code reusability.
class Animal
{
sound()
{
document.write("Animal Sound");
}
}
class Dog extends Animal
{
}
let d = new Dog();
d.sound();
Animal Sound
Every JavaScript object has a prototype. A prototype is an object from which other objects can inherit properties and methods.
JavaScript uses prototype-based inheritance internally.
function Person(name)
{
this.name = name;
}
Person.prototype.show = function()
{
document.write(this.name);
};
let p1 = new Person("Rahul");
p1.show();
Rahul
A getter is a method that allows accessing an object property like a normal property.
Getters are created using the get keyword.
let student = {
name:"Amit",
get getName()
{
return this.name;
}
};
document.write(student.getName);
Amit
A setter allows updating object properties using a special method.
Setters are created using the set keyword.
let person = {
name:"Rahul",
set changeName(value)
{
this.name = value;
}
};
person.changeName = "Amit";
document.write(person.name);
Amit
Object destructuring allows extracting object properties into separate variables using a simple syntax.
let student = {
name:"Ravi",
age:20
};
let {name,age} = student;
document.write(name);
Ravi
The spread operator can be used with objects to copy or combine object properties.
let user = {
name:"Rahul",
age:25
};
let copy = {...user};
document.write(copy.name);
Rahul
let first = {
name:"Amit"
};
let second = {
city:"Delhi"
};
let result = {
...first,
...second
};
document.write(result.city);
Delhi
JSON stands for JavaScript Object Notation. It is a lightweight format used for storing and exchanging data between applications.
JSON data is commonly used when communicating with servers and APIs.
{
"name":"Rahul",
"age":20,
"course":"Computer Science"
}
The JSON.stringify() method converts a JavaScript object into a JSON string.
let student = {
name:"Amit",
age:21
};
let data = JSON.stringify(student);
document.write(data);
{"name":"Amit","age":21}
The JSON.parse() method converts JSON data into a JavaScript object.
let data = '{"name":"Rahul","age":22}';
let student = JSON.parse(data);
document.write(student.name);
Rahul
Objects are used extensively in modern web applications because they represent real-world data efficiently.
JavaScript objects are powerful structures used to store and manage related information in the form of properties and methods. Objects make programs organized, reusable, and easier to maintain.
Important object concepts include object creation, properties, methods, constructors, classes, inheritance, prototypes, destructuring, JSON handling, and advanced object operations.
A strong understanding of objects is essential for advanced JavaScript development, including DOM manipulation, APIs, frameworks, and full-stack web applications.