JavaScript Iterate Object Key Value

In javascript, one of the common tasks is to iterate through an object’s key-value pairs. So, in this article, we will see about how to iterate object key value in javascript.

Table of Contents

What is object iteration in js?

It refers to the process of looping through the keys and values of an object. An object is a collection of properties, where each property consists of a key-value pair. Object iteration allows you to access and manipulate each key-value pair in the object.

Let’s define an object in JavaScript:

const obj = {
  name: "John",
  age: 28,
  eduction: "B.Tech"
};

In this example, we have created the object ‘obj’ and it has three key-value pairs. The keys are name, age, and education and their corresponding values are “John”, 28, and “B.Tech”.

Why we need to iterate object key value

It is a common task that is required when working with objects in JavaScript.

Object Validation: When working with objects, you need to check whether a particular property has a value, or meets other criteria. Iteration object will help to validate its properties.
Accessing Object Properties: Objects in JavaScript are collections of key-value pairs. We can access each property and its corresponding value using iterate over an object’s property.
Manipulating Object Properties: We can manipulate object properties during iteration by changing their values, deleting them, or adding new properties.

2 ways to iterate object key value

There are several ways to iterate over an object’s key-value pairs but we will see some common methods:

1. Using a for…in loop:

In this method, we use the for…in loop is used to loop through the keys of an object. Let’s see example:

const myObj = {
 name: "John",
 age: 28,
 eduction: "B.Tech"
};

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

In this above example code, we have created the object ‘myObj’ and it has three key-value pairs.
Then we create the for in loop and created variable ‘key’ inside it. In each iteration, the loop assigns the current key to the loop variable. Then be used to access the corresponding value of the object using bracket notation
Finally, we concatenate the string to create a message that consists of the property name, a colon, and the value of the property, and logs this message to the console().
See the above output, the object ‘myObj’ key-value pairs are displayed.
```
//output:
name: John
age: 28
eduction: B.Tech
```

2. Using Object.keys() and forEach():

const myObj = {a: 1, b: 2, c: 3};

Object.keys(myObj).forEach(function(key) {
  console.log(key + ': ' + myObj[key]);
});

In this code:

We have created the object ‘myObj’ and it has three key-value pairs.
Then we use the Object.keys() method and pass object ‘myObj’ as an argument. The Object.keys() returns an array of the keys of an object.
Then use the forEach() method to iterate over the array of keys and access the corresponding values of the object using bracket notation.
Finally, we logged the variable key because it has the property name, a colon, and the value of the property. Output:
```
a: 1
b: 2
c: 3
```