# Understanding Objects in JavaScript

## What objects are and why they are needed?

An **object** in javascript is a collection of related data stored as key–value pairs .Let us try to understand Objects with a real-world example. In the real world, a Person or a Student isn't just with a name only ,it has age, date of birth , skin color , height , ethnicity, employed or not, marital status, education ,address and so on .So an object allows us to store all the related information of the person or student under a single name.

**Note**:`An object keys can only be a string or a symbol`

```javascript
//With Objects 
let student = { name: "Abhishek", age: 22, city: "Delhi" ,isEmployed:true};

/* 
Here keys are : name , age , city ,isEmployed
Values are : Abhishek ,22 ,Delhi , true

*/
```

Without an object, a user would have to store each information about the person with many different variable names, and suppose there are 100 person or student then it would be too cumbersome to create variables to store information about each person and it would be hard to manage too.

```javascript
//Without Objects
let name = "Abhishek"; 
let age = 22;
let city = "Delhi"
let isEmployed=true;
```

![](https://cdn.hashnode.com/uploads/covers/69821ff00f89ae94fd533b40/ef66cc72-bd5d-43d4-b648-83fd28f64d39.png align="center")

* * *

## Visual representation of object key-value structure

![](https://cdn.hashnode.com/uploads/covers/69821ff00f89ae94fd533b40/7b0886fd-9e3b-499f-be1f-1ef195fc3adb.png align="center")

### How Array differs form Object in javscript ?

Both array and oject stores multiple value in javascript but they both differ in structure ,acess, and use cases.Array are index based and use numeric indexes to access while object use named keys or bracket to access.

Note: **We use arrays for lists where order matters, objects for labeled properties.**

1.  **Array**
    

```javascript
// Array: Creating 
const student1 = [];  // Array literal used commonly
// or
const student2 = new Array();  // Array constructor

// Add student data in the corresponding array
student1[0] = "Ram";      // name
student1[1] = 20;         // age
student1[2] = "B.Tech";   // course

student2[0] = "Shyam";    // name
student2[1] = 22;         // age
student2[2] = "M.Tech";   // course

// Better way 
const student3 = ["Gyan", 20, "B.Tech"];
const student4 = new Array("Aman", 22, "M.Tech");

console.log("Array literal:", student1);     // ["Ram", 20, "B.Tech"]
console.log("Constructor:", student2);      // ["Shyam", 22, "M.Tech"]
console.log("Pre-filled already:", student3); // ["Gyan", 20, "B.Tech"]

```

1.  **Object**
    

```javascript
// Object: Creating 
const student1 = {};  // Object literal used commonly
// or
const student2 = new Object();  // Object constructor

// Add student data in the corresponding object
student1.name = "Ram";
student1.age = 20;
student1.course = "B.Tech";

student2.name = "Shyam";
student2.age = 22;
student2.course = "M.Tech";

// Better way 
const student3 = { name: "Gyan", age: 20, course: "B.Tech" };
const student4 = new Object({ name: "Aman", age: 22, course: "M.Tech" });

console.log("Object literal:", student1);     // {name: "Ram", age: 20, course: "B.Tech"}
console.log("Constructor:", student2);       // {name: "Shyam", age: 22, course: "M.Tech"}
console.log("Pre-filled already:", student3); // {name: "Gyan", age: 20, course: "B.Tech"}
```

![](https://cdn.hashnode.com/uploads/covers/69821ff00f89ae94fd533b40/9624bab9-4cbe-4c1c-ba4a-e04b9a020e4f.png align="center")

* * *

## Creating Objects & Accessing Properties

An object is crated with object literal ( **curly braces** =>`{ }` ) or with a **new Object() .**To read the data we can use Dot ( . ) notation or bracket ( \[ \] ).

Synatx:

```javascript

const student1={};

//or

const student2=new Objects();

```

Let us create an object with the variable name Student

```javascript
// Creating the object 
let student = { name: "Abhishek", age: 22, course: "ChaiCode-2026 Web Devlopment Cohort" };

// Accessing Properties
 console.log(student.name); // Dot notation: Abhishek (Most commonly  used)
 console.log(student["course"]); // Bracket notation: ChaiCode-2026 Web Devlopment Cohort (Useful for dynamic keys)
```

## Updating, Adding, and Deleting from an Object

Objects are **mutable** , it means we can change them after they are created .

We can perform update , add , delete operation on an object.

```javascript
// Creating the object with key value pairs
let student = { name: "Abhishek", age: 22, course: "ChaiCode-2026 Web Devlopment Cohort" };



//  Update a property
student.age = 21; //it assign new value 21 directly overwrite the old one 

// Add a new property
student.city = "Pune";//it carate a new property with key city and its valye us Pune 

// Delete a property
delete student.course; 

console.log(student); // { name: "Abhishek", age: 21, city: "Pune"}
```

## Looping through an object

To read everything inside an object automatically, we use a `for...in` loop. This loop goes through every **key** (the label) so we can access the **value** .

```javascript
let student = {
    name: "Abhishek",
    age: 22,
    city: "Delhi",
course: "ChaiCode-2026 Web Devlopment Cohort"
};

// Loop through the object
for (let key in student) {
    // key are (name, age, city)
    // person[key] is the value (Abhishek, 22, Delhi)
    console.log(key + ": " + student[key]);
}

//Ouput will be like this
/*
name: Abhishek
age: 22
city: Delhi
course: ChaiCode-2026 Web Devlopment Cohort
*/
```