# Understanding Objects in JavaScript # 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](https://www.scaler.com/topics/objects-in-javascript/?utm_source=chatgpt.com)) Think of it like a **profile card**. Example of a person: ```plaintext Name → Tushar Age → 22 City → Delhi ``` In JavaScript, this becomes: ```plaintext 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](https://www.geeksforgeeks.org/javascript/objects-in-javascript/?utm_source=chatgpt.com)) * * * # 2\. Creating Objects The most common way is using **object literal syntax** with {}. ```plaintext let person = { name: "Tushar", age: 22, city: "Delhi" }; ``` Explanation: ```plaintext {} → object container name, age, city → keys "Tushar", 22, "Delhi" → values ``` Objects can store **strings, numbers, booleans, arrays, or even other objects**. ([Scaler](https://www.scaler.com/topics/objects-in-javascript/?utm_source=chatgpt.com)) * * * # 3\. Accessing Object Properties There are **two ways** to access properties. * * * ## 1️⃣ Dot Notation ```plaintext let person = { name: "Tushar", age: 22 }; console.log(person.name); ``` Output ```plaintext Tushar ``` Dot notation is the **most common way** to access properties. ([MDN Web Docs](https://developer.mozilla.org/ms/docs/Learn/JavaScript/Objects/Basics?utm_source=chatgpt.com)) * * * ## 2️⃣ Bracket Notation ```plaintext console.log(person["age"]); ``` Output ```plaintext 22 ``` Bracket notation is useful when the **key name is dynamic or stored in a variable**. ([CodeWithHarry](https://www.codewithharry.com/tutorial/objects-in-js?utm_source=chatgpt.com)) Example: ```plaintext let key = "name"; console.log(person[key]); ``` * * * # 4\. Updating Object Properties You can change values easily. ```plaintext let person = { name: "Tushar", age: 22 }; person.age = 23; console.log(person.age); ``` Output ```plaintext 23 ``` Objects are **mutable**, meaning their properties can be modified anytime. ([GeeksforGeeks](https://www.geeksforgeeks.org/javascript/objects-in-javascript/?utm_source=chatgpt.com)) * * * # 5\. Adding New Properties You can add new properties anytime. ```plaintext let person = { name: "Tushar" }; person.city = "Delhi"; console.log(person); ``` Output ```plaintext { name: "Tushar", city: "Delhi" } ``` Objects are **dynamic**, meaning properties can be added later. ([GeeksforGeeks](https://www.geeksforgeeks.org/javascript/objects-in-javascript/?utm_source=chatgpt.com)) * * * # 6\. Deleting Properties Use the delete keyword. ```plaintext let person = { name: "Tushar", age: 22 }; delete person.age; console.log(person); ``` Output ```plaintext { name: "Tushar" } ``` * * * # 7\. Looping Through Object Keys Sometimes we need to **read all properties** of an object. One common method is **for…in loop**. ```plaintext let person = { name: "Tushar", age: 22, city: "Delhi" }; for (let key in person) { console.log(key, person[key]); } ``` Output ```plaintext name Tushar age 22 city Delhi ``` Here: ```plaintext key → property name person[key] → property value ``` You can also get keys using Object.keys() which returns an array of keys. ([MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries?utm_source=chatgpt.com)) * * * # 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: ```plaintext let arr = ["Tushar", 22, "Delhi"]; let obj = { name: "Tushar", age: 22, city: "Delhi" }; ``` Array uses **indexes**, object uses **keys**. * * * # Object Structure Visualization ```plaintext 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** ```plaintext Variable → stores one value Array → stores list of values Object → stores structured data with keys ```