Categories
Lodash

Lodash Array Joining and Filtering Methods We Can Implement Easily

Spread the love

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 how to implement some Lodash array manipulation methods ourselves, including intersectionBy , last , lastIndexOf , nth , pull , pullAll and join .

intersectionBy

The Lodash intersectionBy method is like the intersection in that it returns an array with the unique entries that are include in all arrays, except that we can pass in our own callback to compare the items our way instead of using the SameValueZero algorithm for comparison.

We can implement it ourselves by taking a callback which we call in the callback of the array instance’s every method as follows:

const intersection = (iteratee, ...arrs) => {
  let vals = [];
  for (const a of arrs[0]) {
    const inAllArrs = arrs.map(arr => arr.map(iteratee)).every((arr) => arr.map(iteratee).includes(iteratee(a)));
    if (inAllArrs) {
      vals.push(a)
    }
  }
  return [...new Set(vals)];
}

In the code above, we get a condition callback function and a list of arrs from the arguments.

Then we get the first array and loops through it. In the loop, we call the every method on arrs to check if each array includes the given item from the first array, which is one of the arrays we want to check.

Also, to check if the item is included or not in every array, we have to map all the entries with the iteratee before checking, including the includes method.

This way, we compare them after they’ve been converted with the iteratee function.

Then, in the end, we converted the added items to a set and then convert it back to an array with the spread operator to return an array with unique items.

join

The Lodash join method converts all elements of an array into a string separated by a separator.

It does the same thing as the plain JavaScript array’s join method except that the plain JavaScript version is called on an array instance. The Lodash join method takes the array as an argument.

For instance, we can implement our own Lodash join method as follows:

const join = (arr, separator) => arr.join(separator)

We can then call it as follows:

const result = join([1, 2, 3], ',')

Then we get result is 1,2,3 .

last

The last method returns the last element of an array. We can easily create our own function to return it as follows:

const last = arr => arr[arr.length - 1]

Then we can call it as follows:

const result = last([1, 2, 3])

And we get that result is 3 as we expected.

lastIndexOf

Lodash’s indexOf method can be implemented easily with the indexOf method in plain JavaScript.

Then we can implement it as follows:

const indexOf = (arr, value, from) => arr.lastIndexOf(value, from)

In the code above, we called the lastIndexOf method with the value we’re looking for and the value that we’re looking for starting from the from index and working towards the beginning.

Then we can call it as follows:

const result = indexOf([1, 2, 3], 2, 3)

and the result is 1.

nth

Lodash’s nth method returns the nth entry in the array. We can obviously implement this easily by getting the n-th entry with the bracket notation as follows:

const nth = (arr, index) => arr[index]

In the code above, we just return the item with the given array index.

Then we can call it as follows:

const result = nth([1, 2, 3], 2)

Then result is 3 since we’re getting the 3rd element.

pull

The Lodash pull method returns a new array with the given values in the array removed.

We can implement it ourselves easily with the filter method as follows:

const pull = (arr, ...values) => arr.filter(a => !values.includes(a))

In the code above, we just called the filter method and in the callback, we call the includes method as we did above to exclude the items that we include with values , which is created by spreading the values.

Then we can call it as follows:

const result = pull([1, 2, 3], 2, 3)

We get that result is [1] .

pullAll

pullAll is similar to pull , except that it takes an array instead of a list of arguments. We can implement it as follows:

const pullAll = (arr, values) => arr.filter(a => !values.includes(a))

Then when we call it as follows:

const result = pullAll([1, 2, 3], [2, 3])

We get the same result value as before.

Conclusion

The join and lastIndexOf methods are built into plain JavaScript, so we can easily use them to implement the Lodash join and lastIndexOf methods.

The nth method gets the nth entry of an array. We can just do that with the bracket notation.

pull and pullAll can easily be implemented with the filter method.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *