A Beginner's Guide to Array Handling with For Loops in JavaScript

Introduction

Today, we'll explore the for loop method for working with arrays. It's a straightforward and powerful way to handle arrays. With the for loop, we can go through each value in the array one by one. We can easily retrieve, add, or update any value in any part of the array. Adding conditions within arrays helps us get the specific results we want. If you're curious to dive deeper into the for loop, I've got a detailed guide where I break down each step for you. Feel free to check it out here.

In this article, we will cover the following methods of working with arrays using a loop:

• Accessing all the values of an array
• Updating values of an array
• Using conditions to get the desired results

Accessing Values of an Array:

Accessing the values of an array is simple with the help of a loop. In this example, we will create an array and then access all its values using a loop. This process is easy to understand.

Let's write some code to learn how it works.

 let array = [1, 2, 3, 4, 5, 6, 7]; // simple array in JS

 for(let i = 0; i <= array.length; i+=1) {
   console.log(array[i])
 }
                                
// output = 1, 2, 3, 4, 5, 6, 7;

Remember, Indexing always starts from 0 in JavaScript. So, the first value of the array will be at index 0, the second value at index 1, and so on. In the above code, we have an array with values from 1 to 7. We use a loop to access all the values of the array one by one. The loop will run until the length of the array is reached. We use the console.log() method to display the values of the array. The output will be 1, 2, 3, 4, 5, 6, 7.

Updating values of an array:

Updating the values of an array is as easy as accessing the values. In this example, we will create an array and increment all its values by 1 using a loop. Let's write some code to learn how it works.

 let array = [1, 2, 3, 4, 5, 6, 7]; 
 for (let i = 0; i < array.length; i+=1) {
   console.log(array[i] += 1)
 }

 //  output = 2, 3, 4, 5, 6, 7, 8;

Let’s break this down so that we can understand it well.

To begin with, we created an array and initiated a loop to iterate through all the values of the array. Inside the loop, we used array[i] += 1 to increase each value by 1. Here, array[i] refers to the fact that all the values of the array are yet to be updated, and by adding +=1, all the values will be updated by 1.

Using conditions in loop:

Loops are a programming construct that allows us to repeat actions in JavaScript. Adding conditions inside the loop is like giving extra instructions to the program. It enables us to control and customize the results we get from our programs. For instance, if we want only the values greater than 3 in an array of 1 to 7, we will use a condition like if/else to get the desired outcome. Let’s write some code to learn how it works.

 let array = [1, 2, 3, 4, 5, 6, 7]; 

 for (let i = 0; i <= array.length; i+=1) {
   if(array[i] > 3) {
     console.log(array[i]);
   }
 }
 // output = 4, 5, 6, 7

Let's break this down so that we can understand it well.

To get the desired values, we started by creating an array. We then initiated a loop within the array and added an if/else condition. This is a basic usage of the if/else condition which is very useful in programming, especially when working with complex functions.