Lodash Array Methods That Can Easily Be Implemented in Plain JavaScript

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 array access methods that can be replaced with plain JavaScript easily.

head

The head method just gets the first element of an array. We can do that without much effort since the first version of JavaScript.

For instance, we can create our own head function as follows:

const head = (arr) => arr[0]

Then we can it as follows:

const result = head([1, 2, 3]);

and get 1 for result .

indexOf

The Lodash indexOf method finds the value from that’s between the first index that we can optionally specify or the beginning of the array and the end of the array.

The plain JavaScript indexOf does the same thing. The only difference is that it’s part of the array instance rather than passing the array into the indexOf method like we do with Lodash.

We can easily use the plain JavaScript’s indexOf method to create our own Lodash’s indexOf method as follows:

const indexOf = (arr, val, start = 0) => arr.indexOf(val, start);

In the code above, we called the plain JavaScript’sindexOf on arr . Then we just pass in val for the item to search for and start for the optional starting index to search for.

Both indexOf methods return the index of the first match. Then we can call it as follows:

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

and we get 1 for result since 2 is in index 1. Both indexOf methods return -1 is the item isn’t found within the range of the index specified.

initial

The Lodash initial method returns all but the last element of the array. We can easily implement this with the slice method.

For instance, we can implement it as follows:

const initial = (arr) => arr.slice(0, -1);

In the code above, we just called since with 0 and -1 as arguments to include the first to the 2nd last element. A negative index starts with -1 from the start to indicate the last element. Then the 2nd last is -2 and so on.

Therefore, when we call it as follows:

const result = initial([1, 2, 3]);

We get [1, 2] as the value of result .

intersection

The Lodash intersection method creates an array of unique values that are included in all the arrays given using SameValueZero equality comparison, which is similar to === except that +0 and -0 are considered different and NaN is the same as itself.

Lodash’s intersection method takes zero or more arrays arguments. We can get all the elements that are in all the arrays as follows:

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

In the code above, we first spread the arguments into an array.

Then we loop through the longest array and check if the other arrays have the same entries as the first array with the plain JavaScript’s every method with the callback (arr) => arr.includes(a) , which checks if all the arrays that are passed in include the given entry a .

We don’t have to check all arrays for all entries because if the one we loop through doesn’t have an item, then it shouldn’t be included anyways.

If it’s included in all arrays, then we push it to vals . includes uses the SameValueZero algorithm so that we don’t have to do any other checks for comparison.

Then when we call it as follows:

const result = intersection([1, 2, 3], [1, 2], [1, 3, 5]);

We get [1] as the value of result .

Conclusion

The Lodash head method doesn’t need much effort to implement ourselves since the first version of JavaScript.

The indexOf method can also be easily implemented with the plain JavaScript’s indexOf method.

We can use the slice method to implement the initial method of Lodash.

The intersection method can be implemented by using the spread operator to spread the arguments into an array and then use the for...of loop to loop through the longest array and check if the other arrays have the given entry.