# Understanding Objects in JavaScript When you build real-world applications, you often work with **structured data**: * A person with name, age, and city * A product with title, price, and stock * A student with name, course, and grade In JavaScript, the most common way to represent this kind of structured data is with an **object**. This article will cover: * What objects are and why we need them * How to create objects * How to access and update properties * How to add and delete properties * How to loop through object keys * A clear comparison between **arrays** and **objects** * A simple assignment to practice ## **What Is an Object in JavaScript?** An **object** is a collection of **key–value pairs**. * The **key** (also called a “property name”) is usually a string. * The **value** can be **anything**: number, string, boolean, array, another object, or even a function. Real-world analogy: * Think of an object like a **dictionary**: * Each word (key) has a meaning (value). * Or like a record in a **form**: * `Name: Alice` * `Age: 25` * `City: Delhi` ### **Example: person object** ```javascript const person = { name: "Alice", age: 25, city: "Delhi" }; ``` Here: * `name`, `age`, `city` → keys (property names) * `"Alice"`, `25`, `"Delhi"` → values We use objects to group **related data** together in a meaningful way. ## **Why Do We Need Objects?** Without objects, we might do something like this: ```javascript const name = "Alice"; const age = 25; const city = "Delhi"; ``` This works, but: * All three variables **belong together**. * It’s harder to pass them around as one unit. * If you want to manage many people, it gets messy fast. With objects: ```javascript const person = { name: "Alice", age: 25, city: "Delhi" }; ``` Benefits: * **Organized**: related data is grouped. * **Readable**: `person.name` clearly tells you what it is. * **Scalable**: you can create many `person` objects (e.g., in an array of people). * * * ## **Creating Objects** There are multiple ways to create objects. The simplest and most common is the **object literal**. ### **1\. Object literal syntax (recommended for beginners)** ```javascript const person = { name: "Alice", age: 25, city: "Delhi" }; ``` * Curly braces `{}` Define the object. * Inside, you list **key: value** pairs, separated by commas. ### **2\. Creating an empty object, then adding properties** ```javascript const person = {}; // empty object person.name = "Alice"; person.age = 25; person.city = "Delhi"; ``` Both approaches are valid. Use the one that makes your code clearer. * * * ## **Accessing Object Properties** You can access properties in two main ways: * **Dot notation** * **Bracket notation** ### **Dot notation** This is the most common and easiest to read. ```javascript const person = { name: "Alice", age: 25, city: "Delhi" }; console.log(person.name); // "Alice" console.log(person.age); // 25 ``` Use dot notation when: * You know the property name in advance. * The property name is a **valid identifier** (no spaces, no special characters, doesn’t start with a number). ### **Bracket notation** Bracket notation works like indexing into a map of keys. ```javascript const person = { name: "Alice", age: 25, city: "Delhi" }; console.log(person["name"]); // "Alice" console.log(person["city"]); // "Delhi" ``` You **must** use bracket notation when: * The property name is stored in a **variable**. * The key has **spaces**, **hyphens**, or other special characters. Example with a variable key: ```javascript const key = "age"; console.log(person[key]); // 25 Example with a space in the key: const weirdObject = { "favorite color": "blue" }; console.log(weirdObject["favorite color"]); // "blue" // weirdObject.favorite color (not valid) ``` **Rule of thumb**: * Prefer **dot notation** when possible. * Use **bracket notation** when you need dynamic or unusual keys. ## **Updating Object Properties** You can change a property’s value using either dot or bracket notation. ### **Example** ```javascript const person = { name: "Alice", age: 25, city: "Delhi" }; person.age = 26; // update using dot person["city"] = "Mumbai"; // update using bracket console.log(person.age); // 26 console.log(person.city); // "Mumbai" ``` If the property already exists, it gets **overwritten** with the new value. ## **Adding New Properties** Adding a new property is the same as updating—if the key does not exist yet, JavaScript creates it. ```javascript const person = { name: "Alice", age: 25 }; person.city = "Delhi"; // new property person["country"] = "India"; // another new property console.log(person.city); // "Delhi" console.log(person.country); // "India" ``` You don’t need any special method—just assign a value to a new key. * * * ## **Deleting Properties** To remove a property from an object, you use the `delete` operator. ```javascript const person = { name: "Alice", age: 25, city: "Delhi" }; delete person.city; console.log(person.city); // undefined ``` * After `delete person.city`, the `city` property is no longer part of the object. * Accessing it returns `undefined`. Use `delete` when you truly want to **remove** the key from the object structure. ## **Looping Through Object Keys** Often, you want to process **all keys and values** in an object. The most common way for beginners is `for...in`. ### **Using** `for...in` ```javascript const person = { name: "Alice", age: 25, city: "Delhi" }; for (const key in person) { const value = person[key]; console.log(key, ":", value); } ``` Output: ```javascript name : Alice age : 25 city : Delhi ``` * `key` will be `"name"`, then `"age"`, then `"city"`. * `person[key]` gives you the corresponding value. ### **Using** `Object.keys()` **(slightly more advanced but very common)** ```javascript const keys = Object.keys(person); // ["name", "age", "city"] keys.forEach(function(key) { console.log(key, ":", person[key]); }); ``` For now, `for...in` It is enough to understand the basic idea. ## **Array vs Object: What’s the Difference?** Both **arrays** and **objects** can store multiple values, but they are used for different purposes. ### **Arrays: an ordered list of values** * Use arrays when you have an **ordered collection**. * Elements are accessed by **index** (0, 1, 2, ...). Example: ```javascript const cities = ["Delhi", "Mumbai", "Bengaluru"]; console.log(cities[0]); // "Delhi" console.log(cities[1]); // "Mumbai" ``` Arrays are best for lists like: * List of numbers * List of users * List of tasks ### **Objects: key–value pairs (labeled data)** * Use objects when you care more about **labels** (keys) than order. * Each value has a **name** (key) attached. Example: ```javascript const person = { name: "Alice", age: 25, city: "Delhi" }; console.log(person.name); // "Alice" console.log(person.age); // 25 ``` Objects are best for: * Representing a **single entity** with properties: * One person, one product, one student, one book. ### **Visual comparison** You can imagine these diagrams: **Array (index-based):** ```plaintext Index: 0 → Value: "Delhi" Index: 1 → Value: "Mumbai" Index: 2 → Value: "Bengaluru" ``` **Object (key-based):** ```plaintext Key: name → Value: "Alice" Key: age → Value: 25 Key: city → Value: "Delhi" ``` **Rule of thumb**: * Use an **array** when position/order matters and you have many of the **same type of things**. * Use an **object** when you have one thing with many **named properties**. ## **Assignment: Working with a Student Object** Here’s a practice exercise you can try in a `.js` file or console. ### **Step 1: Create an object representing a student** It should have properties like: * `name` * `age` * `course` Example: ```javascript const student = { name: "Rahul", age: 20, course: "Computer Science" }; ``` ### **Step 2: Update one property** Change the `course` or `age`. ```javascript student.course = "Information Technology"; // updating property ``` ### **Step 3: Add a new property** Add, for example, `city` or `isEnrolled`. ```javascript student.city = "Pune"; ``` ### **Step 4: Print all keys and values using a loop** Use `for...in`: ```javascript for (const key in student) { const value = student[key]; console.log(key, ":", value); } You should see something like: name : Rahul age : 20 course : Information Technology city : Pune ``` This exercise will help you: * Create objects * Update properties * Add properties * Loop through all keys and values ## **Diagram Ideas (For Visual or Slide Use)** You can sketch or design these as simple diagrams. ### **1\. Object key–value structure** Draw a box labeled `person`: * Inside it, three rows: * `name → "Alice"` * `age → 25` * `city → "Delhi"` This makes it clear that an object is a **container of labeled values**. ### **2\. Array vs Object comparison diagram** Two side-by-side boxes: * **Array**: * Indices: `[0, 1, 2]` * Values: `["Delhi", "Mumbai", "Bengaluru"]` * **Object**: * Keys: `[name, age, city]` * Values: `["Alice", 25, "Delhi"]` Label them: * “Array: ordered, index-based.” * “Object: labeled, key-based.” ## **Summary** * A **JavaScript object** is a collection of **key–value pairs** that represents structured data, such as a person, product, or student. * You can: * **Create** objects with `{}` key–value pairs. * **Access** properties using **dot** or **bracket** notation. * **Update** and **add** properties by simple assignment. * **Delete** properties with `delete`. * **Loop** through keys using `for...in`. * Use **objects** when you have one entity with multiple **named properties**, and **arrays** when you have a list of items in order.