# Learning JavaScript by Implementing Lodash Methods — Diffing and Zipping

Lodash is a very useful utility library that lets us work with objects and arrays easily.

However, now that the JavaScript standard library is catching up to libraries such as Lodash, we can implement many of the functions in simple ways.

In this article, we’ll look at some methods to get the symmetric difference and zipping arrays.

`xorBy`

The `xorBy`

method returns the symmetric difference of multiple arrays, which is an array without the entries that appear in all the arrays.

It does that by first running an `iteratee`

function before doing the comparison. The `iteratee`

function takes one argument to map a given entry to something else.

We can do that as follows:

`const xorBy = (iteratee, ...arrs) => {`

const symDiff = [];

for (const arr of arrs) {

for (const a of arr) {

const inAllArrays = arrs.every(arr => arr.map(iteratee).includes(iteratee(a)));

if (!inAllArrays) {

symDiff.push(a);

}

}

}

return symDiff;

}

In the code above, we used the rest operator to spread the arrays argument into an array of arrays.

Then we used the `every`

method that’s in plain JavaScript to see if an entry is in all the arrays in our `for...of`

loop.

When doing the comparison, we call `map`

first with the `iteratee`

function, then we also call `iteratee`

when calling `includes`

so that we’re comparing the mapped values instead of the original values.

Then if it’s not in the original array, then we put it in the `symDiff`

array.

When we call it as follows:

`const result = xorBy(Math.floor, [2.1, 1], [2.2, 3])`

We get that `result`

is `[1, 3]`

because we mapped the values with `Math.floor`

before comparing, so 2.1 and 2.2 are considered the same and are in all the arrays.

`xorWith`

`xorWith`

is similar to `xorBy`

in that, it runs a function. The difference is that the function is used to compare the values instead of mapping the values before comparing the items.

We can implement it similar to `xorBy`

as follows:

`const xorWith = (comparator, ...arrs) => {`

const symDiff = [];

for (const arr of arrs) {

for (const a of arr) {

const inAllArrays = arrs.every(arr => arr.findIndex(b => comparator(a, b)) >= 0);

if (!inAllArrays) {

symDiff.push(a);

}

}

}

return symDiff;

}

In the code above, we used the `every`

method like we did with `xorBy`

, but we called `findIndex`

with `comparator`

inside to compare the values to determine if they’re in all the arrays.

If they’re not then we push them into the `symDiff`

array. In the end, we return it.

Then when we call it as follows:

`const result = xorWith((a, b) => Math.floor(a) === Math.floor(b), [2.1, 1], [2.2, 3])`

We get tat `result`

is:

`[`

1,

3

]

`zip`

The Lodash `zip`

method groups elements, with the first elements of each array in the first array, the second element of each array in the second array, and so on.

We can do that we `for`

loops as follows:

`const zip = (...arrs) => {`

let zipped = [];

for (let i = 0; i < arrs[0].length; i++) {

if (!Array.isArray(zipped[i])) {

zipped[i] = [];

}

for (const arr of arrs) {

zipped[i].push(arr[i]);

}

}

return zipped;

}

In the code above, we used the rest operator to spread the `arrs`

argument into an array of arrays.

Then we loop through the items with a `for`

loop and inside it, we check that if `zipped[i]`

isn’t an array, then we create an array.

Once we did that we loop through the arrays in `arrs`

with the `for...of`

loop and get the array entry in the position `i`

of each array and push it into the arrays in `zipped`

array in the same position.

Then when we call `zip`

as follows:

`const result = zip(['a', 'b'], [1, 2], [true, false])`

We see that `result`

is:

`[`

[

"a",

1,

true

],

[

"b",

2,

false

]

]

# Conclusion

We can get the symmetric difference in different ways with Lodash either by mapping the values with an `iteratee`

function or by comparing them with the `conparator`

function.

To zip an array of arrays, we create a new array by first creating a new array of arrays, then we push each entry of the original nested array in the given position into the new nested array in the same position.

Then we return that array.