# Understanding Objects in JavaScript

## What objects are and why they are needed

Object is the derived datatype in JavaScript which is a collection of properties and methods.

Objects can store any type of data in key value pairs.

## Creating objects

There are two ways to create and object :

### **Object Literal**

It is a shorthand syntax for creating objects.

```javascript
const user = {
    name : 'kartik',
    age : 25
}

console.log(user);
```

### **Object Constructor**

```javascript
const user = new Object();

user.name = 'kartik';
user.age = 25;

console.log(user);
```

## Accessing properties (dot notation and bracket notation)

### Dot Notation

```javascript
const user = {
    name : 'kartik',
    age : 25
}

//syntax - object_name.property_name
console.log(user.name);
```

### Bracket Notation

```javascript
const user = {
    name : 'kartik',
    age : 25
}

const prop = 'name';

//syntax - object_name[variable_name]
console.log(user[prop]);
```

## Updating object properties

```javascript
const user = {
    name : 'kartik',
    age : 25
}

user.age = 50;
user['name'] = 'Vishal';

console.log(user);
```

## Adding and deleting properties

```javascript
const user = {};

//adding properties
user.name = 'kartik';
user.age = 25;

//deleting properties
delete user.name;

console.log(user);
```

## Looping through object keys

for..in loop is most commonly used loop in the objects.

```javascript
const user = {
  name: "Kartik",
  email: "kartik@example.com",
  age: 21,
  isLoggedIn: true,
  role: "developer"
};

for(let key in user){
    console.log(key + ' : ' + user[key]);
}
```

## Making object iterable

Any object which contains Symbol.iterable is iterable through for of loop.

Every iterable object like array, string contains Symbol.iterable key.

To make any object iterable, we need to create Symbol.iterable key.

### Steps to make object iterable

*   create a function
    
*   function returns a object containing closure function named next()
    
*   closure function returns object.
    

```javascript
const obj = {
    name : 'kartik',
    marks : [20,15,56,85,45],
}

obj[Symbol.iterator] = function () {
    const marks = this.marks;
    let index = 0;
    return {
        next(){ //closure function
            if(index < marks.length){
                return {value : marks[index++], done: false}
            }
            return {done : true}
        }
    }
}

for (const mark of obj) {
    console.log(mark)
}

// value = current value
// done: false = still more values left
// done: true = iteration finished
```