Lodash Methods Implemented with Plain JavaScript — Accessing Array Items

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 look at how to implement Lodash array methods that are used to access array items.

findIndex

The findIndex method in Lodash takes an array and then returns the first index of the array item with the given condition.

JavaScript’s standard library already has the findIndex method already. The difference between the Lodash and plain JavaScript version is that the Lodash one can also accept an index for where we can start searching as follows:

const findIndex = (arr, condition, start) => arr.findIndex((a, i) => condition(a) && i >= start)

In the code above, we have our own findIndex method, which takes the following arguments:

• arr — the original array to call findIndex with
• condition — the condition to check, which is a callback that takes an array and returns the condition that matches the condition
• start — which is the starting index of arr to search for items

In the code above, we just called the JavaScript’s built-in findIndex method with a callback that returns the result of condition(a) && i >= start .

This will start searching arr from the start index and the given condition .

Then we can call it as follows:

const index = findIndex([1, 2, 3, 4, 5], a => a > 2, 1)

which means that index should equal 2 since that’s the first array entries that bigger than 2.

findLastIndex

findLastIndex is like findIndex , but searches the array from the end instead of the beginning. The arguments are the same as findIndex except the start index searches towards the beginning instead of the end.

For instance, we can implement it as follows:

const findLastIndex = (arr, condition, start) => {
  for (let i = arr.length - 1; i >= 0; i--) {
    if (condition(arr[i]) && i <= start) {
      return i;
    }
  }
  return -1;
}

In the code above, we implemented the findLastIndex method with a for loop instead of the array’s findIndex method.

If we found the array that meets the condition condition(arr[i]) && i <= start then we return that index since we’re searching from the end towards the beginning for an entry that returns true if we call condition(arr[i]) .

If the loop finished without finding an element, then we return -1. Therefore, when we have:

const lastIndex = findLastIndex([1, 2, 3, 4, 5], a => a > 2, 1)

Then lastIndex is 4 because findLastIndex searches from the end and find one that’s between index 0 and and start .

first

The Lodash’s first method, which is the alias of the head method, takes an array and returns the first entry from it. We can just access the first entry of an array with its index, so we can implement first or head easily as follows:

const first = arr => arr[0]

In the code above, we just use [0] to get the first index of an array.

flatten

Fortunately, there’s already a flat method in plain JavaScript, which can flatten an array by any level.

For instance, we can write the following code to implement Lodash’s flatten , which flattens the given array one level deep:

const flatten = arr => arr.flat(1)

We just called the flat method with 1 to flatten an array one level deep.

Therefore, when we call our flatten function as follows:

const flattened = flatten([1, [2], 3, 4, 5])

We get that flattened is [1, 2, 3, 4, 5] .

Also, we can use the spread operator to implement flatten as follows:

const flatten = arr => {
  let flattened = [];
  for (const a of arr) {
    if (Array.isArray(a)) {
      flattened = [...flattened, ...a];
    } else {
      flattened.push(a);
    }
  }
  return flattened;
}

We looped through the entries of arr and then spread it into a new array if it’s an array. Otherwise, we push to push the entry into the end of the returned array.

Then we get the same result as before.

Conclusion

Lodash’s findIndex can be implemented by the JavaScript array’s findIndex method, which finds the index but we can’t specify what index to start the search with.

To implement the findLastIndex method, we have to use a plain for loop since we have to loop through an array in reverse.

The first method can be implemented by returning arr[0]. Finally, the flatten method can be implemented with the spread operator after we check if the entry is an array with the Array.isArray method. Otherwise, we can use the push method.