How to Iterate over Key-Value Pairs in JavaScript

let obj = {
 "firstName": "John",
 "lastName": "Doe",
 "age": 30
};

Object.keys(obj).forEach((key) => {
 console.log(Key: ${key} and Value: ${obj[key]});
});

Using for...in loop

The for…in loop in JavaScript allows you to iterate over the properties, which are both keys and values, of an object. It is an efficient way to examine every property in an object and carry out operations. Let’s understand this with a code example.

let obj = {
 name: "John",
 age: 30,
 city: "New York"
};

for (let key in obj) {
 console.log(Key: ${key} - Value: ${obj[key]});
}

How it works

The for…in loop goes through the properties of the object, each time assigning the property’s key to the variable (in this case ‘key’), which you can then use in the block of code inside the loop. The value of each property can be accessed by using the key with the object.

• The loop starts with the ‘for’ keyword, followed by a set of parentheses. Inside these parentheses, you declare a variable (here, ‘key’) to hold the current key during each iteration.
• Following the ‘in’ keyword, you place the object over whose properties you want to iterate (here, ‘obj’).
• Within the loop, you can access the key of the current property (stored in ‘key’) and its corresponding value (retrieved with ‘obj[key]’).
• The specific operation within the loop (here, logging the key-value pair to the console) happens for each property in the object.
• The loop stops iterating once it has gone through all the properties in the object.

Using Object.keys() with forEach()

Object.keys() method in JavaScript is used to get an array containing all the keys present in the object, and forEach() is a method that allows you to iterate through this array, thus helping you to iterate key-value pairs in the object. Let’s understand this by using a code example.

let obj = {
 "firstName": "John",
 "lastName": "Doe",
 "age": 30
};

Object.keys(obj).forEach((key) => {
 console.log(Key: ${key} and Value: ${obj[key]});
});

How it Works

The Object.keys(obj) method is used to retrieve an array of all the keys in the object. The forEach() method then iterates over this array and for each key, it logs the key and corresponding value to the console.

• First, we create an object obj with some key-value pairs.
• Then, we use the Object.keys(obj) method to return an array that contains all keys present in our object.
• We then use the forEach() method on the array returned by Object.keys(). This forEach() method executes the provided function once for each array element.
• Inside the forEach() method, we have a callback function that takes a key as a parameter. This key corresponds to each key in our object.
• Finally, inside the callback function, we use console.log to print each key and its corresponding value.

Using for...of loop with Object.entries()

The ‘for…of’ loop in JavaScript combined with ‘Object.entries()’ allows you to iterate over an object’s key-value pairs. Let’s comprehend it with an example.

let student = {
 'name': 'John Doe',
 'age': 22,
 'department': 'Computer Science'
};

for (let [key, value] of Object.entries(student)) {
 console.log(${key}: ${value});
}

How it works

The ‘Object.entries()’ method returns an array of a given object’s own string-keyed property [key, value] pairs. This array can be iterated over with a ‘for…of’ loop.

• Step 1: An object named ‘student’ is created with properties ‘name’, ‘age’, and ‘department’.
• Step 2: ‘Object.entries(student)’ is called. This method returns an array of the object’s own property pairs, i.e., [[‘name’, ‘John Doe’], [‘age’, 22], [‘department’, ‘Computer Science’]].
• Step 3: The ‘for…of’ loop is used to iterate over each property pair from the array returned from ‘Object.entries(student)’.
• Step 4: Inside the ‘for…of’ loop, each property pair is destructured into ‘key’ and ‘value’ variables. The loop prints each key-value pair to the console.