Useful Lodash Array Functions — Fill and Find

Lodash is a utility library that has lots of methods for manipulating objects. It has stuff that we use all the time and also things that we don’t use frequently or don’t think of using.

In this article, we’ll look at more useful Lodash array methods, including fill , findIndex , and findLastIndex .

fill

The fill method fills elements of an array with value from the start index inclusive but not including the end index.

It takes up to 4 arguments. The first argument is the array to fill in the items into. The second is the value to fill the array with.

The third is an optional argument for the start index to fill entries with. The default value is 0.

The last argument is an optional argument for the end index to fill it up to. The default value is the array ‘s length .

It returns a new array with the filled entries.

For example, we can use it as follows:

import * as _ from "lodash";

const result = _.fill(new Array(5), 1, 0, 2);
console.log(result);

Then we get:

[
  1,
  1,
  null,
  null,
  null
]

and assigned to result. Entries that aren’t filled are null .

If the end is bigger than the array’s length , as in the following code:

import * as _ from "lodash";

const result = _.fill(new Array(5), 1, 0, 10);
console.log(result);

Then we get all the arrays filled:

[
  1,
  1,
  1,
  1,
  1
]

and assigned to result. We can also fill items in the middle of an array as follows:

import * as _ from "lodash";

const result = _.fill(new Array(5), 1, 1, 2);
console.log(result);

Then we get:

[
  null,
  1,
  null,
  null,
  null
]

and assigned to result.

Photo by Gabrielle Costa on Unsplash

findIndex

The findIndex method gets the first match of an object from an array that satisfies a given condition.

It takes up to 3 arguments. The first is the array to search for items with. The second is an optional argument where we pass in the callback function that returns the condition to look for. Finally, the third argument is an optional argument to specify where to start.

It returns the index of the entry if a match is found. Otherwise, it returns -1.

We can use it as follows:

import * as _ from "lodash";

const people = [
  { name: "Joe", age: 10 },
  { name: "Mary", age: 12 },
  { name: "Jane", age: 13 }
];
const result = _.findIndex(people, p => p.age === 10);

Then we get 0 for result.

We can also pass in a starting index as follows:

import * as _ from "lodash";

const people = [
  { name: "Joe", age: 10 },
  { name: "Mary", age: 12 },
  { name: "Jane", age: 13 }
];
const result = _.findIndex(people, p => p.age === 10, 1);

Then we get -1 since nothing from the index 1 and on has an entry with age 10.

findLastIndex

This is similar to findIndex but it finds the last match instead of the first match. The search is also done from end to start.

The arguments are the same as the same as findIndex , except that the third argument takes the end index which too starts the search from the index of the first index.

For example, we can use it as follows:

import * as _ from "lodash";

const people = [
  { name: "Joe", age: 10 },
  { name: "Mary", age: 12 },
  { name: "Jane", age: 13 }
];
const result = _.findLastIndex(people, p => p.age === 12);

Then we get 1 for result since the entry match the condition is in the 2nd entry.

We can also pass in the end index as the third argument. For example, we can write:

import * as _ from "lodash";

const people = [
  { name: "Joe", age: 10 },
  { name: "Mary", age: 12 },
  { name: "Jane", age: 13 }
];
const result = _.findLastIndex(people, p => p.age === 13, 1);

Then we get -1 since the search starts at index 1 and goes down to 0. Nothing in index 1 or less meets the condition, so we get -1.

The fill method fills elements of an array with value from the start index inclusive but not including the end index.

The findIndex method gets the first match of an object from an array that satisfies a given condition and returns the index of that entry.

findLastIndex is similar to findIndex but it finds the last match instead of the first match. The search is also done from the end index to the start.

The post Useful Lodash Array Functions — Fill and Find appeared first on The Web Dev.