Categories
Lodash

Plain JavaScript Versions of Lodash Methods to Reverse and Sort Arrays

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 replace the reverse , slice , tail, takrRight, takeRightWhile and take methods with plain JavaScript code.

reverse

The Lodash reverse method reverses an array so that the first element becomes the last 2nd becomes 2nd last and so on.

This method is based on Arrar.prototype.reverse so that we don’t need to use Lodash’s reverse to reverse arrays.

We can just implement Lodash’s reverse method as follows:

const reverse = arr => arr.reverse()

Then we can call it as follows:

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

and we get that result is [3, 2, 1] .

slice

Lodash’s slice method returns a slice of an array from the beginning index up to the end index. We can specify the start and end index.

It’s based on Array.prototype.slice so we don’t need to use it. If we really want Lodash’s slice method, we can implement it as follows:

const slice = (arr, start, end) => arr.slice(start, end)

We just called the arr ‘s slice method with the start and end index.

We can call it as follows:

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

and we get that result is [2] .

tail

The tail method returns an array that has all but the first element of the array.

We can implement it as follows:

const tail = (arr) => arr.slice(1)

In the code above, we just called slice with 1 to exclude the first element

We can call it as follows:

const result = tail([30, 40, 50]);

Then result is [40, 50] .

take

take returns a slice of an array with n elements are taken from the beginning

Again, we can implement with slice as follows:

const take = (arr, n) => arr.slice(n)

Passing n as the first argument of slice returns an array with the first n entries removed.

We can call it as follows:

const result = take([30, 40, 50], 2);

Then we get that result is [50].

takeRight

The takeRight method returns a slice of an array with the n elements removed from the end.

Once again, we can use slice as follows:

const takeRight = (arr, n) => arr.slice(0, -n)

In the code above, we passed in 0 and -n to slice so that we return an array with from the first to the nth last entry inside.

Then when we call it as follows:

const result = takeRight([30, 40, 50], 2);

we get that result is [30] .

takeRightWhile

takeRightWhile returns a new array with the entries taken from the original array from the right until the given predicate that we used to end the method by returning the array returns true .

We can implement it as follows:

const takeRightWhile = (arr, predicate) => {
  let takenArr = [];
  for (let i = arr.length - 1; i >= 0; i--) {
    if (!predicate(arr[i])) {
      takenArr.push(arr[i]);
    } else {
      return takenArr.reverse();
    }
  }
  return takenArr.reverse();
}

In the code above, we looped through arr in reverse with a for loop. Then we run the predicate function in each iteration with each element as the argument and see if it returns true .

If it doesn’t then we push the entry into takenArr . Otherwise, we return takenArr reversed so that we have the elements in the original order.

Then we can call it as follows:

const result = takeRightWhile([30, 40, 50], a => a < 40);

and result is [40, 50] since we specifies that we stop if the first entry called with the predicate returns true .

Conclusion

The takeRightWhile method can easily be implemented with simple loops. We just have to loop through items in reverse instead of forward to get items from the end first and work towards the start.

The takeRight, tail and take methods can be implemented with slice .

reverse and slice methods are already built into plain JavaScript and it’s with Lodash uses anyways, so we can just use the plain JavaScript versions.

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 *