# Javascript Object Methods

## What are objects?? 🧐

- An object is a list of items that are stored in the form of key-value pairs.
- The value stored in the object can be of any valid type in Javascript.

<aside>
💡 JavaScript object is a non-primitive data type that allows you to store multiple collections of data.

</aside>

### Declaring an object

```jsx
//Sample Object
const user = {

    name: 'abc',

    email: 'abc@.com',

    age: 21,

    company:'Floxus'
};
```

In this object, **name, email, age, company** are the keys, and **abc, abc@.com, 21, Floxus** are the values.

## How do we iterate over objects? 🤔

If you have an array that is considered to be an object in javascript, you can not loop through the array using map(), forEach(), or a for..of loop.

### So what to do now???

**The various methods that can be used to loop through objects in JavaScript are**:

- `Object.keys method`
- `Object.values method`
- `Object.entries method`

> Before ES6, the only way to loop through an object was through using the **for...in** loop.
> 

### When these methods will be used

- In many cases, you may find it necessary to convert your object data into array data.
- Particularly if you want to make use of all of the different array methods to transform your data in a more dynamic way.
- **for...in** fails here,
- But with the help of some built-in Object methods, you can convert objects into arrays in three different ways. These methods are **Object.keys**, **Object.values** and **Object.entries.**

**Now let's code** 😎

## Object.keys()

<aside>
👉 The **Object.keys()** method was introduced in ES6 to make it easier to loop over objects.

</aside>

- The **object.keys** function is used to pick only keys or property labels of objects and **returns an array containing all properties names (or keys).**
- After which you can use any of the array looping methods, such as forEach(), to iterate through the array and retrieve the value of each property.

**Example**

```jsx
const user = {

    name: 'abc',

    email: 'abc@.com',

    age: 21,

    company:'Floxus'
};

// convert object to key's array
const keys = Object.keys(user);

// print all keys
console.log(keys); //['name', 'email', 'age', 'company']

// iterate over object
keys.forEach((key, index) => {
    console.log(`${key}: ${user[key]}`);
});

//    name: 'abc',

//    email: 'abc@.com',

//    age: 21,

//    company:'Floxus'
```

## **Object.values()**

<aside>
👉 **The Object.values() method was introduced in ES8 and it works opposite to that of Object.key().**

</aside>

- It returns the values of all properties in the object as an array.
- You can then loop through the values array by using any of the array looping methods.

**Example**

```jsx
const user = {

    name: 'abc',

    email: 'abc@.com',

    age: 21,

    company:'Floxus'
};

// convert object to values array
const values = Object.values(user);

// print all values
console.log(values); //['abc', 'abc@.com', '21', 'Floxus']

// iterate over an object
Object.values(user).forEach(val => console.log(val));

//    abc

//    abc@.com

//    21

//    Floxus
```

## ****Object.entries()****

<aside>
👉 **The Object.entries(), an other ES8 method can be used for traversing an array.**

</aside>

- **Object.entries()** creates a nested array of the key and value pairs of an object.
- Once we have the **key and value pair arrays**, we can use the **forEach()** method to loop through and work with the results.

**Example**

```jsx
const user = {

    name: 'abc',

    email: 'abc@.com',

    age: 21,

    company:'Floxus'
};

// convert object to array
const entries = Object.entries(user);

// print all entries
console.log(entries); 
//[['name', 'abc'], ['email', 'abc@.com'], ['age', 21],['company','Floxus']]

// iterate over object
Object.entries(user).forEach(([key, value]) => {
    console.log(`${key}: ${value}`)
});

//    name: abc,

//    email: abc@.com,

//    age: 21,

//    company:Floxus
```

<aside>
👉 **The Object.entries() method will only return the object instance’s own properties and not any properties that may be inherited through its prototype.**

</aside>


<aside>

📌 **SUMMARY: When you are in a situation where you have a more static data structure like an object, but you need to manipulate its contents in a more dynamic way, look into using one of the methods we’ve covered here either Object.keys, values or entries.**

</aside>