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 _.chunk.

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 _.chunk method in is just that.

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 can be used with arrays 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.

2 - The basic idea of _.chunk

So the _.chunk method will break down an array into groups of a given size 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' ] ]

Now my array is an array of arrays, which comes in handy now and then.

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.