JavaScript Search Array Methods

JavaScript Search Array Methods

·

4 min read

image.png


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 if NaN but indexOf/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 both indexof and lastIndexOf because equality === doesn't work for NaN.


image.png


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!!!


image.png