How to Use Javascript for Loop with Index [4 Examples]

The for loop is great for iterating over arrays and objects in Javascript. The for loop is a powerful control structure that allows you to repeat a block of code a specified number of times.

The index is a variable that keeps track of the current iteration of the loop. This variable is updated with each iteration of the loop, allowing you to access the current index of the array or object being processed.

The basic syntax of the for loop with index in JavaScript is:

for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
}

In this example, the for loop starts with an initial value of 0 for the index i. The loop will continue to run as long as i is less than the length of the array. The index i is incremented by 1 after each iteration of the loop. The code inside the loop block will be executed for each value of i until the loop is finished.

The index can be very useful for operations such as:

1. Creating a Counter for the For Loop

You can use the index in a for loop to keep track of how many times a loop has been executed. For example, you can use the index to count the number of items in an array, or to keep track of the number of times a certain operation has been performed.

let numbers = [1, 2, 3, 4, 5];
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
  sum += numbers[i];
}
console.log(sum); // 15

From the example, you can see the index value was used to keep count of the numbers or times the loop was excecuted. As soon as the index value reached the total number of array values, the for loop stopped.

2. Accessing and Manipulating Array Elements

You can use the index in a for loop to access specific elements in an array and perform operations on them. For example, you can use the index to add all the elements of an array, or to modify a specific element in the array.

let numbers = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
  numbers[i] = numbers[i] * 2;
}
console.log(numbers); // [2, 4, 6, 8, 10]

In this example, the index has been used to access each element in the array and multiply it by two.

3. finding the highest or lowest value in an array

A simple example of using a for loop with index to find the highest value in an array:

let numbers = [1, 5, 2, 8, 9, 10];
let highestValue = numbers[0];

for (let i = 1; i < numbers.length; i++) {
  if (numbers[i] > highestValue) {
    highestValue = numbers[i];
  }
}

console.log(highestValue); // 10

The for loop starts with an initial value of 1 for the index i because the first value in the array has already been assigned to highestValue. The loop continues to run as long as i is less than the length of the numbers array. Each iteration of the loop checks if the current value of numbers[i] is greater than the current value of highestValue. If it is, highestValue is updated with the new value.

4. Looping over an object’s properties

You can use the index in a for loop to access the properties of an object and perform operations on them. For example, you can use the index to display the properties and values of an object, or to calculate the sum of all the properties in an object.

let person = {
  name: "John",
  age: 30,
  height: 175,
};
for (let i in person) {
  console.log(`${i}: ${person[i]}`);
}

In conclusion, the for loop with index is a powerful tool for processing arrays and objects in JavaScript. Whether you’re working with arrays of numbers, strings, or objects, the for loop with index makes it easy to access and manipulate the data within those arrays.