JavaScript Search Array Methods
Tags: javascript, webdev, tutorial, node
Published: 2021-03-02 03:06:50

[![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614698488590/3gkwVLLTc.png)](https://www.cssigniter.com/members/aff/go/belloosagienoah)

---
Methods like  `includes` `indexOf` `lastIndexOf` used on [string](https://techstack.hashnode.dev/javascript-strings) 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:

```js
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:

```js
const numbs = [ 5, 0, 2, 4, 2, 1, 4, 6, 0, 10 ];

console.log( numbs.indexOf(0) ); // 9
console.log( numbs.indexOf(0, 2) ); // 1
```

If both the `indexOf` and `lastIndexOf` items it returns `-1`.

```js
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:

```js
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:

```js
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](https://cdn.hashnode.com/res/hashnode/image/upload/v1614698732638/_6pDyVc_E.png)](https://www.sitepoint.com/?ref=osagiebello&utm_source=osagiebello)

---

#### *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:

```js
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:

```js
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:

```js
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.

```js
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:

```js
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 ]
```

```js
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](https://cdn.hashnode.com/res/hashnode/image/upload/v1614698420040/sX-UoxT7A.png)](https://www.buymeacoffee.com/techstackmedia)

---
<a href="https://www.konga.com/category/automotive-industrial-2051?utm_source=affiliates&utm_medium=web&utm_term=acquisition&utm_content=09_15_2020&utm_campaign=acquisition&amp;k_id=13694c12&amp;k_bid=7db94b70" rel="nofollow" target="_top"><img src="//konga.postaffiliatepro.com/accounts/default1/bo3dhla/7db94b70.jpg" alt="" title="" width="300" height="600" /></a><img style="border:0" src="https://konga.postaffiliatepro.com/scripts/io3dhla?k_id=13694c12&amp;k_bid=7db94b70" width="1" height="1" alt="" />