Before reading this tutorial, make sure you first learn about JavaScript objects.
The JavaScript for...in
loop iterates over the keys of an object.
Here's a simple example of the for...in
loop in JavaScript. Read the rest of the tutorial to learn more.
Example
const student = {
name: "Monica",
class: 7
};
// loop through the keys of student object
for (let key in student) {
// display the key-value pairs
console.log(`${key} => ${student[key]}`);
};
// Output:
// name => Monica
// class => 7
Here, the for...in
loop iterates over the keys of the student object. In each iteration of the loop, the key variable stores a single key belonging to student.
Syntax of JavaScript for...in Loop
for (key in object) {
// body of for...in
};
Here,
- object - The object whose keys we want to iterate over.
- key - A variable that stores a single key belonging to object.
Working of for...in Loop
- In the first iteration, the key variable is assigned the first key of object. The body of the loop is then executed.
- In the second iteration, the key variable is assigned the next key of object. The body of the loop is then executed.
- This process continues until there are no more keys over which to iterate.
Note: Once you get the keys of an object, you can easily find their corresponding values.
Example: JavaScript for...in Loop
const salaries = {
Jack: 24000,
Paul: 34000,
Monica: 55000
};
// use for...in to loop through
// properties of salaries
for (let i in salaries) {
// access object key using [ ]
// add a $ symbol before the key
let salary = "$" + salaries[i];
// display the values
console.log(`${i}: ${salary}`);
};
Output
Jack: $24000, Paul: $34000, Monica: $55000
In the above example, we used the for...in
loop to iterate over the properties of the salaries object. Then, we added the string $
to each value of the object.
Note: We have used the variable i instead of key because we can use any valid variable name.
More on JavaScript for...in Loop
You can also use for...in
with arrays. For example,
// define array
const arr = ["hello", 1, "JavaScript"];
// using for...in loop
for (let x in arr) {
console.log(arr[x]);
};
Output
hello 1 JavaScript
Note: You should not use for...in
to iterate over an array where the index order is important. Instead, it's better to use the for...of loop.
Also Read: