Lodash Methods Implemented with Plain JavaScript — Flattening Arrays and Searching

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 flatten arrays recursive with flattenDeep and flattenDepth , and converting array key-value pairs to objects with fromPair .

flattenDeep

The Lodash’s flattenDeep recursively flattens an array. Now that JavaScript has a flat instance method for flattening arrays, we don’t need this method anymore.

The only thing that’s better is that it returns a new array instead of modifying the original one.

For instance, we can use it as follows to make our own flattenDeep method;

const flattenDeep = arr => arr.flat(Infinity)

Passing in Infinity flattens recursively.

Then we can call it as follows:

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

Then we get that flattened is [1, 2, 3, 4, 5] . The harder way is to implement it from scratch ourselves. However, we can make it shorter with the spread operator as follows:

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

In the code above, we called our ownflattenDeep function recursively. We only call it recursively when the entry is an array.

Therefore, they both get us the same result.

flattenDepth

The flattenDepth method recursively flatten an array up to the given depth level.

As we can see from the flattenDeep example above, the JavaScript’s built-in flat method takes an argument to specify the depth to flatten.

Therefore, we can implement our own flattenDepth function as follows:

const flattenDepth = (arr, depth) => arr.flat(depth)

We just call flat with our own depth . Therefore, when we call it as follows:

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

We get that flattened is:

[
  1,
  2,
  [
    3
  ],
  4,
  5
]

since specified that we flatten the given array one level deep.

If we want to implement flattenDepth ourself, we can implement something similar to how we implemented flattenDeep from scratch:

const flattenDepth = (arr, depth, flattenedDepth = 0) => {
  let flattened = [];
  for (const a of arr) {
    if (Array.isArray(a)) {
      flattened = [...flattened, ...a];
      if (depth < flattenedDepth) {
        flattened = [...flattenDepth(flattened, flattenedDepth + 1)]
      }
    } else {
      flattened.push(a);
    }
  }
  return flattened;
}

In the code above, we have an extra flattenDepth parameter, which is set to 0 so that we can keep track of the depth of the array that’s been flattened.

We then only call it when the

Then we can increase the flattenedDepth by one when we recursively call flattenedDepth .

Therefore, we get the same result as we did with flattenDepth implemented with the array’s flat method.

fromPairs

The fromPairs method converts return an object with that has an array’s entry with the key as the first entry and the value as the second entry.

JavaScript already has an Object.fromEntries that does the same thing, we can just use it as follows:

const obj = Object.fromEntries([
  ['a', 1],
  ['b', 2]
])

Then we can get that the obj object is:

{
  "a": 1,
  "b": 2
}

Object.fromEntries returns the same result as fromPairs , so we definitely don’t need fromPairs anymore.

indexOf

The Lodash indexOf method is the same as the plain JavaScript’s indexOf method. The Lodash indexOf can take a start index to search for an item with, which the plain indexOf method also takes.

For instance, we can use the plainindexOf method to implement the indexOf method as follows:

const indexOf = (arr, value, start) => arr.indexOf(value, start)

As we can see, we just used all the arguments with the indexOf method. The only difference is that indexOf is called on arr , which is an array instance.

Conclusion

We can call our own array flattening function or the array instance’s flat method, which both flatten an array.

The Object.fromEntries method replaces the fromPair method in Lodash.

Finally, the array instance’sindexOf method replaces the Lodash’s indexOf method.