JavaScript Objects (Beginner Friendly Guide)

In programming, we often need to store related information together.
That’s where objects become useful.

In this guide we’ll learn:

• What objects are and why they are needed

• How to create objects

• Access properties using dot notation and bracket notation

• Update object properties

• Add and delete properties

• Loop through object keys

---

1. What Are Objects?

An object is a data structure that stores information as key–value pairs. (Scaler)

Think of it like a profile card.

Example of a person:

Name → Tushar
Age → 22
City → Delhi

In JavaScript, this becomes:

let person = {
  name: "Tushar",
  age: 22,
  city: "Delhi"
};

Here:

Key	Value
name	“Tushar”
age	22
city	“Delhi”

Objects allow programs to group related data together instead of using many separate variables. (GeeksforGeeks)

---

2. Creating Objects

The most common way is using object literal syntax with {}.

let person = {
  name: "Tushar",
  age: 22,
  city: "Delhi"
};

Explanation:

{} → object container
name, age, city → keys
"Tushar", 22, "Delhi" → values

Objects can store strings, numbers, booleans, arrays, or even other objects. (Scaler)

---

3. Accessing Object Properties

There are two ways to access properties.

---

1️⃣ Dot Notation

let person = {
  name: "Tushar",
  age: 22
};

console.log(person.name);

Output

Tushar

Dot notation is the most common way to access properties. (MDN Web Docs)

---

2️⃣ Bracket Notation

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

Output

22

Bracket notation is useful when the key name is dynamic or stored in a variable. (CodeWithHarry)

Example:

let key = "name";

console.log(person[key]);

---

4. Updating Object Properties

You can change values easily.

let person = {
  name: "Tushar",
  age: 22
};

person.age = 23;

console.log(person.age);

Output

23

Objects are mutable, meaning their properties can be modified anytime. (GeeksforGeeks)

---

5. Adding New Properties

You can add new properties anytime.

let person = {
  name: "Tushar"
};

person.city = "Delhi";

console.log(person);

Output

{
  name: "Tushar",
  city: "Delhi"
}

Objects are dynamic, meaning properties can be added later. (GeeksforGeeks)

---

6. Deleting Properties

Use the delete keyword.

let person = {
  name: "Tushar",
  age: 22
};

delete person.age;

console.log(person);

Output

{
  name: "Tushar"
}

---

7. Looping Through Object Keys

Sometimes we need to read all properties of an object.

One common method is for…in loop.

let person = {
  name: "Tushar",
  age: 22,
  city: "Delhi"
};

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

Output

name Tushar
age 22
city Delhi

Here:

key → property name
person[key] → property value

You can also get keys using Object.keys() which returns an array of keys. (MDN Web Docs)

---

Array vs Object (Important Difference)

Many beginners confuse arrays and objects.

Feature	Array	Object
Structure	Ordered list	Key-value pairs
Access	Index	Key
Example	[10,20,30]	{name:"Tushar"}

Example:

let arr = ["Tushar", 22, "Delhi"];
let obj = {
  name: "Tushar",
  age: 22,
  city: "Delhi"
};

Array uses indexes, object uses keys.

---

Object Structure Visualization

person
│

├── name → "Tushar"

├── age  → 22

└── city → "Delhi"

Think of it as a dictionary where each word (key) has a meaning (value).

---

---

Quick Summary

Concept	Meaning
Object	Collection of key-value pairs
Key	Property name
Value	Data stored in the property
Dot notation	person.name
Bracket notation	person["name"]
Update property	person.age = 23
Add property	person.city = "Delhi"
Delete property	delete person.city

---

💡 Mental model

Variable → stores one value
Array → stores list of values
Object → stores structured data with keys