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 main use of client-side JavaScript is to manipulate web pages dynamically. We can do this with the DOM traversal methods and properties available to DOM Node objects.

Getting child and sibling elements is easy for any given Node since there are properties built into DOM Node objects to do so. The following are properties of a DOM Node object for getting parent, child and sibling nodes or elements.

childNodes

The childNodes property let us get the child nodes of a Node object. It returns a NodeList object, which is an array-like object that we can loop through with the for and for...of loop and spread with the spread operator. It’s a read-only property.

For example, we can use it as follows:

const divChildren = document.querySelector('div').childNodes;
for (let c of divChildren) {  
  console.dir(c);  
  console.log(c.textContent);  
}

We get the text nodes as well as the p nodes as the children, so the newline character and the p elements are both includes. The console.log and console.dir statements above should reflect that.

We can change the example above to change the color of the text on the fly. For example, we can write:

const divChildren = document.querySelector('div').childNodes;
for (let c of divChildren) {  
  if (c.style) {  
    c.style.color = 'red';  
  }  
}

to change all the p elements to red. We have to check the style attribute since the text nodes don’t have the style property.

firstChild

The firstChild property gets us the first child of the given Node object. For example, if we have the following HTML:

<div>  
  <p>  
    foo  
  </p>  
  <p>  
    bar  
  </p>  
  <p>  
    baz  
  </p>  
</div>

We get that the first child is a text node with a newline character with the following JavaScript:

const firstChild = document.querySelector('div').firstChild;
console.log(firstChild)

This property is a read-only property. If there’re no child nodes then it’ll return null .

lastChild

The lastChild property gets us the first child of the given Node object. For example, if we have the following HTML:

<div>  
  <p>  
    foo  
  </p>  
  <p>  
    bar  
  </p>  
  <p>  
    baz  
  </p>  
</div>

We get that the last child is a text node with a newline character with the following JavaScript:

const lastChild = document.querySelector('div').lastChild;console.log(lastChild)

This property is a read-only property. If there’re no child nodes then it’ll return null .

nextSibiling

The nextSibling property is a read-only property that represents the next Node in the tree or null if none exists.

For example, if we have the following HTML:

<div>  
  foo  
</div>  
<div>  
  bar  
</div>

Then we can use the nextSibling property as follows:

const nextSibling = document.querySelector('div').nextSibling;  
console.log(nextSibling)

We should get a text node with a new line character as the node from the nextSibling .

To get the second div in the HTML, we can chain the nextSibling property as follows:

const barNode = document.querySelector('div').nextSibling.nextSibling;  
barNode.style.color = 'red';

In the code above, we set the second div’s color to red.

parentNode

The parentNode property is a read-only property that gets us the parent node of the given node or null if it doesn’t exist. Nodes can include HTML elements or other nodes like text nodes or comment nodes.

For example, given the following HTML:

<div>  
  foo  
</div>  
<div>  
  bar  
</div>

We can write the following code to get the parent node:

const parentNode = document.querySelector('div').parentNode;
console.log(parentNode);

The console.log should get us the body node from as the parent.

We can do things to the parent node once we have it. For example, we can write:

const parentNode = document.querySelector('div').parentNode;
parentNode.style.color = 'red';

to change all the text red.

parentElement

The parentElement property is a read-only property that gets us the parent element of the given node. If the node has no parent or the parent node isn’t an HTML element, then it returns null .

For example, given the following HTML:

<div>  
  bar  
  <div id='foo'>  
    foo  
  </div>  
</div>

We can write the following JavaScript to get the parent element of the element with the ID foo :

const parentElement = document.querySelector('#foo').parentElement;
parentElement.style.color = 'red';

In the code above, we get the parent element of foo and set its color style to the color red, so we should see all the text having the color red because of the parent of foo is our outer div.

previousSibling

The previousSibling property is a read-only property that returns the previous node in the DOM tree, or null if it doesn’t exist.

For example, if we have the given HTML:

<div>  
  foo  
</div>  
<div id='bar'>  
  bar  
</div>

Then we can get the previous sibling as follows:

const previousSibling = document.querySelector('#bar').previousSibling;
console.log(previousSibling);

We can see that the previous sibling is the text node with the newline character.

To get the div with the word ‘foo’, we can write:

const foo = document.querySelector('#bar').previousSibling.previousSibling;
foo.style.color = 'red';

The first line gets the div with the word ‘foo’. Then the last line sets it to red.

textContent

The textContent is a readable and writable property that lets us set the textual content of an element and all its descendants. For example, given an empty p element:

<p></p>

We can set its text content to ‘foo’, by writing the following:

const p = document.querySelector('p')  
p.textContent = 'foo';

The DOM Node object methods are very useful for getting the parent, child and sibling elements. Most of the properties are read-only since they’re set somewhere else. For the properties that get all kinds of Node objects, we have to be careful not the wrong type of Node. This means that we can’t assume all Nodes are HTML elements.