Categories

# Some Useful Array Lodash Functions

Lodash is a utility library that has lots of methods for manipulating objects. It has stuff that we use all the time and also things that we don’t use frequently or don’t think of using.

In this article, we’ll look at some array methods from Lodash, including the `chunk` , `compact`, `concat` , `difference` , `differenceBy` , and `differenceWith` methods.

# chunk

The `chunk` method lets us separate array entries into arrays with the given size and returns it. If the entries can’t be split evenly, then the final chunk will be the remaining elements.

It’s 2 arguments, which is the array to split and the chunk size of each entry of the split array.

For example, we can use it as follows:

``````import * as _ from "lodash";
const array = [1, 2, 3, 4, 5, 6, 7];
const result = _.chunk(array, 2);
``````

Then we get:

``````[
[
1,
2
],
[
3,
4
],
[
5,
6
],
[
7
]
]
``````

assgined to `result` .

# `compact`

The `compact` method creates an array with all the falsy values removed and returns it. Values `false`, `null`, `0`, `""`, `undefined`, and `NaN` are falsy.

It takes one argument, which is the array to have those values removed.

For example, we can use it as follows:

``````import * as _ from "lodash";
const array = [0, 1, 2, 3, null, false, undefined];
const result = _.compact(array);
``````

Then we get:

``````[
1,
2,
3
]
``````

assigned to `result` .

# `concat`

The `concat` method creates a new array with the additional values added and returns it. It takes 2 or more arguments. The first is the array to add values to, and the rest are values that we want to add to the array.

We can use it as follows:

``````import * as _ from "lodash";
const array = [1, 2, 3];
const result = _.concat(array, 2, , []);
``````

Then we get:

``````[
1,
2,
3,
2,
3,
[
4
]
]
``````

assigned to `result` .

# `difference`

`difference` remove the values that are given in the values array from the copy of the original array and returns the new array without the specified values.

`SameValueZero` comparison is used, which is the same as the `===` operator, except that `NaN` is the same as itself, and `-0` and `+0` are considered the same.

It takes 2 argument, which is the array to remove items from as the first argument, and the array with the values to remove from the array in the first argument as the second argument

For example, we can use it by writing:

``````import * as _ from "lodash";
const array = [1, 2, 3];
const result = _.concat(array, 2, , []);
``````

Then we get:

``````[
1
]
``````

assigned to `result` .

# `differenceBy`

We can use the `differenceBy` method to remove elements from an array and returns the new array with the items removed.

It takes 3 arguments, which is the array to remove items from. The second arguments have the values to exclude from the first array. The last argument is a function, which we can use to compare them items or a string with the property name for the value to compare.

For example, we can use it as follows:

``````import * as _ from "lodash";
const result = _.differenceBy(
[{ name: "Joe" }, { name: "Jane" }],
[{ name: "Joe" }],
"name"
);
``````

Then we get back:

``````\[
{
"name": "Jane"
}
]
``````

which is assigned to `result` .

We can also pass in a comparator function instead of the string key for the property value that we want to check as the third argument:

``````import * as _ from "lodash";
const fn = a => a.id.toString();
const result = _.differenceBy([{ id: 1 }, { id: 2 }], [{ id: 1 }], fn);
``````

The `fn` function has the `a` parameter which has the object that’s being looped through in the first array, so we can manipulate it the way we like to map it to new values.

Then we get back:

``````[
{
"id": 2
}
]
``````

and assigned to `result` .

# `differenceWith`

Like `differenceBy` , `differenceWith` does the same thing but it only takes a `comparator` function as the third argument instead of both `comparator` or a string that has the key name that we want to compare.

The `comparator` has 2 parameters, which are the elements from the first and second array in the arguments respectively.

It also returns a new array with items from the second array removed if it matches items in the first array.

For example, we can write the following:

``````import * as _ from "lodash";
const comparator = (a, b) => a.id.toString() === b.id.toString();
const result = _.differenceWith(
[{ id: 1 }, { id: 2 }],
[{ id: 1 }],
comparator
);
``````

The code above will compare the items from the first array with what’s in the second array and returned the items that aren’t in the second array in the new array according to the condition returned from the `comparator` function.

Then we get back:

``````[
{
"id": 2
}
]
``````

and assigned to `result` .

There’re some useful array methods in Lodash to make manipulating arrays easier.

The `chunk` method lets us separate array entries into arrays with the given size and returns it.

`compact` method creates an array with all the falsy values removed and returns it.

`concat` method creates a new array with the additional values added and returns it.

`difference` remove the values that are given in the values array in the 2nd argument from the original array. Similarly, `differenceBy` and `differenceWith` let us compare the arrays in different ways and manipulate them in different ways to eliminate elements from the original array that are given in the values array.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.