The lodash _.concat method

In this lodash post I will be writing about _.concat, and of course the corresponding vanilla js method Array.concat. For the most part this looks like one of those methods in lodash where there is not much point to it as the Array.concat method has been around for a long time. Still it is there just for the hell of it, and looking into the lodash source code, it looks like the lodash devs are not just directly referencing the native method, as is the case with some of these methods.

Although this is a lodash post on _.concat, this is also a kind of post of concatenating arrays in general. Also although there might not be much of a point using _.concat by itself in light of the vanilla js Array.concat, diving deep into the source code _.concat uses some internal methods that are shared with related methods like _.flattenDeep.

1 - what to know

This is a post on the lodash method _.concat that can be used to combine, or concatenate two or more arrays into one array. There is also the Array.concat method in javaScript itself that works the same way. I assume that you have some basic working knowledge of javaScript in general, and how to get started with using lodash in a project.

2 - Basic examples of array concatenation using lodash, and plain javaScript

For a basic example of concat what is more basic then just some arrays of primitives right? In this section basic example of array concatenation will be covered using lodash _.concat, and Array.concat.

2.1 - Basic example using _.concat

So the _.concat method works by just calling the method, and then giving the arrays, and elements to combine into an array.

1
2
3
4
5
6
7
let start = [1, 2, 3],
mid = [4, 5, 6],
end = [7, 8, 9];
let full = _.concat(start, mid, end);
console.log(full); // [1,2,3,4,5,6,7,8,9]

This can be any mixture of arrays or values. primitives like always will be copy’s, however objects, will of course be references so be careful about that. However for the most part that is all there is to it, and this is often preferable to a more complex alternative that involves creating a new array, and looping.

2.2 - Basic example using Array.concat

The vanilla js method Array.concat works in a very similar fashion, the only note worth difference would appear to be that is a prototype method of Array rather that a stand alone method that is given arguments like with _.concat.

1
2
3
4
5
6
7
8
9
10
11
12
13
let start = [1, 2, 3],
mid = [4, 5, 6],
end = [7, 8, 9];
// from an empty array
let full = [].concat(start, mid, end);
console.log(full); // [1,2,3,4,5,6,7,8,9]
// or an existing one
console.log( ['a','b','c'].concat(['d','e','f']) ); // [ 'a', 'b', 'c', 'd', 'e', 'f' ]
// with call
console.log(Array.prototype.concat.call( ['a','b'],['c','d'] )); [ 'a', 'b', 'c', 'd' ];

4 - Be aware of references

So when concatenating arrays it is important to rememberer that objects are copied by reference in javaScript. If this is a problem you will want to use something like _.cloneDeep to see that the objects are full new separate objects by themselves, and are not just being referenced.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
let _ = require('lodash');
// some objects
let objs = [{x:1,y:5}, {x:7,y:10}];
// concatenating with another object
let points = _.concat(objs, {x:0,y:0});
// works as exspected
console.log(points); // [ { x: 1, y: 5 }, { x: 7, y: 10 }, { x: 0, y: 1 } ]
// but what if the primitives in the referenced
// objects change?
_.each(objs, function(pt){
pt.x = 0;
pt.y = 0;
});
// this is what
console.log(points); // [ { x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 } ]