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

Happy coding.