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 the for...in loop to iterate over string values. For example,
const string = 'code'; // using for...in loop for (let i in string) { console.log(string[i]); }; Output
c o d e
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: