Web development and Tech news Blog site. WEBISFREE.com

HOME > lodash

[lodash] Understanding chunk

Last Modified : 24 Feb, 2023 / Created : 24 Feb, 2023
View Count
Let's take a look at the _.chunk() method, which is one of the array methods in lodash.

# lodash chunk method

First, let's look at the literal meaning of chunk, which is defined as follows:

chunk  (noun) A thick, solid piece; a large amount

From this definition, we can roughly understand that chunk() creates a large chunk or lump. When we use chunk() on an array, it creates subsets of the array that have a specific length as separate arrays. For example, we can transform an array like the one below into a two-dimensional array:

Before )
[ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

After )
[ [1, 2, 3], [4, 5, 6], [7, 8, 9] ]

Arrays in the form of nested arrays like this are a useful form of data. Finally, the syntax for _.chunk() is as follows:

_.chunk(Array, Chunk size)

// Array : The array on which chunk will be applied
// Chunk size<Number>: chunk size <Number>: The size at which the array will be grouped into chunks

The size represents the size of each chunk, and the array is transformed into a collection of arrays, each of which has the size of the chunk. Now, let's briefly create a few examples below.

! lodash _.chunk() examples

Here, we will create a two-dimensional array with myItems, an array variable that has values of different sizes. Please see the following code.
let myItems = [1, 2, 3, 4, 5, 6, 7, 8, 9]

_.chunk(myItems, 3)
_.chunk(myItems, 5)

When we run the above code, we get the following results respectively. First, the result of _.chunk(myItems) is shown below.

[1, 2, 3, 4, 5, 6, 7, 8, 9]

As we can see, it returns results with a size of one each. In other words, it returns the same result as _.chunk(myitems, 1).

Next, the result of _.chunk(myItems, 3) is shown below. It is transformed into a two-dimensional array with three values each.
_.chunk(myItems, 3)

[ [1, 2, 3], [4, 5, 6], [7, 8, 9] ]

Lastly, the result of _.chunk(myItems, 5) is shown below.
_.chunk(myItems, 5)

[ [1, 2, 3, 4, 5], [6, 7, 8, 9] ]

Since all items have nine elements, it is transformed into a two-dimensional array with five and four elements each.

The above example is a very simple form of example. So what are some real-world examples that can be used? Let's say we have a class of 21 students and want to divide them into groups of 5 for a sports competition. If we need to divide each student into a group, we can use chunk(). Let's write the code for this example.

Creating an example of dividing a class of 21 students into groups of 5
First, let's write the code. Since the class size is 21, let's first create an array that has values from 1 to 21, and declare it as members.
const members = new Array(21).fill().map((i, index) => index + 1)
(There are several ways to create an array with n values. The above method is one of them.)

Now let's use _.chunk() on the members array to create several arrays with n values. Each array represents a group.
const fiveMembers = _.chunk(members, 5)

When you run the above code, it will appear as follows:
console.log(fiveMembers )

// Output result
  [1, 2, 3, 4, 5],
  [6, 7, 8, 9, 10],
  [11, 12, 13, 14, 15],
  [16, 17, 18, 19, 20],

As you can see from the result, an array of 21 values has been grouped into 5 groups, creating a two-dimensional array!

The entire code looks like this:
const members = new Array(21).fill().map((i, index) => index + 1)
const fiveMembers = _.chunk(members, 5)

console.log(fiveMembers )

! In conclusion

We've learned about the _.chunk() method. Simply put, _.chunk() can transform an array's values into a two-dimensional array. What can we do with this? Before that, can we transform an object into a two-dimensional array? With Object.entries(), it's easy to do so. The values that have been transformed from an object to an array can be transformed back into an object with Object.fromEntries(). Ultimately, this means that we can use two-dimensional arrays to transform objects as well. With this type of conversion between arrays and objects, it's possible to more easily manipulate and change data. It's very convenient when we need to extract or retrieve specific data from collection values.

Perhaps you're looking for the following text as well?


    [lodash] Understanding the compact() Method


    Understanding lodash's omitBy() function