4 For Loops in React/JS

Writing a for-loop is one of the most common parts of any programming and implementation. You usually deal with a list of data objects you need to go through and process them. In each programming language and framework, usually, there are multiple ways to write a for-loop depending on the target list that we are dealing with. In this post, we see four ways of writing a for-loop in React/JS. 

Note: In all code examples. the variable “result” is just for pushing the objects into view. You can do any type of processing in the loop.

Type1: Traditional

This is the most common and traditional way to write a for-loop. Many programming languages follow almost the same syntax in this type of loop. It is suitable for all iterable data objects.  Here we need three things: 

• A counter
• Length of the target array
• A way to Increment the counter

As an example, let’s say we have a list of objects. We want to loop over them and display them for the user. Here is the code:

let targetData = ["apple", "orange", "car", "plane"];
let result = [];
    
for(let i=0; i<targetData.length; i++){
    result.push(
        <p>{targetData[i]}</p>
    );
}

The variable “i” is our counter. It increases by one on each loop. Until it reaches the end of the list. 

Note: You can increase the counter by any other number. For example, i+=2 (instead of i++) will increase the counter by two on each iteration.

Type2: For … of

This for-loop works exactly like Type1. However, here the syntax is less complex. The idea is we write a loop that on each iteration takes one of the list members in order.  We just need a variable to assign each list object to it on each iteration. Here is the code (on the same list):

let targetData = ["apple", "orange", "car", "plane"];   
let result = [];

for(let obj of targetData){
      result.push(
           <p>{obj}</p>
       );
}

So on each iteration, “obj” is the target list member. It is equivalent to the targetData[i] in Type1 for-loop.

Type3:  For … in

Sometimes we are dealing with an object in Javascript that is not iterable. For example, consider this object: 

{“name”: “John”, “ID”: “1234”}

Let’s say we want to print the name and ID of this person on our application page. For this object, the previous For-loops do not work. To iterate over an object, we can use For-in:

let targetData = {"name": "John", "ID": "1234"};
let result = [];

for(let obj in targetData){
      result.push(
          <p>{obj} : {targetData[obj]}</p>
      );
}

The For-in loop iterates over an array of indices. In the case of an object, the index will be the keys in that object. (obj in the for loop)

Note: in the case of an iterable array, the indices will be positive integers.

Type4: Map

This is not actually a for-loop, but it acts the same way. Map is like type one and two of the mentioned for-loops. It works only on iterable data. The difference is that Map is actually a function. It has two default input parameters which are the array item and its index in the array. Therefore it has all the benefits of both for-in and for-of loops at the same time. Therefore, it is perfect when dealing with an object with some properties.

let targetData = {"name": "John", "ID": "12345"};
let result = [];

Object.entries(targetData).map(([key, value]) => {
      result.push(
          <p>{key} : {value}</p>
      );
});
    

targetData = ["apple", "orange", "car", "plane"];  

targetData.map((item, index) => {
      result.push(
          <p>Item number {index} is: {item}</p>
      );
});

Note: in the above example, Object.entries returns the pair of key:values in the object as a list that is iterable by the Map function. 

The End.