You Don’t Need Loops In Java Script

Learn how to remove loops and use Higher Order Functions like map,reduce and filter

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 an new modified array

using loops:
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();
}
Without loop:
var names = ["Jack", "Jecci", "Ram", "Tom"];

var upperCaseNames = names.map(name => name.toUpperCase());

2. Loop through all elements and perform an action

Using loops

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 normal 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

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

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"); 

}

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. I hope you like this.

Rating: 1 out of 5.

Leave a comment

Design a site like this with WordPress.com
Get started