JavaScript for in loop is another type of for loop for dealing with objects. We use this loop statement for looping or iterating through all properties of an object in JavaScript.
In other words, for…in loop statement is used to loop through keys and values of an object.
In this for…in loop, we assign one property of an object to a variable name.
The general syntax to use for…in loop statement in JavaScript is as follows:
for (property in object) {
// code block to be executed
}
Or,
for(key in object) {
// code block to be executed
}
The syntax of for in loop consists of the for keyword followed by a variable that represents the value of each object’s property.
The variable name is followed by the in keyword and the name of an object that we want to loop through. The for in loop’s body is executed once for each property of an object.
Consider the following code example.
<script>
const student = {firstName: "Ruchi", lastName: "Priya"};
// Looping key/value pairs.
for(let st in student) {
document.write(st+ ": " +student[st], "<br>");
}
</script>
Output:
firstName: Ruchi
lastName: Priya
In the above example, the st is the name of variable that represents property name and student[st] represents the values of properties. student is the name of object.
Note:
The for in loop in JavaScript does not specify the order in which the object’s properties are assigned to the variable. There is no way to tell JavaScript interpreter in advanced what order will be.
JavaScript for in loop Example Program
1. Let’s create a very simple JavaScript program in which we will iterate over properties of an object person and display them on the web browser.
Program code 1:
<html>
<head>
<title>Iterating over properties of an object in JavaScript</title>
</head>
<body>
<script>
let person = {
firstName: "Tripti",
lastName: "Priya",
scName: "RSVM",
id: 12342
};
// Using for...in loop statement for iterating over keys/values of an object person.
for (let per in person) {
// Displaying all properties with values.
document.write(per+ ": " +person[per]+ "<br>");
}
</script>
</body>
</html>
Output:
firstName: Tripti
lastName: Priya
scName: RSVM
id: 12342
In this program, the for in loop in JavaScript iterates over a person object and prints all its properties with values on the web browser.
Each time for…in loop goes to a new property, JavaScript interpreter assigns the new property to the variable per and print it on the browser.
person[per] is used to access the value of per.
Program code 2:
<html>
<head>
<title>Looping over properties of an object in JavaScript</title>
</head>
<body>
<script>
let person = {
firstName: "John",
lastName: "Miller",
age: 26
};
let myString = "";
// Using for...in loop statement for iterating over properties of an object person.
for ( let per in person ) {
myString += person[per] + " ";
}
// Displaying all properties.
document.write(myString);
</script>
</body>
</html>
Output:
John Miller 26
Inside JavaScript for-in loop, interpreter loops through all properties of the person object. Each time it comes to the new property, the interpreter assigns new property to the variable per.
Then, interpreter creates an empty string named myString and adds the string to the end of myString variable.
Program code 3:
<html>
<head>
<title>Looping over properties of an object in JavaScript</title>
</head>
<body>
<script>
const student = {
name: 'Priya',
class: 10,
age: 15
};
for (let st in student ) {
// Prints the properties of student object.
document.write(`${st}: ${student[st]}`, "<br>");
}
</script>
</body>
</html>
Output:
name: Priya
class: 10
age: 15
How to update Values of Properties?
Let’s create a JavaScript program in which we will update the values of properties while iterating properties of an object.
Program code 4:
<html>
<head>
<title>Updating values of properties</title>
</head>
<body>
<script>
const salaries = {
Jack : 50000,
Ricky : 30000,
Deep : 60000
};
// Using for...in loop statement.
for ( let sl in salaries) {
// Adding a currency symbol.
let salary = "$" + salaries[sl]; // updating values.
// Displaying the values.
document.write(`${sl} : ${salary}`, "<br>");
}
</script>
</body>
</html>
Output:
Jack : $50000
Ricky : $30000
Deep : $60000
In this example program, the for…in loop iterates over the properties of the salaries object. Then, we have updated a string $ to each value of the object.
Iterating over String Values
Let’s create a JavaScript program in which we will iterate over string values using JavaScript for-in loop.
Program code 5:
<html>
<head>
<title>Iterating over String values</title>
</head>
<body>
<script>
const string = "Hello";
// Applying for...in loop.
for (let s in string) {
document.write(string[s], "<br>");
}
</script>
</body>
</html>
Output:
H
e
l
l
o
Iterating over Arrays in JavaScript
Let’s create a JavaScript program to iterate over arrays in JavaScript.
Program code 6:
<html>
<head>
<title>Iterating over Arrays</title>
</head>
<body>
<script>
// Creating an array.
let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday"];
for(let d in days) {
document.write(days[d], "<br>");
}
</script>
</body>
</html>
Output:
Sunday
Monday
Tuesday
Wednesday
Thursday
Let’s take an example program in which we will calculate the sum of five numbers using for…in loop statement.
Program code 8:
<html>
<head>
<title>Iterating over Arrays</title>
</head>
<body>
<script>
// Creating an array.
let nums = [10, 20, 30, 40, 50];
let total = 0;
for(let n in nums) {
total += nums[n];
}
document.write("Sum of five numbers = " +total);
</script>
</body>
</html>
Output:
Sum of five numbers = 150
We will discuss more about the arrays in later tutorials.
You should not use for…in loop to iterate over an array if the index order is important. The for…of loop in JavaScript is one of the better ways to iterate over an array.
In this tutorial, you learned for in loop in JavaScript with various example programs. Hope that you will have understood the basic concept of for in loop and how to use it.
Thanks for reading!!!
Next ⇒ JavaScript for of loop⇐ Prev Next ⇒