Annapoorani Kadhiravan

Posted on Jun 26

Array Methods in JS - Part 2

#webdev #programming #productivity #tutorial

JavaScript Array Search Methods

What are Array Search Methods?

Array Search Methods are used to:

Find the position (index) of an element.
Check whether an element exists.
Retrieve an element that satisfies a condition.
Find the index of an element that matches a condition.
Search from the beginning or the end of an array.

Common Array Search Methods

Method	Purpose	Returns
`indexOf()`	Finds the first occurrence of a value	Index or `-1`
`lastIndexOf()`	Finds the last occurrence of a value	Index or `-1`
`includes()`	Checks whether a value exists	`true` / `false`
`find()`	Finds the first matching element	Element or `undefined`
`findIndex()`	Finds the index of the first matching element	Index or `-1`
`findLast()` (ES2023)	Finds the last matching element	Element or `undefined`
`findLastIndex()` (ES2023)	Finds the last matching index	Index or `-1`

1. Array.indexOf()

Definition

The indexOf() method searches an array for a specified value and returns the index of its first occurrence.

If the value is not found, it returns -1.

Syntax

array.indexOf(searchElement)

array.indexOf(searchElement, startIndex)

Parameters

Parameter	Description
`searchElement`	Value to search for
`startIndex` (optional)	Index where the search starts

Returns

Index of the first matching element.
-1 if not found.

Internal Working

Suppose:

let fruits = ["Apple", "Orange", "Mango", "Orange"];

Memory:

Index

0 → Apple
1 → Orange
2 → Mango
3 → Orange

When:

fruits.indexOf("Orange");

JavaScript starts from index 0:

Apple ❌
Orange ✅ Found

Stops immediately and returns:

Example

let fruits = ["Apple", "Orange", "Banana"];

console.log(fruits.indexOf("Orange"));

Output

Example - Not Found

let fruits = ["Apple", "Orange"];

console.log(fruits.indexOf("Mango"));

Output

-1

Example - Start Position

let fruits = ["Apple", "Orange", "Banana", "Orange"];

console.log(fruits.indexOf("Orange", 2));

Output

Real-Time Example

Suppose an e-commerce site wants to know whether a product category exists.

let categories = ["Mobiles", "Laptops", "TV"];

let position = categories.indexOf("Laptops");

console.log(position);

Output

Time Complexity [TBD]

Case	Complexity
Best	O(1)
Worst	O(n)

Common Mistake

if (arr.indexOf("Apple"))

Wrong.

If Apple is at index 0, JavaScript treats 0 as false.

Correct:

if (arr.indexOf("Apple") !== -1)

Interview Questions

Q. What does indexOf() return if the value is not found?

-1

2. Array.lastIndexOf()

Definition

The lastIndexOf() method searches from the end of the array and returns the last matching index.

Syntax

array.lastIndexOf(searchElement)

array.lastIndexOf(searchElement, fromIndex)

Parameters

Parameter	Description
`searchElement`	Value to search
`fromIndex` (optional)	Index to start searching backward

Returns

Last matching index or -1.

Internal Working

let colors = ["Red", "Blue", "Green", "Blue"];

Memory:

0 → Red
1 → Blue
2 → Green
3 → Blue

JavaScript starts from the last index:

Blue ✅

Returns:

Example

let colors = ["Red", "Blue", "Green", "Blue"];

console.log(colors.lastIndexOf("Blue"));

Output

Real-Time Example

Suppose a browser stores recently visited pages.

let history = ["Home", "Products", "Cart", "Products"];

console.log(history.lastIndexOf("Products"));

Output

Time Complexity

O(n)

Best Practice

Use lastIndexOf() when duplicate values exist and you need the most recent occurrence.

3. Array.includes()

Definition

The includes() method checks whether a value exists in an array.

It returns:

true
false

Unlike indexOf(), you don't have to compare with -1.

Syntax

array.includes(value)

array.includes(value, startIndex)

Parameters

Parameter	Description
`value`	Value to search
`startIndex` (optional)	Starting position

Returns

Boolean

Internal Working

Suppose:

let skills = ["HTML", "CSS", "JavaScript"];

JavaScript compares each element.

If found:

true

Else:

false

Example

let skills = ["HTML", "CSS", "JavaScript"];

console.log(skills.includes("CSS"));

Output

true

Example

console.log(skills.includes("Python"));

Output

false

Real-Time Example

Netflix Premium Features

let features = ["4K", "HDR", "Offline Download"];

if (features.includes("HDR")) {
    console.log("HDR Supported");
}

Output

HDR Supported

Time Complexity

O(n)

Common Mistake

Using:

indexOf() != -1

instead of

includes()

includes() is more readable when you only need to know whether the value exists.

Interview Question

Which is better?

includes()

indexOf()

Use:

includes() → existence check.
indexOf() → position required.

4. Array.find()

Definition

The find() method returns the first element that satisfies a given condition.

If no element matches, it returns undefined.

Syntax

array.find(callback)

array.find(callback, thisArg)

Callback Parameters

(element, index, array)

Parameter	Description
`element`	Current element
`index`	Current index
`array`	Original array

Returns

Matching element or undefined.

Internal Working

Suppose:

let numbers = [10, 25, 30, 40];

Callback:

num > 20

JavaScript checks:

10 ❌
25 ✅

Stops immediately.

Returns:

Example

let numbers = [10, 25, 30, 40];

let result = numbers.find(num => num > 20);

console.log(result);

Output

Real-Time Example

Find the first student who scored above 90.

let marks = [65, 72, 95, 88];

let topper = marks.find(mark => mark > 90);

console.log(topper);

Output

Time Complexity

O(n)

Common Mistake

find() returns the element, not its index.

Interview Question

Difference between find() and filter()?

find() → first matching element.
filter() → all matching elements.

5. Array.findIndex()

Definition

Returns the index of the first element satisfying the condition.

If not found:

-1

Syntax

array.findIndex(callback)

Example

let ages = [15, 18, 25, 40];

console.log(ages.findIndex(age => age >= 18));

Output

Real-Time Example

Locate the first pending order.

let orders = [
    { id: 1, status: "Completed" },
    { id: 2, status: "Pending" },
    { id: 3, status: "Pending" }
];

let index = orders.findIndex(order => order.status === "Pending");

console.log(index);

Output

Time Complexity

O(n)

6. Array.findLast() (ES2023)

Definition

Returns the last element that satisfies a condition.

Syntax

array.findLast(callback)

Example

let numbers = [12, 18, 25, 30];

let result = numbers.findLast(num => num > 20);

console.log(result);

Output

Real-Time Example

Find the latest completed transaction.

let transactions = [
    { id: 1, status: "Pending" },
    { id: 2, status: "Completed" },
    { id: 3, status: "Completed" }
];

let latest = transactions.findLast(t => t.status === "Completed");

console.log(latest);

Output

{ id: 3, status: "Completed" }

Time Complexity

O(n)

7. Array.findLastIndex() (ES2023)

Definition

Returns the index of the last matching element.

Syntax

array.findLastIndex(callback)

Example

let numbers = [5, 15, 25, 35];

console.log(numbers.findLastIndex(num => num > 20));

Output

Real-Time Example

Find the index of the last product that is out of stock.

let products = [
    { name: "Laptop", stock: 5 },
    { name: "Mouse", stock: 0 },
    { name: "Keyboard", stock: 10 },
    { name: "Monitor", stock: 0 }
];

let index = products.findLastIndex(product => product.stock === 0);

console.log(index);

Output

Time Complexity

O(n)

Summary Comparison

Method	Returns	Search Direction	Callback Required	Modifies Array
`indexOf()`	First matching index	Left → Right	❌	❌
`lastIndexOf()`	Last matching index	Right → Left	❌	❌
`includes()`	`true` / `false`	Left → Right	❌	❌
`find()`	First matching element	Left → Right	✅	❌
`findIndex()`	First matching index	Left → Right	✅	❌
`findLast()`	Last matching element	Right → Left	✅	❌
`findLastIndex()`	Last matching index	Right → Left	✅	❌

Tips

Use includes() when you only need to check if a value exists.
Use indexOf() or lastIndexOf() when you need the position of a primitive value.
Use find() or findIndex() for arrays of objects or custom conditions.
Use findLast() and findLastIndex() (ES2023) when you need to search from the end without reversing the array.
Remember that indexOf() and includes() use strict equality (===) for comparison, so searching for objects compares references, not object contents.

References:
https://www.w3schools.com/js/js_array_search.asp