Categories
JavaScript

Useful Lodash Array Functions to Drop Items

Spread the love

Lodash is a utility library that has a lot of methods for manipulating arrays. In this article, we’ll look at useful Lodash array methods, including drop, dropRight, dropRightWhile, and dropWhile .

drop

The drop method creates a slice of an array with the first number of elements dropped from the beginning.

It takes 2 arguments which are an array to take the values from and the number of elements to drop from the beginning of the array in the first argument.

It returns a new array that drops the specified number of elements from the beginning.

For example, we can use it as follows:

import * as _ from "lodash";

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

Then we get [3, 4, 5] assigned to result .

If the number is bigger than the length of the array, then we get an empty array returned. For example, we can write:

import * as _ from "lodash";

const arr = [1, 2, 3, 4, 5];
const result = _.drop(arr, 10);

Then we get [] assigned to result .

dropRight

The dropRight method is similar to the drop method, but returns an array with items dropped from the right instead of the left.

It takes 2 arguments which are an array to take the values from and the number of elements to drop from the end of the array in the first argument.

For example, we can write the following:

import * as _ from "lodash";

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

Then we get [1, 2, 3] for result .

If the number is bigger than the length of the array, then we get an empty array returned. For example, we can write:

import * as _ from "lodash";

const arr = [1, 2, 3, 4, 5];
const result = _.dropRight(arr, 10);

Then we get [] assigned to result .

dropRightWhile

The dropRightWhile method returns an array with the items starting from the end removed until the predicate function that we passed in returns falsy.

It takes 2 arguments. The first is an array that we want to take the values from and remove the elements from the right. The second argument is the predicate function that has the array entry as the parameter and returns the condition that we want to be falsy when we want to stop removing items.

For example, given the following array:

const people = [
  { name: "Mary", age: 10 },
  { name: "Jane", age: 15 },
  { name: "John", age: 20 }
];

Then we can use dropRightWhile as follows:

import * as _ from "lodash";
const people = [
  { name: "Mary", age: 10 },
  { name: "Jane", age: 15 },
  { name: "John", age: 20 }
];
const result = _.dropRightWhile(people, p => p.age > 15);
console.log(result);

The code above will make a copy of the people array and remove the entries with age bigger than 15 starting from the end and return the resulting array.

Then we get:

[
  {
    "name": "Mary",
    "age": 10
  },
  {
    "name": "Jane",
    "age": 15
  }
]

Photo by Aaron Burden on Unsplash

dropWhile

dropWhile is similar to dropRightWhile . The only difference is that it removes items from the start that meets the given condition instead of from the right and returns that.

The arguments taken are the same as dropRightWhile .

For example, given the following array:

const people = [
  { name: "Mary", age: 10 },
  { name: "Jane", age: 15 },
  { name: "John", age: 20 }
];

Then we can use dropRightWhile as follows:

import * as _ from "lodash";
const people = [
  { name: "Mary", age: 10 },
  { name: "Jane", age: 15 },
  { name: "John", age: 20 }
];
const result = _.dropWhile(people, p => p.age < 15);
console.log(result);

The code above will make a copy of the people array and remove the entries with age less than 15 starting from the beginning and return the resulting array.

Then we get:

[
  {
    "name": "Jane",
    "age": 15
  },
  {
    "name": "John",
    "age": 20
  }
]

as the value assigned to result .

drop creates a slice of an array with the first number of elements dropped from the beginning. If the numbers dropped from the original array is bigger than the length of the array then it’ll return an empty array.

dropRight is the same as drop except the slice is created by removing items starting from the end.

dropRightWhile returns an array with the items starting from the end removed until the predicate function that we passed in returns falsy. dropWhile is similar to dropRightWhile except that the predicate is computed on values starting from the left.

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 *