# Understanding Objects in JavaScript As you continue learning JavaScript, you’ll notice that many times you need to store **related information together**. For example, if you want to store details about a person, you might need their name, age, and city. Instead of creating many separate variables, JavaScript provides a powerful structure called an **object**. Objects allow us to organize related data into **key-value pairs**, making programs easier to manage and understand. In this article, we will explore: * What objects are and why they are needed * How to create objects * Accessing properties using dot notation and bracket notation * Updating object properties * Adding and deleting properties * Looping through object keys All examples are simple and beginner-friendly. ## What Are Objects and Why Are They Needed? An **object** is a collection of related information stored as **key-value pairs**. Think of it like a **profile card for a person**. Example information about a person: ```plaintext Name → Shivam Age → 21 City → Mumbai ``` Instead of storing this in separate variables, we can store everything in **one object**. Example: ```javascript let person = { name: "Shivam", age: 21, city: "Mumbai" }; ``` Here: * `name`, `age`, and `city` are **keys** * `"Shivam"`, `21`, and `"Mumbai"` are **values** This structure makes it easy to manage related information. ## Visual Representation of an Object You can imagine an object like a labeled container. ```plaintext person ├── name : "Shivam" ├── age : 21 └── city : "Mumbai" ``` Each key points to a specific value. ## Creating Objects in JavaScript Objects are created using **curly braces** `{}`. Example: ```javascript let student = { name: "Rahul", age: 20, course: "Computer Science" }; ``` This object stores three pieces of information about a student. You can create objects for: * users * products * orders * students * vehicles Objects are used everywhere in JavaScript applications. ## Difference Between Array and Object Both arrays and objects store data, but they are used differently. ### Array Arrays store **ordered lists of values**. Example: ```javascript let fruits = ["apple", "banana", "mango"]; ``` Accessed using **index numbers**: ```plaintext fruits[0] → apple ``` ### Object Objects store **key-value pairs**. Example: ```javascript let person = { name: "Shivam", age: 21 }; ``` Accessed using **property names**. ### Comparison | Feature | Array | Object | | --- | --- | --- | | Structure | List of values | Key-value pairs | | Access | Index number | Property name | | Example | fruits\[0\] | [person.name](http://person.name) | Arrays are good for **lists**, while objects are good for **structured data**. ## Accessing Object Properties We can access object values in two ways. ### 1\. Dot Notation This is the most common method. Example: ```javascript let person = { name: "Shivam", age: 21, city: "Mumbai" }; console.log(person.name); ``` Output: ```plaintext Shivam ``` Here we accessed the `name` property. ### 2\. Bracket Notation Another way is using brackets. Example: ```javascript console.log(person["age"]); ``` Output: ```plaintext 21 ``` Bracket notation is useful when property names are dynamic or stored in variables. ## Updating Object Properties Object values can be changed easily. Example: ```javascript let person = { name: "Shivam", age: 21 }; person.age = 22; console.log(person.age); ``` Output: ```plaintext 22 ``` The value of `age` was updated. ## Adding New Properties We can also add new properties to an object. Example: ```javascript let person = { name: "Shivam", age: 21 }; person.city = "Delhi"; console.log(person); ``` Output: ```plaintext { name: "Shivam", age: 21, city: "Delhi" } ``` The object now includes a new property. ## Deleting Properties If a property is no longer needed, it can be removed using the `delete` keyword. Example: ```javascript let person = { name: "Shivam", age: 21, city: "Mumbai" }; delete person.city; console.log(person); ``` Output: ```plaintext { name: "Shivam", age: 21 } ``` The `city` property has been removed. ## Looping Through Object Keys Sometimes we want to go through every property in an object. JavaScript provides the **for...in loop** for this. Example: ```javascript let person = { name: "Shivam", age: 21, city: "Mumbai" }; for (let key in person) { console.log(key, person[key]); } ``` Output: ```plaintext name Shivam age 21 city Mumbai ``` Explanation: * `key` represents each property name * `person[key]` gives the value of that property This loop helps us read **all keys and values in an object**. ## Assignment (Practice Exercise) Try this exercise in your browser console or code editor. ### Step 1: Create a Student Object ```javascript let student = { name: "Aman", age: 20, course: "Computer Science" }; ``` ### Step 2: Update One Property Change the age. ```javascript student.age = 21; ``` ### Step 3: Add a New Property ```javascript student.city = "Mumbai"; ``` ### Step 4: Print All Keys and Values ```javascript for (let key in student) { console.log(key, student[key]); } ``` Observe the output and see how each key and value is printed. ## Visual Comparison: Array vs Object ```plaintext Array ----- ["apple", "banana", "mango"] Index based 0 → apple 1 → banana 2 → mango Object ------ person { name: "Shivam" age: 21 city: "Mumbai" } Key based name → Shivam age → 21 city → Mumbai ``` ## Final Thoughts Objects are one of the **most important structures in JavaScript**. They allow us to store and organize related data in a clear and meaningful way. By learning how to: * create objects * access properties * update values * add or delete properties * loop through keys you gain a powerful tool for building real-world applications. The best way to understand objects is to **experiment with them in your console**. Try creating objects for things around you—students, cars, or products—and practice accessing and modifying their properties. Over time, working with objects will become a natural part of writing JavaScript programs.