DEV Community

John Au-Yeung
John Au-Yeung

Posted on • Originally published at thewebdev.info on

Useful Lodash Array Functions — Extraction and Intersection

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 the head , indexOf , initial , intersection , intersectionBy , and intersectionWith methods.

head

The head method gets the first element of an array and returns it. first is an alias of head .

It takes an array as its only argument.

We can use it as follows:

import * as _ from "lodash";
const array = [1, 2, 3];
const result = _.head(array);
console.log(result);

Then we get 1 for result . head returns undefined is the array passed in is empty.

indexOf

indexOf gets the index of the first occurrence of the item found in the array that’s passed into the argument and returns it.

It takes up to 3 arguments. The first is the array to search. The second argument is the value to look for. The third is an optional argument for the index to start the search from.

For example, we can use it as follows:

import * as _ from "lodash";
const array = [1, 2, 3];
const result = _.indexOf(array, 2, 1);
console.log(result);

Then we get 1 since 2 is in the 2nd position and we search from the start.

initial

The initial method gets all but the last element of an array and returns it.

It takes an array as its only argument.

For example, we can use it as follows:

import * as _ from "lodash";
const array = [1, 2, 3];
const result = _.initial(array);
console.log(result);

Then we get [1, 2] for result .

intersection

The intersection method returns an array of values that are included in all given arrays. Equality comparison is done with the SameValueZero comparison which is the same as === except that NaN is considered equal to itself.

It takes a comma-separated list of arrays to return the intersection from.

For example, we can use it as follows:

import * as _ from "lodash";
const arr1 = [1, 2, 3];
const arr2 = [3, 4, 5];
const result = _.intersection(arr1, arr2);
console.log(result);

Then we get [3] since only 3 are present in both arr1 and arr2 .

intersectionBy

intersectionBy is like intersection except that it takes a function which is invoked for each element of each array to generate the criterion for which items are compared. The first array determines the order and reference of results.

It takes a comma-separated list of arrays as arguments and a function for the criterion to compare to find the intersection with or a string with the property name to compare.

For example, we can use it as follows:

import * as _ from "lodash";
const arr1 = [
  { name: "Joe", age: 10 },
  { name: "Mary", age: 12 },
  { name: "Jane", age: 13 }
];
const arr2 = [
  { name: "Joe", age: 10 },
  { name: "Jerry", age: 12 },
  { name: "Amy", age: 13 }
];
const result = _.intersectionBy(arr1, arr2, a => a.name);
console.log(result);

Then we get:

[
  {
    "name": "Joe",
    "age": 10
  }
]

for result .

We can replace a => a.name with 'name' as follows:

import * as _ from "lodash";
const arr1 = [
  { name: "Joe", age: 10 },
  { name: "Mary", age: 12 },
  { name: "Jane", age: 13 }
];
const arr2 = [
  { name: "Joe", age: 10 },
  { name: "Jerry", age: 12 },
  { name: "Amy", age: 13 }
];
const result = _.intersectionBy(arr1, arr2, "name");
console.log(result);

Then we get the same thing.

intersectionWith

intersectionWith is like intersection except that it takes a comparator function as the last argument. The parameters for the function are 2 entries of from the arrays to compare against.

It takes a comma-separated list of arrays as arguments and the comparator function as the last argument.

For example, we can use it as follows:

import * as _ from "lodash";
const arr1 = [
  { name: "Joe", age: 10 },
  { name: "Mary", age: 12 },
  { name: "Jane", age: 13 }
];
const arr2 = [
  { name: "Joe", age: 10 },
  { name: "Jerry", age: 12 },
  { name: "Amy", age: 13 }
];
const result = _.intersectionWith(arr1, arr2, (a, b) => a.name === b.name);
console.log(result);

Then we get:

[
  {
    "name": "Joe",
    "age": 10
  }
]

for result .

The head method gets the first element of an array and returns it. first is an alias of head .

indexOf gets the index of the first occurrence of the item found in the array that’s passed into the argument and returns it. It can take a starting index to search from which defaults to 0.

initial gets all but the last element of an array and returns it.

To find array entries that are in all arrays, we can use the intersection , intersectionBy , and intersectionWith methods. They differ in that they may take functions for the criterion to compare or a comparator method to compare for equality respectively.

The post Useful Lodash Array Functions — Extraction and Intersection appeared first on The Web Dev.

Top comments (0)