Comparing a JavaScript For Loop With a Workflows For Each Card

Update August 25:

Gabriel Sroka from MacAdmins Slack community told me this is a more elegant way to write a for loop in JavaScript today and I agree:

const groceries = ['bread', 'cheese', 'milk', 'eggs', 'apples', 'butter'];

for (const item of groceries) {
  console.log(item.toUpperCase()); 
}

Gabriel also shared a Python version:

groceries = ['bread', 'cheese', 'milk', 'eggs', 'apples', 'butter']

for item in groceries:
    print(item.upper())

Original:

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:

JavaScript for loop

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:

http://jsbin.com

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

A list is passed to for each

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:

A helper flow that does to upper case for each list item

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:

Running a flow

And this is how it looks all together:

Code-based (JavaScript) and Workflows solutions

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.

Published by

One response to “Comparing a JavaScript For Loop With a Workflows For Each Card”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.