JavaScript Iterate Object Key, Value
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Pragati
In this tutorial we will show you the solution of JavaScript iterate object key, value, looping through an enumerable dataset is a typical difficulty for programmers.
Arrays, lists, maps, and other objects can be used to store this information. In this tutorial, we'll look at how to solve this problem by utilizing JavaScript to loop through objects and obtain multiple key-value pairs.
Step by step guide on JavaScript iterate object key, value :-
Method 1 - for...in Loop
<html>
<head>
<title></title>
</head>
<body>
<script>
const user = {
name: 'Mudit Jain',
email: 'mudit.jain@example.com',
age: 25,
dob: '08/02/1989',
active: true
};
// iterate over the user object
for (const key in user) {
console.log(`${key}: ${user[key]}`);
}
</script>
</body>
</html>
- The for...in the statement is the simplest and most easy way to iterate across object properties. This approach is compatible with all current and older browsers, including Internet Explorer 6 and higher.
- Here's an instance of how to iterate over an object using the for...in loop:
Method 2 - Object.keys()
<html>
<head>
<title></title>
</head>
<body>
<script>
const courses = {
java: 5,
javascript: 22,
nodejs: 10,
php: 15
};
// convert object to key's array
const keys = Object.keys(courses);
// print all keys
console.log(keys);
// [ 'java', 'javascript', 'nodejs', 'php' ]
// iterate over object
keys.forEach((key, index) => {
console.log(`${key}: ${courses[key]}`);
});
</script>
</body>
</html>
- In ES6, the Object.keys() method was introduced. It accepts as a parameter the object you wish to iterate through it and returns an array with all of the properties' names (or keys).
- You can then cycle through the array and extract the value of each property using any of the array looping techniques, such as forEach().
Method 3 - Object.values()
<html>
<head>
<title></title>
</head>
<body>
<script>
const animals = {
tiger: '1',
cat: '2',
monkey: '3',
elephant: '4'
};
// iterate over object values
Object.values(animals).forEach(val => console.log(val));
</script>
</body>
</html>
- Object.values() is a new function in ES8 that does the reverse of Object.key(). It returns an array containing the values of all the object's properties.
- The values array can then be looped through using any of the array looping methods.
Method 3 - Object.entries()
<html>
<head>
<title></title>
</head>
<body>
<script>
const animals = {
tiger: '1',
cat: '2',
monkey: '3',
elephant: '4'
};
const entries = Object.entries(animals);
console.log(entries);
// `for...of` loop
for (const [key, value] of Object.entries(animals)) {
console.log(`${key}: ${value}`);
}
// `forEach()` method
Object.entries(animals).forEach(([key, value]) => {
console.log(`${key}: ${value}`)
});
</script>
</body>
</html>
- Another function introduced in ES8 is Object.entries(), which can be used to navigate an object. Object.entries() creates an array of arrays, unlike Object.values(), which create an array of the object's values.
- There are two elements in each inner array. The property is the first element, while the value is the second.
- You may use the for...of the loop or the forEach() function to traverse across the array produced by Object.entries(), as seen above.
Conclusion :-
In JavaScript, that's all there is to iterating over object properties. If you wish to iterate the key-value pair in older browsers, for...in is still an excellent solution.
Otherwise, any of the most recent methods might be used: Object.keys(), Object.values(), or Object.entries(). I hope this tutorial on JavaScript iterate object key, value helps you.
About Pragati
