Kodeclik Blog
You will sometimes have two arrays in Javascript and have a need to extract corresponding elements from these arrays and group them. Python has a function called zip() for this purpose. We will show you how to create a comparable looping functionality in Javascript here!
We will embed our Javascript code inside a HTML page like so:
In the above HTML page you see the basic elements of the page like the head element containing the title (“Looping through two arrays in Javascript”) and a body with an empty script tag. The Javascript code goes inside these tags.
Let us assume we are given two arrays like so:
The two arrays contain company names and their ticker symbols (respectively). We wish to loop over them and print output such as:
Here’s a first attempt at doing it through nested loops.
The output will be:
Oops! This is running a nested for loop with each element of the first array paired with each element of the second array. This is obviously not what is intended.
Because we are looking for corresponding elements it suffices to loop through one array using the forEach method but using two arguments (the element as well as the index). The forEach method applied to array1 can be used to return both the element and the index of the element. We use the returned index value to index into the second array and find the corresponding element. Then we use both these pieces of information to print the composite message. Here is the program to do so:
The output of the program is, as expected:
The second approach we will explore uses the map() method that works on Javascript arrays. map() goes through the array, element by element, and applies a given function on each element systematically. This is precisely what we will do here. Consider the code here:
Here the function being applied has two arguments (only the first argument is required). The first argument is company which is the element that we are iterating over in the array. The second argument is the index of the corresponding element. Thus, for each element in array1, we print the company followed by the ticker symbol. The output is, as before:
A final approach we can use involves the collect.js Javascript library which is a very handy way to work with arrays and other data structures. However this library does not work out of the box in a browser environment and you have to use it in an elaborate tech stack like Node.js. collect.js has a zip() method very similar to Python’s zip function that will serve your needs. We will cover it in detail in a future blogpost.
Which of the three approaches above is your favorite?
Interested in learning more Javascript? Learn about the Javascript array reduce method!
Want to learn Javascript with us? Sign up for 1:1 or small group classes.
