How Lodash _.differenceBy() and _.differenceWith() works? Code Example

In the previous article we saw how we can remove the common elements of second array from first array using _.difference() function of Lodash.

There are two more functions provided by Lodash –

• _.differenceBy(array, [values], [iteratee])
• _.differenceWith(array, [values], [comparator])

These functions are also used to get difference of second array from first array, but in a more powerful way.

In this article, I will explain how these functions works because official documentation is not clear about it.

How _.differenceBy works?

It accepts two arrays and a iteratee function. This iteratee function manipulates the values of both the arrays and then do the comparison. It accepts a single parameter.

Let’s understand this properly.

Suppose you have two arrays –

const firstArray = [1.2, 2.0, 3.3, 4.1, 5.2]
const secondArray = [2.2, 2.0, 3.0]

If we do a _.difference on them –

_.difference(firstArray, secondArray)

// Output 👉 [1.2, 3.3, 4.1, 5.2]

But _.differenceBy uses iteratee function which holds the capability to manipulate results before doing the comparison for equality. This manipulation is only for comparison. It doesn’t change the actual array values.

Suppose, you want to convert the decimal values of firstArray and secondArray to their ceiling values before comparison. So, the arrays will change to this –

const firstArray = [1.2, 2.0, 3.3, 4.1, 5.2]
const secondArray = [2.2, 2.0, 3.0]

// after iteratee function 👇 
// Each value will pass from Math.ceil()
firstArray = [2, 2, 4, 5, 6]
secondArray = [3, 2, 3]

// Now _.difference will run. 
finalArray = firstArray (difference) secondArray
finalArray = [4, 5, 6]
//              👇
// But these are not the actual values of firstArray
// They are generated after iteratee function
// So the final values are

result = [3.3, 4.1, 5.2] 

The above code block explains how iteratee function converts all values to something and then compare. But in the end the result contains the before manipulated values of first array.

For this case, our iteratee function will be –

const iteratee = (val) => (Math.ceil(val))

In simple terms, we can use _.differenceBy like this –

const firstArray = [1.2, 2.0, 3.3, 4.1, 5.2]
const secondArray = [2.2, 2.0, 3.0]

const iteratee = (val) => (Math.ceil(val))

console.log(_.differenceBy(firstArray, secondArray, iteratee))

// Output 👉 [3.3, 4.1, 5.2]

Let’s take another example. This time we will use array of objects –

const firstArray = [{'a': 1}, {'a': 2}, {'a': 3}]
const secondArray = [{'a': 3}, {'a': 5}]

const iteratee = (val) => (val.a)
// iteratee function is accepting the complete object
// but returning the value of property 'a'
// So {'a': 1} will become 1 after passing
// through iteratee function

// iteratee(firstArray) = [1, 2, 3]
// iteratee(secondArray) = [3, 5]

console.log(_.differenceBy(firstArray, secondArray, iteratee))

// Output 👉 [{'a': 1}, {'a': 2}]

How _.differenceWith works?

It is similar to _.differenceBy but instead of iteratee function, it has a comparator function. This function compares the values of both the arrays according to its defined logic and returns the equality.

So, if your comparator function says 2=5, then values 2 in first array will be eliminated if value 5 is present in second array.

This function accepts two parameters – value of first array, and value of second array. And it should return boolean True or False.

• True -> It means equality matches and value should be eliminated from firstArray.
• False -> Not equal. So final array will have the value.

const firstArray = [{'a': 1}, {'a': 2}, {'a': 3}]
const secondArray = [{'a': 3}, {'a': 5}]

const comparatorFunc = (firstArrVal, secondArrVal) => (
       firstArrVal.a == secondArrVal.a ? true : false
     )

console.log(_.differenceWith(firstArray, secondArray, comparatorFunc))

// Output 👉 [{'a': 1}, {'a': 2}]

Live Demo