Why you don't need Loops in JavaScript?

Why you don't need Loops in JavaScript?

In this JavaScript Loops tutorial, you'll understand why you don't need Loops in JavaScript, why are you replacing Loops? Learn how to remove Loops and use higher-order functions like map, reduce, and filter

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 Perform an Action

Using 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.map(name => print(name));

// we can shrink the above code as

names.map(print);

2. 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

3. 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);

4. 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"); 
}

%c in the console statement will apply style to the console text.

5. 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) {      
            break;
      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.

JavaScript Angular React WebDev

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Angular vs React in 2020 - Differences between React and Angular

Angular vs React in 2020 will help differentiate between Angular and React and will help you choose the one that suits you the best. Below are the topics covered in this Angular vs React video: Introduction; License; DOM; Data Binding; Features; Speed and Productivity; Deployment; Learning Curve; Market Trend; Community Support

Vue vs. React vs. Angular: Which JavaScript Framework is Right for You

Vue vs React vs Angular: Which JavaScript Framework is Right for You. JavaScript is a high-level programming language. Both front-end and back-end development can be conducted with JavaScript. Vue provides higher customizability and hence is easier to learn than Angular or React. Further, Vue has an overlap with Angular and React with respect to their functionality like the use of components.

Angular vs. React: Rendering an Array

How Angular and React differ in rendering an Array. A comparison of methods rendering an Array. We often need to render an array in the UI. Angular does this by using *ngFor — an HTML construct. React does this by using map() — a JS method. That's about it for rendering arrays in Angular and React.

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.