Objects in JavaScript

← 피드로

DEV Community · Annapoorani Kadhiravan · 2026-06-20 개발(SW)

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
};

Enter fullscreen mode Exit fullscreen mode

Example

const student = {
    name: "John",
    age: 21,
    city: "Chennai"
};

console.log(student);

Enter fullscreen mode Exit fullscreen mode

Output:

{
    name: "John",
    age: 21,
    city: "Chennai"
}

Enter fullscreen mode Exit fullscreen mode

Real-Life Example

Think of a Student ID Card.

Name : John
Age  : 21
City : Chennai

Enter fullscreen mode Exit fullscreen mode

All these details belong to one student.

Similarly:

const student = {
    name: "John",
    age: 21,
    city: "Chennai"
};

Enter fullscreen mode Exit fullscreen mode

The object stores related information together.

Why Do We Need Objects?

Without Objects

let name = "John";
let age = 21;
let city = "Chennai";

Enter fullscreen mode Exit fullscreen mode

Managing multiple variables becomes difficult.

With Objects

const student = {
    name: "John",
    age: 21,
    city: "Chennai"
};

Enter fullscreen mode Exit fullscreen mode

Everything is organized inside one object.

Object Terminologies

Consider:

const laptop = {
    brand: "HP",
    ram: "16GB",
    price: 70000
};

Enter fullscreen mode Exit fullscreen mode

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);

Enter fullscreen mode Exit fullscreen mode

Output

{
brand: "Samsung",
model: "S25",
price: 90000
}

Enter fullscreen mode Exit fullscreen mode

Real-Life Example

Writing details in a notebook.

Brand : Samsung
Model : S25
Price : 90000

Enter fullscreen mode Exit fullscreen mode

Accessing Object Properties

There are two ways:

Dot Notation

const mobile = {
    brand: "Apple",
    model: "iPhone 16"
};

console.log(mobile.brand);

Enter fullscreen mode Exit fullscreen mode

Output

Apple

Enter fullscreen mode Exit fullscreen mode

Bracket Notation

console.log(mobile["model"]);

Enter fullscreen mode Exit fullscreen mode

Output

iPhone 16

Enter fullscreen mode Exit fullscreen mode

Real-Life Example

Finding a contact in your phone.

Contact Name → Mobile Number

Enter fullscreen mode Exit fullscreen mode

Similarly,

mobile.brand

Enter fullscreen mode Exit fullscreen mode

retrieves the value.

Adding Properties

Objects are dynamic.

const laptop = {
    brand: "Dell"
};

laptop.ram = "16GB";

console.log(laptop);

Enter fullscreen mode Exit fullscreen mode

Output

{
brand: "Dell",
ram: "16GB"
}

Enter fullscreen mode Exit fullscreen mode

Real-Life Example

Buying a laptop and later upgrading RAM.

Initially:

Brand : Dell

Enter fullscreen mode Exit fullscreen mode

Later:

Brand : Dell
RAM : 16GB

Enter fullscreen mode Exit fullscreen mode

Updating Properties

const laptop = {
    brand: "Dell",
    ram: "8GB"
};

laptop.ram = "16GB";

console.log(laptop);

Enter fullscreen mode Exit fullscreen mode

Output

{
brand: "Dell",
ram: "16GB"
}

Enter fullscreen mode Exit fullscreen mode

Real-Life Example

Changing your phone number in a bank account.

Old

9876543210

Enter fullscreen mode Exit fullscreen mode

New

9999999999

Enter fullscreen mode Exit fullscreen mode

Deleting Properties

const laptop = {
    brand: "HP",
    camera: "1080p"
};

delete laptop.camera;

console.log(laptop);

Enter fullscreen mode Exit fullscreen mode

Output

{
brand: "HP"
}

Enter fullscreen mode Exit fullscreen mode

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);

Enter fullscreen mode Exit fullscreen mode

Output

{
brand: "Lenovo",
ram: "16GB"
}

Enter fullscreen mode Exit fullscreen mode

Objects with Methods

Methods are functions inside objects.

const student = {

    name: "John",

    greet: function() {
        console.log("Hello");
    }

};

student.greet();

Enter fullscreen mode Exit fullscreen mode

Output

Hello

Enter fullscreen mode Exit fullscreen mode

Real-Life Example

A Car

Properties

Brand
Color
Price

Enter fullscreen mode Exit fullscreen mode

Actions

Start()
Stop()
Accelerate()

Enter fullscreen mode Exit fullscreen mode

Actions are methods.

Using this Keyword

const student = {

    name: "John",

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

};

student.greet();

Enter fullscreen mode Exit fullscreen mode

Output

Hello John

Enter fullscreen mode Exit fullscreen mode

Real-Life Example

Suppose a teacher says:

“My class”

Here “my” refers to the teacher.

Similarly,

this.name

Enter fullscreen mode Exit fullscreen mode

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);

Enter fullscreen mode Exit fullscreen mode

Output

Chennai

Enter fullscreen mode Exit fullscreen mode

Real-Life Example

Company

Company
    ↓
Department
        ↓
Employee

Enter fullscreen mode Exit fullscreen mode

Similarly

Object
   ↓
Nested Object

Enter fullscreen mode Exit fullscreen mode

Object.keys()

Returns all keys.

const student = {
    name: "John",
    age: 22
};

console.log(Object.keys(student));

Enter fullscreen mode Exit fullscreen mode

Output

["name","age"]

Enter fullscreen mode Exit fullscreen mode

Object.values()

Returns values.

console.log(Object.values(student));

Enter fullscreen mode Exit fullscreen mode

Output

["John",22]

Enter fullscreen mode Exit fullscreen mode

Object.entries()

Returns key-value pairs.

console.log(Object.entries(student));

Enter fullscreen mode Exit fullscreen mode

Output

[
["name","John"],
["age",22]
]

Enter fullscreen mode Exit fullscreen mode

Looping Through Objects

Using for…in

const student = {

    name: "John",
    age: 21,
    city: "Chennai"

};

for(let key in student){
    console.log(key, student[key]);
}

Enter fullscreen mode Exit fullscreen mode

Output

name John
age 21
city Chennai

Enter fullscreen mode Exit fullscreen mode

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);

Enter fullscreen mode Exit fullscreen mode

Output

HP
16GB

Enter fullscreen mode Exit fullscreen mode

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);

Enter fullscreen mode Exit fullscreen mode

Output

{
name:"John",
age:20,
city:"Madurai"
}

Enter fullscreen mode Exit fullscreen mode

Object.freeze()

Prevents modification.

const car = {
    brand: "BMW"
};

Object.freeze(car);

car.brand = "Audi";

console.log(car);

Enter fullscreen mode Exit fullscreen mode

Output

{
brand:"BMW"
}

Enter fullscreen mode Exit fullscreen mode

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);

Enter fullscreen mode Exit fullscreen mode

Output

{
brand:"Audi"
}

Enter fullscreen mode Exit fullscreen mode

Object Constructor

const person = new Object();

person.name = "John";
person.age = 22;

console.log(person);

Enter fullscreen mode Exit fullscreen mode

Output

{
name:"John",
age:22
}

Enter fullscreen mode Exit fullscreen mode

Factory Function

function createStudent(name, age){

    return {
        name,
        age
    };

}

let s1 = createStudent("John",21);

console.log(s1);

Enter fullscreen mode Exit fullscreen mode

Output

{
name:"John",
age:21
}

Enter fullscreen mode Exit fullscreen mode

Constructor Function

function Student(name, age){

    this.name = name;
    this.age = age;

}

const s1 = new Student("John",21);

console.log(s1);

Enter fullscreen mode Exit fullscreen mode

Output

{
name:"John",
age:21
}

Enter fullscreen mode Exit fullscreen mode

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
};

Enter fullscreen mode Exit fullscreen mode

Array

const marks = [90,85,95];

Enter fullscreen mode Exit fullscreen mode

Real-World Examples of Objects

Student

const student = {
    name: "John",
    age: 20,
    department: "CSE"
};

Enter fullscreen mode Exit fullscreen mode

Car

const car = {
    brand: "BMW",
    color: "Black",
    price: 6000000
};

Enter fullscreen mode Exit fullscreen mode

Employee

const employee = {
    id: 101,
    name: "David",
    salary: 50000
};

Enter fullscreen mode Exit fullscreen mode

Product

const product = {
    name: "Laptop",
    price: 70000,
    stock: 20
};

Enter fullscreen mode Exit fullscreen mode

References :
https://www.geeksforgeeks.org/javascript/objects-in-javascript/
https://www.w3schools.com/js/js_objects.asp

원문에서 계속 ↗

추출 본문 · 출처: dev.to · https://dev.to/annapoo/objects-in-javascript-3p4

Objects in JavaScript

What is an Object?

Syntax

Example

Real-Life Example

Why Do We Need Objects?

Object Terminologies

Creating Objects

1. Object Literal

Real-Life Example

Accessing Object Properties

Dot Notation

Bracket Notation

Real-Life Example

Adding Properties

Real-Life Example

Updating Properties

Real-Life Example

Deleting Properties

Real-Life Example

CRUD Operations with Objects

Objects with Methods

Real-Life Example

Using this Keyword

Real-Life Example

Nested Objects

Real-Life Example

Object.keys()

Object.values()

Object.entries()

Looping Through Objects

Real-Life Example

Object Destructuring

Real-Life Example

Spread Operator with Objects

Object.freeze()

Real-Life Example

Object.seal()

Object Constructor

Factory Function

Constructor Function

Objects vs Arrays

Example

Real-World Examples of Objects

Student

Car

Employee

Product

코멘트

답글 남기기 응답 취소

더 많은 게시물

에피소드 1: “세상에 나타난 작은 점”