JavaScript for…in Loop

In this chapter, we will learn about the JavaScript for...in loop. This loop is used to iterate over the properties of an object. We will cover:

• What is a for...in Loop?
• Syntax
• Using the for...in Loop with Objects
• Using the for...in Loop with Arrays
• Simple Programs using for...in Loops

What is a for…in Loop?

The for...in loop is a control flow statement that allows you to iterate over the enumerable properties of an object. It is commonly used to loop through the properties of objects and arrays.

Syntax

for (variable in object) {
  // code to be executed
}

• variable: A variable that holds the name of the current property being processed.
• object: The object whose enumerable properties are iterated over.

Using the for…in Loop with Objects

Example

let person = { firstName: "Amit", lastName: "Kumar", age: 30 };

for (let key in person) {
  console.log(key + ": " + person[key]);
}

Output:

firstName: Amit
lastName: Kumar
age: 30

In the example above, the for...in loop iterates over the properties of the person object and prints each key-value pair.

Using the for…in Loop with Arrays

While the for...in loop can be used to iterate over arrays, it is not recommended because it iterates over all enumerable properties, including those added to the array’s prototype. It is better to use a for loop or for...of loop for arrays.

Example

let fruits = ["apple", "banana", "mango"];

for (let index in fruits) {
  console.log(index + ": " + fruits[index]);
}

Output:

0: apple
1: banana
2: mango

In the example above, the for...in loop iterates over the indices of the fruits array and prints each index-value pair.

Simple Programs using for…in Loops

Program 1: Print Object Properties and Values

let car = { make: "Toyota", model: "Corolla", year: 2020 };

for (let key in car) {
  console.log(key + ": " + car[key]);
}

Output:

make: Toyota
model: Corolla
year: 2020

Program 2: Count the Number of Properties in an Object

let student = { name: "Ravi", age: 22, course: "Engineering" };
let count = 0;

for (let key in student) {
  count++;
}

console.log("Number of properties: " + count);

Output:

Number of properties: 3

Program 3: Capitalize the First Letter of Each Word in an Array

let words = ["hello", "world", "javascript"];
let capitalizedWords = [];

for (let index in words) {
  let word = words[index];
  capitalizedWords[index] = word.charAt(0).toUpperCase() + word.slice(1);
}

console.log(capitalizedWords);

Output:

["Hello", "World", "Javascript"]

Conclusion

In this chapter, you learned about the JavaScript for...in loop, including its syntax and how to use it with objects and arrays. We also covered various use cases with simple programs to demonstrate the usage of for...in loops. The for...in loop is used for iterating over the properties of objects. In the next chapter, we will explore the JavaScript for...of loop and how to use it to iterate over iterable objects like arrays, strings, and more.