Categories
Lodash

Useful Lodash Array Methods not Available in Plain JavaScript

Spread the love

Even though a few Lodash utility methods have been replaced by built-in methods in plain JavaScript, many still have no equivalent in the JavaScript standard library.

In this article, we’ll look at some Lodash array methods that aren’t in plain JavaScript.

_.take(array, [n=1])

The take method creates a slice of an array from the beginning and returns it.

It takes an array as the first argument and the number of elements n to get from the beginning as the second. n defaults to 1.

For instance, we can use it as follows:

import * as _ from "lodash";

const array = [1, 2, 3, 4, 5];
const arr = _.take(array, 2);

The code above takes the first 2 elements of array , creates a new array and returns it.

Therefore, arr has the value [1, 2] .

If we pass in 0 as the second argument, we get an empty array. If we pass in nothing, we get [1] as the value of arr .

_.takeRight(array, [n=1])

takeRight is like take but creates an array by taking the values starting from the end and returns it.

It takes an array as the first argument and the number of elements n to get from the beginning as the second. n defaults to 1.

For instance, we can use it as follows:

import * as _ from "lodash";

const array = [1, 2, 3, 4, 5];
const arr = _.takeRight(array, 2);

Then arr is [4, 5] because we passed in 2, which takes the last 2 values of array , creates a new array and then returns it.

If we pass in 0 as the second argument, we get an empty array. If we pass in nothing, we get [5] as the value of arr .

_.takeRightWhile(array, [predicate=_.identity])

We can use takeRightWhile top take elements from the end with the given condition and returns it.

Elements are taken until predicate returns a falsy value.

The predicate runs with 3 arguments, which are value , index , and array .

For instance, we can write the following code to extract active users from an array of users:

import * as _ from "lodash";

const users = [
  { user: "foo", active: true },
  { user: "bar", active: false },
  { user: "baz", active: true }
];

const activeUsers = _.takeRightWhile(users, value => value.active);

The code above sets:

[
  {
    "user": "baz",
    "active": true
  }
]

for activeUsers because it takes all the values that have active set to true until it finds one with active set to false .

Therefore, 'baz' meets that condition, so it’s put into the returned array.

On the other hand, the following:

import * as _ from "lodash";

const users = [
  { user: "foo", active: true },
  { user: "bar", active: false },
  { user: "baz", active: false }
];

const activeUsers = _.takeRightWhile(users, value => value.active);

assigns activeUsers to an empty array because the last entry has active set to false , so it never reaches one with active set to true .

Other ways to set predicate includes:

import * as _ from "lodash";

const users = [
  { user: "foo", active: true },
  { user: "bar", active: false },
  { user: "baz", active: false }
];

const inactiveUsers = _.takeRightWhile(users, { user: "baz", active: false });

Which checks the value of user and active in each entry.

Or we can write:

import * as _ from "lodash";

const users = [
  { user: "foo", active: true },
  { user: "bar", active: false },
  { user: "baz", active: false }
];

const inactiveUsers = _.takeRightWhile(users, ["active", false]);

which checks if the active property is false and get those entries.

Or we can write:

import * as _ from "lodash";

const users = [
  { user: "foo", active: true },
  { user: "bar", active: false },
  { user: "baz", active: true }
];

const activeUsers = _.takeRightWhile(users, "active");

to check is active is true .

_.takeWhile(array, [predicate=_.identity])

takeWhile returns a slice of the original array by checking the values from the start.

Elements are taken until predicate returns falsy. The predicate is run with 3 arguments, value , index , and array .

For example, we can write the following code to take values from the users array with active set to true from checking from the beginning of it:

import * as _ from "lodash";

const users = [
  { user: "foo", active: true },
  { user: "bar", active: false },
  { user: "baz", active: true }
];

const activeUsers = _.takeWhile(users, value => value.active);

The code above sets:

[
  {
    "user": "foo",
    "active": true
  }
]

to activeUsers because it checks at the first entry from the start has active set to true , so it takes that one and put it into the returned array.

Then the second has active set to false so it just returns the array with that entry included.

We can also write the following:

import * as _ from "lodash";

const users = [
  { user: "foo", active: true },
  { user: "bar", active: false },
  { user: "baz", active: true }
];

const activeUsers = _.takeWhile(users, { user: "foo", active: false });

to returns all the users entries with user value 'foo' and active set to false .

Likewise, we can write the following:

import * as _ from "lodash";

const users = [
  { user: "foo", active: true },
  { user: "bar", active: false },
  { user: "baz", active: true }
];

const activeUsers = _.takeWhile(users, ["active", true]);

to get all the entries with active set to true until one with active set to false is found.

To make the code even shorter, we can write:

import * as _ from "lodash";

const users = [
  { user: "foo", active: true },
  { user: "bar", active: false },
  { user: "baz", active: true }
];

const activeUsers = _.takeWhile(users, "active");

to make do the same thing as the previous example.

Conclusion

Lodash provides us with many ways to get an array that takes the entries that meet our condition until it finds one that doesn’t meet the condition we set.

These methods have no equivalent in JavaScript’s standard library, but they’re nevertheless useful for many.

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 *