Comparing a JavaScript for Loop With a Workflows for Each Card
Tags: nocode, workflows, javascript, automation
Published: 2022-09-12 18:50:39

---
title: Comparing a JavaScript for Loop With a Workflows for Each Card
published: true
date: 2022-09-12 04:41:41 UTC
tags: NoCode,Workflows,JavaScript, Automation
canonical_url: https://maxkatz.net/2022/08/24/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](https://www.linkedin.com/in/bbarrows89/) for inspiring to write this blog. Bryan shared this image in our internal Slack to help a customer:

[![JavaScript for for-loop](https://katzmax.files.wordpress.com/2022/08/workflows_js_loop.png?w=803)](https://katzmax.files.wordpress.com/2022/08/workflows_js_loop.png)
<figcaption>JavaScript for for-loop</figcaption>

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](https://jsbin.com/yikuxihulu/edit?js,console) at JS Bin:

[![http://jsbin.com](https://katzmax.files.wordpress.com/2022/08/workflows_jsbin_console.png?w=1024)](https://katzmax.files.wordpress.com/2022/08/workflows_jsbin_console.png)
<figcaption>http://jsbin.com</figcaption>

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](https://katzmax.files.wordpress.com/2022/08/workflows_js_code_main_flow.png?w=910)](https://katzmax.files.wordpress.com/2022/08/workflows_js_code_main_flow.png)
<figcaption>A list is passed to for each</figcaption>

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](https://katzmax.files.wordpress.com/2022/08/workflows_js_code_helper_flow.png?w=1024)](https://katzmax.files.wordpress.com/2022/08/workflows_js_code_helper_flow.png)
<figcaption>A helper flow that does to upper case for each list item</figcaption>

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](https://katzmax.files.wordpress.com/2022/08/workflows_js_code_running.png?w=1024)](https://katzmax.files.wordpress.com/2022/08/workflows_js_code_running.png)
<figcaption>Running a flow</figcaption>

And this is how it looks all together:

[![Code-based (JavaScript) and Workflows solutions](https://katzmax.files.wordpress.com/2022/08/workflows_js_code_overview2.png?w=1024)](https://katzmax.files.wordpress.com/2022/08/workflows_js_code_overview2.png)
<figcaption>Code-based (JavaScript) and Workflows solutions</figcaption>

Hope this was a fun comparison and thanks again to [Bryan](https://www.linkedin.com/in/bbarrows89/).

![🔁](https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/twemoji/2/72x72/1f501.png) 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)](https://dev.to/maxkatz/how-to-setup-a-workflows-helper-flow-with-for-each-and-streaming-cards-3ej0-temp-slug-5117598).

* * *

**More resources to help you learn** :

📺 Short how-to [Workflows videos](https://youtube.com/playlist?list=PLIid085fSVdvyK8F4xuk49EchBPmAVNHG) to help you become a better automation builder.

🍭 A collection of helpful [Workflows tips](https://maxkatz.net/okta-workflows-tips/).