Annapoorani Kadhiravan

Posted on Jun 19

Objects in JavaScript

#programming #webdev #tutorial #beginners

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 :
https://www.geeksforgeeks.org/javascript/objects-in-javascript/
https://www.w3schools.com/js/js_objects.asp