Learning JavaScript by Implementing Lodash Methods — Diffing and Zipping

John Au-Yeung
May 6, 2020 · 4 min read
Photo by James Barker on Unsplash

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.

The 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 function before doing the comparison. The 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 method that’s in plain JavaScript to see if an entry is in all the arrays in our loop.

When doing the comparison, we call first with the function, then we also call when calling 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 array.

When we call it as follows:

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

We get that is because we mapped the values with before comparing, so 2.1 and 2.2 are considered the same and are in all the arrays.

is similar to 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 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 method like we did with , but we called with inside to compare the values to determine if they’re in all the arrays.

If they’re not then we push them into the 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 is:

[
1,
3
]
Photo by Yerlin Matu on Unsplash

The Lodash 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 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 argument into an array of arrays.

Then we loop through the items with a loop and inside it, we check that if isn’t an array, then we create an array.

Once we did that we loop through the arrays in with the loop and get the array entry in the position of each array and push it into the arrays in array in the same position.

Then when we call as follows:

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

We see that 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 function or by comparing them with the 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.

The Startup

Get smarter at building your thing. Join The Startup’s +785K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

John Au-Yeung

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +785K followers.

John Au-Yeung

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +785K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store