rollercoaster
Pixabay at Pexels

Why Are We Replacing Loops?

Using higher-order functions will make your code :

  • More readable.
  • Easy to understand.
  • Easy to debug.

1. To Loop Through All Elements and Get a new modified array

Using for loop:

var names = ["Jack", "Jecci", "Ram", "Tom"];
var upperCaseNames = [];
for(let i=0, totalNames = names.length; i< totalNames ; i= i +1) {
    upperCaseNames[i] = names[i].toUpperCase();
}

Using map:

var names = ["Jack", "Jecci", "Ram", "Tom"];
var upperCaseNames = names.map(name => name.toUpperCase());

Note: If you’re using map, you cannot break or continue or return while looping. In this case, you should use every or some. 

2. Loop through all elements and perform an action

Using for loop:

function print(name) {
   console.log(name);
}
var names = ["Jack", "Jecci", "Ram", "Tom"];
for(let i=0, totalNames = names.length; i< totalNames ; i= i +1) {
    print(names[i])
}

Without loop:

var names = ["Jack", "Jecci", "Ram", "Tom"];
names.forEach(name=> print(name));

3. Filtering Array

Using for loop:

function isOdd(n) {
   return n %2;
}
var numbers = [1,2,3,4,5];
var odd = [];
for(let i=0, total = numbers.length; i< total ; i= i +1) {
   let number = numbers[i];
   if( isOdd(number) ) {
      odd.push(number);
   }
}

Using filter:

var numbers = [1,2,3,4,5,6,7]
var odd = numbers.filter(n => n%2); // single line

4. Creating an Output With Array Elements

Using for loop to create a Sum of numbers:

var numbers = [1,2,3,4,5]
var result = 0;
for(let i=0, total = numbers.length; i< total ; i= i +1) {
   result = result + numbers[i];
}

Using reduce:

var numbers = [1,2,3,4,5,6,7];
function sum(accumulator, currentValue){
   return accumulator + currentValue;
}
var initialVal = 0;
var result = numbers.reduce(sum, initialVal);

The above code can be even more simplified:

var numbers = [1,2,3,4,5,6,7, 10];
var result = numbers.reduce((acc, val)=> acc+val, 0);

5. Checking if an Array Contains a Value

Using for loop:

var names = ["ram", "raj", "rahul"];
for(let i=0, totalNames = names.length; i< totalNames ; i= i +1) {
   if(names[i] === "rahul") {
     console.log("%c found rahul", "color:red");
     return; 
   }
}

Using some:

var names = ["ram", "raj", "rahul"];
let isRahulPresent = names.some(name => name==="rahul");
if(isRahulPresent) {
  console.log("%c found rahul", "color:red"); 
}

%c in the console, statement will apply the style to the console text. You can learn more about that in this article.

6. To Check Whether Every Element in an Array Meets a Condition

Using for loop:

var num = [1,2,3,4,5, 0];
for(let i=0, total = numbers.length; i< total ; i= i +1) {
    if(num <= 0) {
      console.log("0 present in array");
    }
}

Using every:

var num = [1,2,3,4,5, 0];
var isZeroFree = num.every(e => e > 0);
if(!isZeroFree) {
    console.log("0 present in array");
}

Thanks for reading!