# 06 Understanding Objects in JavaScript

Hey readers! Welcome to another blog of JavaScript series, in this blog we are going to discuss about the objects in JavaScript, why are they even required? what is the syntax to write it and looping on the objects as well.

As of now we know about the [arrays](https://www.shubhujalablogs.live/javascript-arrays) in javaScript, so the question that comes in our mind is if array is already there then what is the requirement of the objects? well we can understand it with a example:

Suppose I want to store my name , age and city then using array this is i can store my details

```javascript

const myDetails = ["shubh", 22, "jalandhar"];
```

Now lets try to store the same data in the object

```javascript
const myDetails = {
    name : "Shubh",
    age : 22,
    city : "jalandhar"
}
```

When one you found more meaningful? obvoiusly the object one right? so this is why we need objects to store the data with meaning

So, Object is nothing just a collection of key-value pairs , where key is the label (like `name`, `age`, `city` ) and the value is actual data which we are storing `"shubh" 22`,`"jalandhar"`)

### Creating objects

we can create object using curly braces `{ }`

```javascript

const myDetails = {
    name : "Shubh",
    age : 22,
    city : "jalandhar"
}
console.log(myDetails)
```

* * *

### Accessing properties

In the object we can access the properties using two notations

1.  **Dot Notation**
    

```javascript
const myDetails = {
    name : "Shubh",
    age : 22,
    city : "jalandhar"
}

console.log(myDetails.age);
console.log(myDetails.city);
console.log(myDetails.name);
```

2.  **Bracket Notation**
    

```javascript
const myDetails = {
    name : "Shubh",
    age : 22,
    city : "jalandhar"
}

console.log(myDetails['name']);
console.log(myDetails['age']);
```

* * *

### Updating object properties

we can update the properties of the object like this

```javascript
const myDetails = {
    name : "Shubh",
    age : 22,
    city : "jalandhar"
}

myDetails.age = 21,
console.log(myDetails);
```

* * *

### Adding and Deleting properties

1.  **Adding property**
    
    ```javascript
    const myDetails = {
        name : "Shubh",
        age : 22,
        city : "jalandhar"
    }
    
    myDetails.salary = '10Lpa',
    console.log(myDetails);
    ```
    
2.  Deleting property
    
    ```javascript
    const myDetails = {
        name : "Shubh",
        age : 22,
        city : "jalandhar",
        salary : '10Lpa'
    }
    
    delete myDetails.salary
    console.log(myDetails);
    ```
    

* * *

### Looping through object

to simply loop over the object we can use the `for...in` loop, like this:

```javascript

const myDetails = {
    name : "Shubh",
    age : 22,
    city : "jalandhar",
    salary : '10Lpa'
}

for (const key in myDetails) {
    console.log(myDetails[key]);
}

// output :
/*
    Shubh
    22
    jalandhar
    10Lpa

*/
```

* * *

### Array vs Objects

| **Feature** | **JavaScript Arrays** | **JavaScript Objects** |
| --- | --- | --- |
| **Index Type** | Numeric indexes (0, 1, 2, ...) | Named keys (strings or symbols) |
| **Order** | Ordered collection | Unordered collection |
| **Use Case** | Storing lists, sequences, ordered data | Storing data with key-value pairs, attributes |
| **Accessing Elements** | Accessed by index (e.g., arr\[0\]) | Accessed by key (e.g., obj\["key"\]) |
| **Iteration** | Typically iterated using loops like for or forEach | Iterated using for...in, Object.keys(), or Object.entries() |

* * *

### Try it yourself

Here are the questions that you can practice by your own

1.  Create an object representing a student
    
2.  Add properties like name, age, course
    
3.  Update one property
    
4.  Print all keys and values using a loop
    

* * *

### Conclusion

Objects are used when we want give details with label

*   Object : key-value pair
    
*   values of the object are accesed using dot notation, brackets notation
    
*   we can add, remove or update the values of the object
    
*   for looping we have to use `for...in` through keys
    

* * *

Hope you enjoyed reading❤️