Comparing a JavaScript for Loop With a Workflows for Each Card

This blog post compares a code-based (JavaScript) for loop with a no-code Workflows For Each card.

I thought it would be a fun blog post to write.

Thanks to Bryan Barrows for inspiring to write this blog. Bryan shared this image in our internal Slack to help a customer:

Ok, so let’s start with a code-based for loop. The JavaScript code snippet below creates a list (array) of strings. Then a for loop iterates over the list and upper cases each item in the list.

// create a list (array) of strings
var groceries = ['Bread', 'Cheese', 'Milk', 'Eggs', 'Apples', 'Butter'];

// loop over the list and upper case each string
for (i=0; i<groceries.length; i++){
  console.log(groceries[i].toUpperCase()); 
}

Output running this code:

"BREAD"
"CHEESE"
"MILK"
"EGGS"
"APPLES"
"BUTTER"

You can view and run this code at JS Bin:

Ok, now let’s look at the Workflows solution.

This is the main flow. It creates a list with List – Construct card. Then it passes the list to List – For Each card (that’s the for loop).

So the above flow is this code:

// create a list (array) of strings
var groceries = ['Bread', 'Cheese', 'Milk', 'Eggs', 'Apples', 'Butter'];

// loop over the list and upper case each string
for (i=0; i<groceries.length; i++){

}

And this is helper flow. This flow does upper case to each item in the list:

And this flow is this code:

console.log(groceries[i].toUpperCase()); 

When you run this flow the helper flow is called six times and the result is each text item is converted with to upper case:

And this is how it looks all together:

Hope this was a fun comparison and thanks again to Bryan.

If you want to learn more about setting up a helper flow with for each card and streaming, read How to Setup a Workflows Helper Flow (With For-Each and Streaming Cards).

More resources to help you learn :

📺 Short how-to Workflows videos to help you become a better automation builder.

🍭 A collection of helpful Workflows tips.