JavaScript Objects: From Basics to CRUD Operations

JavaScript Objects

==================================================

1. WHAT IS AN OBJECT?

An object is a collection of related data and functionality stored as key-value pairs.

An object is a non-primitive data type in JavaScript used to store related data and behavior as key-value pairs.

Example:

let student = {
name: "Saravanan",
age: 25,
city: "Chennai"
};

---

Real-Life Example:

Instead of:

let name = "Saravanan";
let age = 25;
let city = "Chennai";

We can group them together:

let student = {
name: "Saravanan",
age: 25,
city: "Chennai"
};

This grouped structure is called an Object.

==================================================

2. ENTITY, STATE AND BEHAVIOR

Entity

An entity is a real-world thing that can be identified separately.

Examples:

Student
Employee
Car
Book
Mobile
Person

Example:

Entity = Student

let student = {
name: "Saravanan",
age: 25
};

The object represents the entity in code.

---

State (Attributes / Properties)

State describes what an object HAS.

Examples:

Name
Age
City

JavaScript:

let student = {
name: "Saravanan",
age: 25,
city: "Chennai"
};

Here:

name
age
city

are states (properties).

---

Behavior (Methods)

Behavior describes what an object DOES.

Examples:

study()
walk()
eat()
talk()

JavaScript:

let student = {
study() {
console.log("Studying...");
}
};

Here study() is behavior.

---

Easy Memory Trick:

Entity = Who/What is it?

State = What does it have?

Behavior = What can it do?

Example:

Entity = Student

State = Name, Age

Behavior = Study(), AttendClass()

==================================================

3. PROPERTIES AND VALUES

let person = {
name: "Saravanan",
age: 25
};

Structure:

Property (Key) Value

name -> Saravanan
age -> 25

So:

name = Property
"Saravanan" = Value

==================================================

4. ACCESSING OBJECT PROPERTIES

Dot Notation

console.log(person.name);

Output:

Saravanan

---

Bracket Notation

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

Output:

Saravanan

==================================================

5. OBJECT LITERAL

This is the most common way of creating objects.

let person = {
name: "Saravanan",
age: 25
};

The {} syntax is called an Object Literal.

Why called Literal?

Because the object is created directly using curly braces.

==================================================

6. OBJECT CONSTRUCTOR

Objects can also be created using the Object constructor.

let person = new Object();

person.name = "Saravanan";
person.age = 25;

Output:

{
name: "Saravanan",
age: 25
}

Difference:

Object Literal:

let person = {
name: "Saravanan"
};

Object Constructor:

let person = new Object();

person.name = "Saravanan";

Most developers prefer Object Literal because it is:

• Shorter
• Cleaner
• Easier to read
• Most commonly used

==================================================

7. CRUD OPERATIONS IN OBJECTS

CRUD stands for:

C → Create
R → Read
U → Update
D → Delete

These are the four basic operations performed on data.

---

CREATE

Creating an object.

let person = {
name: "Saravanan",
age: 25
};

---

READ

Reading object properties.

console.log(person.name);

Output:

Saravanan

OR

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

Output:

25

---

UPDATE

Updating an existing property.

person.age = 26;

Before:

{
name: "Saravanan",
age: 25
}

After:

{
name: "Saravanan",
age: 26
}

---

DELETE

Deleting a property.

delete person.age;

Before:

{
name: "Saravanan",
age: 25
}

After:

{
name: "Saravanan"
}

---

Complete CRUD Example

// CREATE
let person = {
name: "Saravanan",
age: 25
};

// READ
console.log(person.name);

// UPDATE
person.age = 26;

// DELETE
delete person.age;

==================================================

8. ADDING, UPDATING AND DELETING PROPERTIES

Add Property

let person = {
name: "Saravanan"
};

person.age = 25;

Result:

{
name: "Saravanan",
age: 25
}

---

Update Property

person.age = 26;

---

Delete Property

delete person.age;

==================================================

9. METHODS IN OBJECTS

Functions stored inside objects are called Methods.

let person = {
name: "Saravanan",

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

};

Calling Method:

person.greet();

Output:

Hello

==================================================

10. METHOD SHORTHAND (ES6)

Instead of:

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

We can write:

let person = {
greet() {
console.log("Hello");
}
};

Both produce the same result.

Modern JavaScript prefers the shorthand version.

==================================================

11. NESTED OBJECTS

An object can contain another object.

let person = {
name: "Saravanan",

address: {
    city: "Chennai",
    state: "Tamil Nadu",
    pincode: 600053
}

};

This is called a Nested Object.

==================================================

12. ACCESSING NESTED OBJECTS

console.log(person.address.city);

Output:

Chennai

Breakdown:

person
↓
address
↓
city

==================================================

13. OBJECTS CAN STORE DIFFERENT TYPES OF VALUES

let person = {
name: "Saravanan",
age: 25,
isStudent: true,
skills: ["HTML", "CSS", "JS"],

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

};

Objects can store:

• String
• Number
• Boolean
• Array
• Function
• Object

==================================================

14. REAL WORLD VISUALIZATION

person
│
├── name → Saravanan
├── age → 25
│
├── address → Object
│ │
│ ├── city → Chennai
│ └── state → Tamil Nadu
│
└── greet() → Method