javascriptroom blog

Unraveling Underscore.js `_.unzip()` Function

Underscore.js is a popular JavaScript utility library that provides a wide range of useful functions for working with arrays, objects, and more. One such function is _.unzip(). In this blog post, we'll explore what the _.unzip() function does, how it works, and when you might want to use it.

2026-06

Table of Content#

What is _.unzip()?#

The _.unzip() function in Underscore.js is used to "unzip" an array of arrays. It takes an array where each element is itself an array (a multi-dimensional array) and returns a new array of arrays. The returned arrays are formed by taking the corresponding elements from each of the inner arrays in the input.

In simple terms, if you have an array like [[1, 2], [3, 4], [5, 6]], _.unzip() will transform it into [[1, 3, 5], [2, 4, 6]].

How Does _.unzip() Work?#

The function iterates over the inner arrays (the sub-arrays) of the input array. For each position in the inner arrays (e.g., index 0, index 1, etc.), it collects the elements from that position across all the inner arrays and creates a new array for that position.

Let's break it down with a more technical view. Suppose we have an input array arr = [[a1, b1], [a2, b2], [a3, b3]]. The _.unzip() function will:

  1. Create an empty array of arrays (let's call it result).
  2. Determine the maximum length of the inner arrays (let's say maxLength).
  3. For each index i from 0 to maxLength - 1:
    • Create a new empty array (let's call it temp).
    • Iterate over each inner array subArr in arr:
      • If subArr[i] exists (i.e., the inner array has an element at index i), push it to temp.
    • Push temp to result.

So, in the end, result will be [[a1, a2, a3], [b1, b2, b3]] (assuming all inner arrays have at least two elements).

Example Usage#

Basic Example#

const _ = require('underscore');
 
const inputArray = [[1, 'a'], [2, 'b'], [3, 'c']];
const result = _.unzip(inputArray);
 
console.log(result); 
// Output: [[1, 2, 3], ['a', 'b', 'c']]

In this example, we have an array of arrays where each inner array has a number and a string. _.unzip() separates them into two separate arrays.

With Uneven Inner Arrays#

const _ = require('underscore');
 
const inputArray = [[1, 'a', true], [2, 'b'], [3]];
const result = _.unzip(inputArray);
 
console.log(result); 
// Output: [[1, 2, 3], ['a', 'b', undefined], [true, undefined, undefined]]

Here, the inner arrays have different lengths. _.unzip() still works, and for positions where an inner array doesn't have an element (like index 1 and 2 in the second and third inner arrays respectively), it will put undefined in the corresponding position of the result arrays.

Common Practices#

  • Data Transformation: When you receive data in a "zipped" format (e.g., from an API that returns an array of arrays where each sub-array represents related data fields) and you want to separate the fields into individual arrays for further processing (like mapping, filtering, etc.), _.unzip() is very handy.
  • Matrix-like Operations: If you think of the input array as a matrix (rows as inner arrays and columns as the elements in those arrays), _.unzip() effectively transposes the matrix (swaps rows and columns in a sense, although it's not a true matrix transpose in the mathematical sense for non-square "matrices").

Best Practices#

  • Error Handling: While _.unzip() is generally forgiving with uneven inner arrays (as shown in the example above), if you know your data should have consistent inner array lengths (e.g., for a well-defined data structure), it's a good idea to add some validation before using _.unzip(). You can check the lengths of the inner arrays and throw an appropriate error if they are inconsistent.
  • Understand the Data Structure: Make sure you clearly understand the structure of the input array. If the input is not an array of arrays (e.g., it's an array of other data types), _.unzip() will not work as expected. So, always validate the input data type if possible.

References#

By understanding the _.unzip() function in Underscore.js, you can efficiently handle and transform data that comes in a multi-dimensional array format, making your JavaScript code more modular and easier to work with for various data processing tasks.