Underscore.js | _.zip() with Examples

The Underscore.js is a JavaScript library that provides a lot of useful functions like the map, filter, invoke etc even without using any built-in objects.
The _.zip() function matches each passed array of elements to the next passed array element. It is used when more than one homogeneous arrays (one type of elements like only numbers, works, special characters etc) to connect all the array by matching each element to it’s corresponding element in the next array. It can have a number of arrays as it’s parameters. The result will contain the same number of arrays as the number of elements in the largest array.

Syntax:

_.zip( *arrays )

Parameters: This function accepts single parameter arrays which contains array elements.

Return value: It returns the resultant arrays.

Passing homogeneous arrays to _.zip() function: The ._zip() function accepts the element from the first array and makes the first elements of the resultant array. Then, it takes the elements from the second array and map it as the second property of that first element. This is done till all the array’s first elements are covered. Then it forms the second elements of the resultant array. It runs until all the elements are covered.



Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <script src
        </script>
    </head>
    <body>
        <script type="text/javascript">
            console.log(_.zip(['Akash', 'Amit', 'Aviral'], 
                              [01, 02, 03], 
                              ['pass', 'pass', 'fail'])
            );
        </script>
    </body>
</html>                    

chevron_right


Output:

Passing a heterogeneous array to the _.size() function: Pass a heterogeneous array, i.e., which contains all kinds of elements in a single array. The _.zip() function will work the same way. The procedure is the same but the output will be different. It will now form homogeneous arrays in the result.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <script src
        </script>
    </head>
    <body>
        <script type="text/javascript">
            console.log(_.zip(['Akash', 02, 'pass'], 
                              ['Amit', 02, 'pass'], 
                              ['Aviral', 03, 'fail'])
            );
        </script>
    </body>
</html>                    

chevron_right


Output:

Mapping different kind of elements in _.zip() function: Passing the different kind of elements to the _.zip function. This time the process will be same but the result will not be homogeneous array rather it will be a heterogeneous array.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <script src
        </script>
    </head>
    <body>
        <script type="text/javascript">
            console.log(_.zip(['Akash', 01, 5999], 
                              ['*', 02, 'pass'], 
                              ['!', '@', 3222])
            );
        </script>
    </body>
</html>                    

chevron_right


Output:

Passing unequal size of arrays to the _.zip() function: Passing unequal size of arrays but this will cause undefined values in the resultant arrays. This is because the number of elements whom will find their matches in the rest of the arrays will be considered as a single array but if they do not found any match then they will have ‘undefined’ in place. But this will work smoothly and not give any error.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <script src
        </script>
    </head>
    <body>
        <script type="text/javascript">
            console.log(_.zip(['Akash', 01, 5999],
                              ['*', 02, 'pass'],
                              ['!', '@', 3222],
                              ['?', '>', '<', ';'])
            );
        </script>
    </body>
</html>                    

chevron_right


Output:

Note: These commands will not work in Google console or in Firefox as for these additional files need to be added which they didn’t have added. So, add the given links to your HTML file and then run them.

filter_none

edit
close

play_arrow

link
brightness_4
code

<script type="text/javascript" src
</script

chevron_right




My Personal Notes arrow_drop_up

I like to do coding in C++C and java programming languages HTML and CSS always intersts me Sharing knowleged is the best way according to me to increase ones knwoledge

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.