Objects are one of the most important concepts in JavaScript. Almost everything in JavaScript revolves around objects.
Objects help us store related data together and represent real-world entities such as:
- Students
- Employees
- Cars
- Mobiles
- Products
- Users
- Animals
What is an Object?
An object is a collection of properties and methods.
Properties store data.
Methods store functions.
Syntax
const objectName = {
key1: value1,
key2: value2
};
Example
const student = {
name: "John",
age: 21,
city: "Chennai"
};
console.log(student);
Output:
{
name: "John",
age: 21,
city: "Chennai"
}
Real-Life Example
Think of a Student ID Card.
Name : John
Age : 21
City : Chennai
All these details belong to one student.
Similarly:
const student = {
name: "John",
age: 21,
city: "Chennai"
};
The object stores related information together.
Why Do We Need Objects?
Without Objects
let name = "John";
let age = 21;
let city = "Chennai";
Managing multiple variables becomes difficult.
With Objects
const student = {
name: "John",
age: 21,
city: "Chennai"
};
Everything is organized inside one object.
Object Terminologies
Consider:
const laptop = {
brand: "HP",
ram: "16GB",
price: 70000
};
Here,
| Term | Value |
|---|---|
| brand | Property |
| ram | Property |
| price | Property |
| "HP" | Value |
| "16GB" | Value |
| 70000 | Value |
Creating Objects
There are several ways to create objects.
1. Object Literal
Most commonly used.
const mobile = {
brand: "Samsung",
model: "S25",
price: 90000
};
console.log(mobile);
Output
{
brand: "Samsung",
model: "S25",
price: 90000
}
Real-Life Example
Writing details in a notebook.
Brand : Samsung
Model : S25
Price : 90000
Accessing Object Properties
There are two ways:
Dot Notation
const mobile = {
brand: "Apple",
model: "iPhone 16"
};
console.log(mobile.brand);
Output
Apple
Bracket Notation
console.log(mobile["model"]);
Output
iPhone 16
Real-Life Example
Finding a contact in your phone.
Contact Name → Mobile Number
Similarly,
mobile.brand
retrieves the value.
Adding Properties
Objects are dynamic.
const laptop = {
brand: "Dell"
};
laptop.ram = "16GB";
console.log(laptop);
Output
{
brand: "Dell",
ram: "16GB"
}
Real-Life Example
Buying a laptop and later upgrading RAM.
Initially:
Brand : Dell
Later:
Brand : Dell
RAM : 16GB
Updating Properties
const laptop = {
brand: "Dell",
ram: "8GB"
};
laptop.ram = "16GB";
console.log(laptop);
Output
{
brand: "Dell",
ram: "16GB"
}
Real-Life Example
Changing your phone number in a bank account.
Old
9876543210
New
9999999999
Deleting Properties
const laptop = {
brand: "HP",
camera: "1080p"
};
delete laptop.camera;
console.log(laptop);
Output
{
brand: "HP"
}
Real-Life Example
Removing old information from a form.
CRUD Operations with Objects
CRUD means:
- Create
- Read
- Update
- Delete
const laptop = {
brand: "Lenovo",
ram: "8GB"
};
// Create
laptop.processor = "i7";
// Read
console.log(laptop.ram);
// Update
laptop.ram = "16GB";
// Delete
delete laptop.processor;
console.log(laptop);
Output
{
brand: "Lenovo",
ram: "16GB"
}
Objects with Methods
Methods are functions inside objects.
const student = {
name: "John",
greet: function() {
console.log("Hello");
}
};
student.greet();
Output
Hello
Real-Life Example
A Car
Properties
Brand
Color
Price
Actions
Start()
Stop()
Accelerate()
Actions are methods.
Using this Keyword
const student = {
name: "John",
greet: function() {
console.log("Hello " + this.name);
}
};
student.greet();
Output
Hello John
Real-Life Example
Suppose a teacher says:
"My class"
Here "my" refers to the teacher.
Similarly,
this.name
refers to the current object.
Nested Objects
Objects can contain other objects.
const employee = {
name: "David",
address: {
city: "Chennai",
state: "Tamil Nadu"
}
};
console.log(employee.address.city);
Output
Chennai
Real-Life Example
Company
Company
↓
Department
↓
Employee
Similarly
Object
↓
Nested Object
Object.keys()
Returns all keys.
const student = {
name: "John",
age: 22
};
console.log(Object.keys(student));
Output
["name","age"]
Object.values()
Returns values.
console.log(Object.values(student));
Output
["John",22]
Object.entries()
Returns key-value pairs.
console.log(Object.entries(student));
Output
[
["name","John"],
["age",22]
]
Looping Through Objects
Using for...in
const student = {
name: "John",
age: 21,
city: "Chennai"
};
for(let key in student){
console.log(key, student[key]);
}
Output
name John
age 21
city Chennai
Real-Life Example
Checking items in a grocery bill one by one.
Object Destructuring
Extract values easily.
const laptop = {
brand: "HP",
ram: "16GB"
};
const {brand, ram} = laptop;
console.log(brand);
console.log(ram);
Output
HP
16GB
Real-Life Example
Removing specific books from a shelf instead of carrying the entire shelf.
Spread Operator with Objects
const student = {
name: "John",
age: 20
};
const details = {
...student,
city: "Madurai"
};
console.log(details);
Output
{
name:"John",
age:20,
city:"Madurai"
}
Object.freeze()
Prevents modification.
const car = {
brand: "BMW"
};
Object.freeze(car);
car.brand = "Audi";
console.log(car);
Output
{
brand:"BMW"
}
Real-Life Example
Submitting an exam paper.
After submission, changes cannot be made.
Object.seal()
Allows updating but prevents adding or deleting properties.
const car = {
brand: "BMW"
};
Object.seal(car);
car.brand = "Audi";
console.log(car);
Output
{
brand:"Audi"
}
Object Constructor
const person = new Object();
person.name = "John";
person.age = 22;
console.log(person);
Output
{
name:"John",
age:22
}
Factory Function
function createStudent(name, age){
return {
name,
age
};
}
let s1 = createStudent("John",21);
console.log(s1);
Output
{
name:"John",
age:21
}
Constructor Function
function Student(name, age){
this.name = name;
this.age = age;
}
const s1 = new Student("John",21);
console.log(s1);
Output
{
name:"John",
age:21
}
Objects vs Arrays
| Objects | Arrays |
|---|---|
| Store data in key-value pairs | Store values by index |
| Uses property names | Uses index numbers |
| Represents entities | Represents collections |
| Accessed using keys | Accessed using indexes |
Example
Object
const student = {
name:"John",
age:21
};
Array
const marks = [90,85,95];
Real-World Examples of Objects
Student
const student = {
name: "John",
age: 20,
department: "CSE"
};
Car
const car = {
brand: "BMW",
color: "Black",
price: 6000000
};
Employee
const employee = {
id: 101,
name: "David",
salary: 50000
};
Product
const product = {
name: "Laptop",
price: 70000,
stock: 20
};
References :
SOCIAL SHARE CARD GENERATOR