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, [3], [[4]]);

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, [3], [[4]]);

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.