Example of the _.chunk array method in lodash

So I think I will write a few posts on lodash, and as such why not start with the _.chunk array method. The lodash chunk method is a method in lodash that can break a linear array into an array of arrays.

So how often do I get into a situation in which I need to break down a linear array into an array of arrays? Maybe not to often but often enough that it would be nice to have a method that is part of a toolkit of sorts that makes quick work of it. In this case the lodash chunk method in is just that. There is also the question of flattening an array of arrays into a single array, for that there is the lodash flatten method.

1 - What to know before hand.

This is a post on the _.chunk method in lodash which is one of the many lodash array methods that are intended to be used with arrays only rather than any collection or object in general. If you are new to javaScript and lodash this might not be a good starting point for you, as I assume that you have at least got you feet wet with javaScript before hand .

2 - The basic idea of _.chunk

So the _.chunk method will break down an array into an array of arrays of a given size for each child array. The first argument given to the lodash chunk method should be the array that is to be broken down, and the second argument is the number of elements per chunk or child array within the resulting array that is returned.

So a basic example of the lodash chunk method might be like this:

1
2
3
4
5
6
7
var _ = require('lodash'),
// basic example
arr = ['one', 'two', 'three', 'four', 'five', 'six'];
console.log(_.chunk(arr, 2));
// [ [ 'one', 'two' ], [ 'three', 'four' ], [ 'five', 'six' ] ]

It breaks a single dimensional array into a multidimensional array and that is more or less the basic idea of the chunk method.

3 - Matrix use example of _.chunk, and _.chunks friend _.zip

One example that comes to mind is a situation in which you have some pixel data stored in a linear array, and I want it organized in a 2d matrix. Say some kind of image data format in which an array of color values, a color pallet, and image width are stored in an object.

In this example I can use _.chunk to break the linear array down into a 2d matrix, or grid if you prefer. Once I have that done I can use _.zip to rotate the matrix if I want to.

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
33
34
35
36
37
38
39
40
41
42
43
44
// matrix data example
data = {
w : 10,
colors : ['grey', 'blue','red'],
px : [
1,1,1,1,2,2,2,2,2,2,
1,0,0,1,0,0,0,0,0,0,
1,1,1,1,2,2,2,2,2,2,
0,0,0,0,0,0,0,0,0,0,
2,2,2,2,2,2,2,2,2,2],
// my toMatrix method using _.chunk
toMatrix : function(){
return _.chunk(this.px,this.w);
},
// rotation thanks to zip
rotated : function(){
// _.zip is useful for doing this
return _.zip.apply(0, this.toMatrix());
}
};
// draw it out like this
var html = '';
data.rotated().forEach(function (line) {
line.forEach(function (px) {
html += '<span style=\"color: '+data.colors[px]+';\">X<\/span>';
});
html += '<br>';
});
console.log(html);

XXXXX
XXXXX
XXXXX
XXXXX
XXXXX
XXXXX
XXXXX
XXXXX
XXXXX
XXXXX

4 - Conclusion

So yes this method will sure come in handy when working on a project, I can see why people like lodash. Be sure to check out my other posts on lodash, I also have my main post on lodash in general as well.

Happy coding.