How to remove n elements from array using Lodash & JavaScript?

To remove n number of elements from beginning or end of an array in Javascript, you may use these methods provided by Lodash –

1. _.drop(array, n)
2. _.dropRight(array, n)
3. _.dropRightWhile(array, predicate)
4. _.dropWhile(array, predicate)

These 4 functions are used to drop first or last few numbers of elements.

How it is decided to remove, what number of elements?

There are two strategies –

1. Specifying the count of elements to drop, like 5 from beginning or 2 from end. _.drop and _.dropRight use this.

2. A predicate function which runs a logic to determine up to which element, array should drop. So, the array removes the elements as long as this function is returning true. Check the below explanation –

Suppose predicate function is returning true for values less than 10.

const predicateFunc = (val, index, arr) => (val < 10)

Our array is - 
const arr = [2, 4, 6, 10, 14, 8, 5, 18]

Running predicateFunc over each value of array -
[2,    👉  2 < 10 = True   👉 Drop      ❌
4,     👉  4 < 10 = True   👉 Drop      ❌
6,     👉  6 < 10 = True   👉 Drop      ❌
10,    👉 10 < 10 = False  👉 Retain    ✅
14,    👉 NA               👉           ✅
8,     👉 NA               👉           ✅
5,     👉 NA               👉           ✅
18]    👉 NA               👉           ✅

So, final array = [10, 14, 8, 5, 18]

You can see that 8, 5 are smaller than 10 but still in final array. Because as soon as the first false is achieved, predicateFunc won't run on further values.

_.dropRightWhile and _.dropWhile uses predicate function to decide the elements to drop.

_.drop(array, n)

These are the properties –

1. It removes n number of elements from the beginning of the array.
2. The default value of n is 1.
3. Put n=0 to prevent dropping any value.

Code Example

const arr = [2, 4, 6, 10, 14, 8, 5, 18]

console.log(_.drop(arr, 3))
// Output 👉 [10, 14, 8, 5, 18]

console.log(_.drop(arr))
// Output 👉 [4, 6, 10, 14, 8, 5, 18]
// Because default value of n=1

console.log(_.drop(arr, 0))
// Output 👉 [2, 4, 6, 10, 14, 8, 5, 18]

console.log(_.drop(arr, 100))
// Output 👉 []

_.dropRight(array, n)

All the properties of this function are similar to _.drop except it removes elements from the end.

Code Example

const arr = [2, 4, 6, 10, 14, 8, 5, 18]

console.log(_.dropRight(arr, 3))
// Output 👉 [2, 4, 6, 10, 14]

console.log(_.dropRight(arr))
// Output 👉 [2, 4, 6, 10, 14, 8, 5]
// Because default value of n=1

console.log(_.dropRight(arr, 0))
// Output 👉 [2, 4, 6, 10, 14, 8, 5, 18]

console.log(_.dropRight(arr, 100))
// Output 👉 []

_.dropWhile(array, predicate)

This function is like _.drop but instead of using number of elements to drop, it uses predicate function.

We already discussed about predicate functions in previous section. Let’s see some code examples.

Code Example

const arr = [2, 4, 6, 10, 14, 8, 5, 18]

const predicateFunc1 = 
     (val, index, arr) => (val < 10)

console.log(_.dropWhile(arr, predicateFunc1))
// Output 👉 [10, 14, 8, 5, 18]

/*************************************************/

const arr2 = [
     {a: 1, b: 2, c: 5},
     {a: 2, b: 3, c: 6},
     {a: 3, b: 4, c: 7},
     {a: 4, b: 5, c: 8}
  ]

const predicateFunc2 =
      (val, index, arr) => (val.a + val.b != val.c)
// predicateFunc2 will return true if a + b != c.
// For val {a: 1, b: 2, c: 5}, a + b = 1 + 2 = 3
// c = 5. So, a + b != c.

console.log(_.dropWhile(arr2, predicateFunc2))
// Output 👇 
/*
  [
     {a: 3, b: 4, c: 7},
     {a: 4, b: 5, c: 8}
  ]
*/

_.dropRightWhile(array, predicate)

This is exactly like _.dropWhile except it drops from the end or right side. Not from the beginning.

Code Example

const arr = [2, 4, 6, 10, 14, 8, 5, 18]

const predicateFunc1 = 
     (val, index, arr) => (val < 10)

console.log(_.dropRightWhile(arr, predicateFunc1))
// Output 👉 [2, 4, 6, 10, 14, 8, 5, 18]

/*************************************************/

const arr2 = [
     {a: 1, b: 2, c: 5},
     {a: 2, b: 3, c: 6},
     {a: 3, b: 4, c: 7},
     {a: 4, b: 5, c: 8}
  ]

const predicateFunc2 =
      (val, index, arr) => (val.a + val.b != val.c)

console.log(_.dropRightWhile(arr2, predicateFunc2))
// Output 👇 
/*
  [
     {a: 1, b: 2, c: 5},
     {a: 2, b: 3, c: 6},
     {a: 3, b: 4, c: 7}
  ]
*/

Live Demo