Methods like includes
indexOf
lastIndexOf
used on string are also used on arrays to search its items.
indexOf, lastIndexOf, and includes methods
indexOf method
The indexOf
method has its syntax shown below:
Syntax
array.indexOf(item[, from])
The search is from left to right.
item
=> The item
is an element in the array.
from
=> The from
specifies where to start the counting. It ignores the matching item before it.
See the example below:
const numbs = [ 5, 0, 2, 4, 2, 1, 4, 6, 0, 10 ];
console.log( numbs.indexOf(0) ); // 1
console.log( numbs.indexOf(0, 2) ); // 8
lastIndexOf method
The lastIndexOf
method has its syntax shown below:
Syntax
array.lastIndexOf(item[, from])
The search is from right to left.
item
=> The item
is an element in the array.
from
=> The from
specifies where to start the counting. It ignores the matching item before it.
See the example below:
const numbs = [ 5, 0, 2, 4, 2, 1, 4, 6, 0, 10 ];
console.log( numbs.indexOf(0) ); // 8
console.log( numbs.indexOf(0, 2) ); // 1
If both the indexOf
and lastIndexOf
items it returns -1
.
const numbs = [ 5, 0, 2, 4, 2, 1, 4, 6, 0, 0 ];
console.log( numbs.indexOf(9) ); // -1
console.log( numbs.lastIndexOf(9) ); // -1
includes method
The includes
method has its syntax shown below:
Syntax
array.includes(item)
item
=> If the item
exist it returns true
, false
otherwise
See the example below:
const numbs = [ 5, 0, 2, 4, 2, 1, 4, 6, 0, 10 ];
console.log( numbs.includes(4) ); // true
console.log( numbs.includes(3) ); // false
includes
method can also check ifNaN
butindexOf/lastIndexOf
can't.
See the example below:
const numbs = [ 5, 0, 2, 4, NaN, 1, 4, 6, 0, NaN ];
console.log( numbs.indexOf(NaN, 2) ); // -1
console.log( numbs.lastIndexOf(NaN, 2) ); // -1
console.log( numbs.includes(NaN) ); // true
-1
is returned for bothindexof
andlastIndexOf
because equality===
doesn't work forNaN
.
find and findIndex methods
The find
method finds an object with a specific condition.
The find
method has its syntax shown below:
Syntax
array.find(func)
func
=> func
is a callback function
It returns the first matching item in an array
See the example below:
const numbs = [ 5, 0, 2, 4, 2, 1, 4, 6, 0, 10 ];
const greaterThan3 = num => {
return num > 3;
};
numbs.find(greaterThan3); // 5 => 5 is greater than 3
findIndex
The findIndex
method has its syntax shown below:
array.findIndex(function)
It returns the index of the first matching item in an array.
See the example below:
const numbs = [ 5, 0, 2, 4, 2, 1, 4, 6, 0, 10 ];
const greaterThan3 = num => {
return num > 3;
};
numbs.findIndex(greaterThan3); // 0 => 5 is at index 0
Since functions are first-class objects, we can have an object in place of the callback function func
.
See the syntax below:
array.find(obj)
See the example below:
const names = [
{ id: 1, name: "Bello" },
{ id: 2, name: "John" },
{ id: 3, name: "Sarah" }
];
const id2 = item => {
return item.id === 2;
};
const findName = names.find(id2);
findName.name;
See another example but with the findIndex
method.
const names = [
{ id: 1, name: "Bello" },
{ id: 2, name: "John" },
{ id: 3, name: "Sarah" }
];
const id2 = item => {
return item.id === 2;
};
const findName = names.findIndex(id2);
findName; // 2 => returns index of item.id
General syntax of find and findIndex methods
The general syntax is shown below:
arr.find(func(item[, index[, array]]))
filter method
The syntax is similar to find
, but filter
returns an array of all matching elements:
The find
method has its syntax shown below:
Syntax
array.filter(func)
func
=> func
is a callback function
See the examples below:
const numbs = [ 5, 0, 2, 4, 2, 1, 4, 6, 0, 10 ];
const greaterThan3 = num => {
return num > 3;
};
numbs.filter(greaterThan3); // [ 5, 4, 4, 6, 10 ]
const names = [
{ id: 1, name: "Bello" },
{ id: 2, name: "John" },
{ id: 3, name: "Sarah" }
];
const id2 = item => {
return item.id > 2;
};
const findNames = names.filter(id2);
findNames; // [ { id: 2, name: 'John' }, { id: 3, name: 'Sarah' } ]
The general syntax is shown below:
array.filter(func(item[, index[, array]]))
Happy coding!!!