How to write more clear `for` loops in JavaScript and why it's important?

Introduction

What are we saying to yet another article with the best JavaScript experience? Of cause, "why not, give two please"! And adding it to browser's bookmarks... 😉

But jokes aside. Today, I would like to talk about a serious topic.

As if there are "not serious" topics in modern JavaScript, yeah.

Why do we use for loops in our code?

Yes, I know "we iterate over all elements of the array and do something", but what exactly? Here is my list:

1. Filter array (by some value);
2. Get a new modified array;
3. Check, if each element of the array matches the condition;
4. Perform some action with element;
5. Check, if an element is contained in an array;
6. Find the value of accumulating the values of the array elements;
7. And many more...

Too huge list for one small for function, don't you think so? But "what else can we use?", you will ask me and my answer is...

Higher-order functions!

Using higher-order functions makes your JavaScript code:

• More clear & readable;
• Easier to debug;

And it's important, because your personal DX (developer experience) it's your productivity!

Hmm... What? 🤔

In mathematics and computer science, a higher-order function is a function that does at least one of the following:

1. Takes one or more functions as arguments (i.e. procedural parameters);
2. Returns a function as its result;

Simple example:

const twice = (f, v) => f(f(v));
const add3 = v => v + 3;

twice(add3, 7); // 13

See more about higher-order functions on Wiki page.

Examples and compare

Let's go in the same order. We will consider an example using for and a modern approach.

filter()

Classic for code:

// Define arrays
var array = [1, 2, 3, 4, 5];
var new_array = [];

// Odd function
function Odd(num) {
  return num % 2;
}

// For loop
for (var i = 0, total = array.length; i < total; i++) {
  var num = array[i];
  if (Odd(num)) new_array.push(num);
}

// Result: [ 1, 3, 5 ]

Similar, with filter() function:

// Define array
let array = [1, 2, 3, 4, 5];

// Odd function
let odd = array.filter(num => num % 2);

// Result: [ 1, 3, 5 ]

map()

Classic for code:

// Define arrays
var array = ["John", "Alisa", "Bill", "Jane"];
var new_array = [];

// For loop
for (var i = 0, total = array.length; i < total; i++) {
  new_array[i] = array[i].toUpperCase();
}

// Result: [ "JOHN", "ALISA", "BILL", "JANE" ]

Similar, with map() function:

// Define array
let array = ["John", "Alisa", "Bill", "Jane"];

// upperCase function
let upperCase = array.map(name => name.toUpperCase());

// Result: [ "JOHN", "ALISA", "BILL", "JANE" ]

Please note: if you use map, then you cannot makebreak, continue orreturn during the iterative process. But if necessary, such cases usually come down to the use of the every orsome methods.

every()

Classic for code:

// Define arrays
var array = [1, 2, 3, 4, 5, 0];

// For loop
for (var i = 0, total = array.length; i < total; i++) {
  if (array[i] === 0) console.log("zero present in array");
}

Similar, with every() function:

// Define array
let array = [1, 2, 3, 4, 5, 0];

// isZero function
let isZero = array.every(num => num > 0);

// Print result
if (!isZero) console.log("zero present in array");

forEach()

Classic for code:

// Define arrays
var array = ["DEV", "Community", "dev.to"];

// Print function
function Print(word) {
  console.log(word);
}

// For loop
for (var i = 0, total = array.length; i < total; i++) {
  Print(array[i]);
}

// Result: DEV Community dev.to

Similar, with forEach() function:

// Define array
let array = ["DEV", "Community", "dev.to"];

// Print words
array.forEach(word => console.log(word));

// Result: DEV Community dev.to

some()

Classic for code:

// Define arrays
var array = ["we", "love", "dev.to"];

for (var i = 0, total = array.length; i < total; i++) {
  if (array[i] === "love") {
    console.log("found love");
    return;
  }
}

Similar, with some() function:

// Define array
let array = ["we", "love", "dev.to"];

// isLove function
let isLove = array.some(word => word === "love");

// Print result
if (isLove) console.log("found love");

reduce()

Classic for code:

// Define arrays
var array = [1, 2, 3, 4, 5];

// Initial result
var result = 0;

// For loop
for (var i = 0, total = array.length; i < total; i++) {
  result = result + array[i];
}

// Result: 15

Similar, with reduce() function:

// Define array
let array = [1, 2, 3, 4, 5];

// Print result
let result = numbers.reduce((acc, val) => acc + val, 0);

// Result: 15

Hope, it helps you to write clear and readable code now!

Photo by

[Title] Marvin Meyer https://unsplash.com/photos/SYTO3xs06fU
[1] Headway https://unsplash.com/photos/5QgIuuBxKwM

P.S.

If you want more articles (like this) on this blog, then post a comment below and subscribe to me. Thanks! 😻

❗️ You can support me on Boosty, both on a permanent and on a one-time basis. All proceeds from this way will go to support my OSS projects and will energize me to create new products and articles for the community.

And of course, you can help me make developers' lives even better! Just connect to one of my projects as a contributor. It's easy!

My main projects that need your help (and stars) 👇

• 🔥 gowebly: A next-generation CLI tool that makes it easy to create amazing web applications with Go on the backend, using htmx, hyperscript or Alpine.js and the most popular CSS frameworks on the frontend.
• ✨ create-go-app: Create a new production-ready project with Go backend, frontend and deploy automation by running one CLI command.

Other my small projects: yatr, gosl, json2csv, csv2api.