What Are The Use Cases of Lodash Chunk method?

Chunk is a method of Lodash that splits the array into evenly sized arrays and returns them in a single array. If the array is indivisible evenly, the final chunk has the left over elements. It takes the size of the grouping in argument (the default size is 1).

This post lists down three possible use cases of chunk.

1. Grouping

In tasks where grouping is required, chunk method is highly useful. If random shuffling is required too, we can apply shuffle method to the array before splitting. For example, given the ids of students, we need to group them in even numbers for a class assignment. The grouping should be random. This can be done the following way:

const _ = require('lodash');

const studentIDs = [1, 2, 3, 4, 5, 6, 7, 8,
  9, 10, 11, 12, 13, 14, 15, 16,
  17, 18, 19, 20, 21, 22, 23, 24,
  25, 26, 27, 28, 29, 30, 31, 32];

console.log(_.chunk(_.shuffle(studentIDs), 3)); // shuffle and split them into a group of 3

It will generate random groups of student ids, each with 3 elements, except for the last, which has 2:

[
  [ 23, 28, 19 ], [ 1, 24, 32 ],
  [ 13, 21, 10 ], [ 27, 6, 11 ],
  [ 2, 14, 29 ],  [ 25, 5, 3 ],
  [ 17, 12, 26 ], [ 7, 9, 15 ],
  [ 31, 4, 8 ],   [ 18, 16, 30 ],
  [ 22, 20 ]
]

2. Frontend Pagination

On front end applications, sliders are required for showing pictures and cards. Usually, the items are fetched from an API in one call, but shown in a group of 3s or 4s, and scrolled right and left on chevron click. The splitting into pages can also be achieved with chunk:

const _ = require('lodash');

const dashboardImages = [
  {
    id: 1,
    image_url: "https://i.picsum.photos/id/16/200/300.jpg?hmac=k64O1qCMBhaU0Ep_qML5_xDxqLVR1MhNm8VMqgdAsxA"
  },
  {
    id: 2,
    image_url: "https://i.picsum.photos/id/1045/200/300.jpg?hmac=Y71-83LHDOPyoD5nAk5iDk1IJKvlnjBznGezsMIZyJ8"
  },
  {
    id: 3,
    image_url: "https://i.picsum.photos/id/891/200/300.jpg?hmac=lIgvXCbqdV9jucIDyPg0xpJl0QcTJTVuI9oo25NZqBM"
  },
  {
    id: 4,
    image_url: "https://i.picsum.photos/id/34/200/300.jpg?hmac=K076uH4zC5xneqvhRayjS90G00xjPsR7eL_ShGEr6rs"
  },
  {
    id: 5,
    image_url: "https://i.picsum.photos/id/161/200/300.jpg?hmac=-nq4AHxOS9Wa6ljn39CmzpqO9vtccMNfDPUOsijD5Wk"
  },
  {
    id: 6,
    image_url: "https://i.picsum.photos/id/555/200/300.jpg?hmac=HbW_j1WvVDr5eTwXP2bsohZEiyBe-G6fsPkgAxJe9ps"
  },
  {
    id: 7,
    image_url: "https://i.picsum.photos/id/555/200/300.jpg?hmac=HbW_j1WvVDr5eTwXP2bsohZEiyBe-G6fsPkgAxJe9ps"
  },
  {
    id: 8,
    image_url: "https://i.picsum.photos/id/500/200/300.jpg?hmac=RZ1lWx9cRF6wDuYKRS4PAb721Vriq5q5iBxlTaQujQw"
  },
  {
    id: 9,
    image_url: "https://i.picsum.photos/id/500/200/300.jpg?hmac=RZ1lWx9cRF6wDuYKRS4PAb721Vriq5q5iBxlTaQujQw"
  },
  {
    id: 10,
    image_url: "https://i.picsum.photos/id/675/200/300.jpg?hmac=c2gHO4_1hIFBRijtOhz09icBTxsdGCsMSYSs2XIDdAk"
  },
  {
    id: 11,
    image_url: "https://i.picsum.photos/id/434/200/300.jpg?hmac=OXYWBdR0QE1mGM2dKi1dktPcY5GckI3ClAgMsyszU-I"
  },
  {
    id: 12,
    image_url: "https://i.picsum.photos/id/424/200/300.jpg?hmac=a4CGJuyUdC8BtgYThU_2NNVvoISxWF7-hr5ScnjmjRU"
  },
];


const pages = _.chunk(dashboardImages, 3);

console.log(pages);

pages array now has 4 elements, each an array of 4. We can now implement a slider logic and move between these pages on right or left cheveron click. The grouped arrays within pages look like this:

[
  [
    {
      id: 1,
      image_url: 'https://i.picsum.photos/id/16/200/300.jpg?hmac=k64O1qCMBhaU0Ep_qML5_xDxqLVR1MhNm8VMqgdAsxA'
    },
    {
      id: 2,
      image_url: 'https://i.picsum.photos/id/1045/200/300.jpg?hmac=Y71-83LHDOPyoD5nAk5iDk1IJKvlnjBznGezsMIZyJ8'
    },
    {
      id: 3,
      image_url: 'https://i.picsum.photos/id/891/200/300.jpg?hmac=lIgvXCbqdV9jucIDyPg0xpJl0QcTJTVuI9oo25NZqBM'
    }
  ],
  [
    {
      id: 4,
      image_url: 'https://i.picsum.photos/id/34/200/300.jpg?hmac=K076uH4zC5xneqvhRayjS90G00xjPsR7eL_ShGEr6rs'
    },
    {
      id: 5,
      image_url: 'https://i.picsum.photos/id/161/200/300.jpg?hmac=-nq4AHxOS9Wa6ljn39CmzpqO9vtccMNfDPUOsijD5Wk'
    },
    {
      id: 6,
      image_url: 'https://i.picsum.photos/id/555/200/300.jpg?hmac=HbW_j1WvVDr5eTwXP2bsohZEiyBe-G6fsPkgAxJe9ps'
    }
  ],
  [
    {
      id: 7,
      image_url: 'https://i.picsum.photos/id/555/200/300.jpg?hmac=HbW_j1WvVDr5eTwXP2bsohZEiyBe-G6fsPkgAxJe9ps'
    },
    {
      id: 8,
      image_url: 'https://i.picsum.photos/id/500/200/300.jpg?hmac=RZ1lWx9cRF6wDuYKRS4PAb721Vriq5q5iBxlTaQujQw'
    },
    {
      id: 9,
      image_url: 'https://i.picsum.photos/id/500/200/300.jpg?hmac=RZ1lWx9cRF6wDuYKRS4PAb721Vriq5q5iBxlTaQujQw'
    }
  ],
  [
    {
      id: 10,
      image_url: 'https://i.picsum.photos/id/675/200/300.jpg?hmac=c2gHO4_1hIFBRijtOhz09icBTxsdGCsMSYSs2XIDdAk'
    },
    {
      id: 11,
      image_url: 'https://i.picsum.photos/id/434/200/300.jpg?hmac=OXYWBdR0QE1mGM2dKi1dktPcY5GckI3ClAgMsyszU-I'
    },
    {
      id: 12,
      image_url: 'https://i.picsum.photos/id/424/200/300.jpg?hmac=a4CGJuyUdC8BtgYThU_2NNVvoISxWF7-hr5ScnjmjRU'
    }
  ]
]

3. Algorithms

Algorithms that require splitting and grouping of arrays, such as merge sort, can make use of chunk.

const _ = require('lodash');

const mergeSort = (arr) => {
  if (arr.length > 1) {
    const [a, b] = _.chunk(arr, arr.length / 2); // split the arr into 2 even arrays
    const leftArr = mergeSort(a);
    const rightArr = mergeSort(b);
    // ...rest of the merging code
  }

  return arr;
}

mergeSort(anArray)

javascript lodash

1. Grouping

2. Frontend Pagination

3. Algorithms

See also