JavaScript Search & Access Array Methods — Complete Guide

Phase 4 — Arrays

Module 10.2 — Search & Access Array Methods

Searching and accessing data inside arrays is one of the most common operations in JavaScript. Whether you're building a shopping cart, filtering products, searching users, validating form data, or processing API responses, you'll use these methods daily.

In this module, you'll learn the most important array search and access methods used in modern JavaScript development.

Overview

at()

What is at()?

The at() method returns the element at the specified index.

Unlike bracket notation (array[index]), it also supports negative indexing, making it easy to access elements from the end of an array.

Syntax

javascriptCopy
1array.at(index)

Example

javascriptCopy
1const colors = [
2    "Red",
3    "Green",
4    "Blue"
5];
6
7console.log(colors.at(1));

Output

textCopy
1Green

Negative Index

javascriptCopy
1console.log(colors.at(-1));
2console.log(colors.at(-2));

Output

textCopy
1Blue
2Green

Traditional Way

javascriptCopy
1colors[colors.length - 1];

Using at(-1) is shorter and more readable.

includes()

Checks whether an array contains a specific value.

Returns true or false.

Syntax

javascriptCopy
1array.includes(value)

Example

javascriptCopy
1const fruits = [
2    "Apple",
3    "Banana",
4    "Orange"
5];
6
7console.log(
8    fruits.includes("Banana")
9);

Output

textCopy
1true

Not Found

javascriptCopy
1console.log(
2    fruits.includes("Mango")
3);

Output

textCopy
1false

Starting Position

javascriptCopy
1const numbers = [
2    10,
3    20,
4    30,
5    20
6];
7
8console.log(
9    numbers.includes(20,2)
10);

Output

textCopy
1true

The search starts from index 2.

indexOf()

Returns the first index where a value exists.

Returns -1 if not found.

Syntax

javascriptCopy
1array.indexOf(value)

Example

javascriptCopy
1const numbers = [
2    5,
3    10,
4    20,
5    10
6];
7
8console.log(
9    numbers.indexOf(10)
10);

Output

textCopy
11

Not Found

javascriptCopy
1console.log(
2    numbers.indexOf(100)
3);

Output

textCopy
1-1

Starting Index

javascriptCopy
1console.log(
2    numbers.indexOf(10,2)
3);

Output

textCopy
13

lastIndexOf()

Searches from the end of the array.

javascriptCopy
1const numbers = [
2    10,
3    20,
4    30,
5    20,
6    40
7];
8
9console.log(
10    numbers.lastIndexOf(20)
11);

Output

textCopy
13

Not Found

javascriptCopy
1numbers.lastIndexOf(100);

Output

textCopy
1-1

find()

Returns the first element that satisfies a condition.

Unlike includes() and indexOf(), find() works with objects.

Syntax

javascriptCopy
1array.find(callback)

Example

javascriptCopy
1const users = [
2
3    {
4        id:1,
5        name:"Rahul"
6    },
7
8    {
9        id:2,
10        name:"Ankit"
11    }
12
13];
14
15const user = users.find(
16    user => user.id === 2
17);
18
19console.log(user);

Output

javascriptCopy
1{
2    id:2,
3    name:"Ankit"
4}

Not Found

javascriptCopy
1const result = users.find(
2    user => user.id === 10
3);
4
5console.log(result);

Output

textCopy
1undefined

findIndex()

Returns the index of the first matching element.

javascriptCopy
1const users = [
2
3    {
4        id:1
5    },
6
7    {
8        id:2
9    }
10
11];
12
13const index = users.findIndex(
14    user => user.id === 2
15);
16
17console.log(index);

Output

textCopy
11

Not Found

javascriptCopy
1console.log(
2    users.findIndex(
3        user => user.id === 100
4    )
5);

Output

textCopy
1-1

findLast()

Introduced in ES2023.

Returns the last element matching a condition.

javascriptCopy
1const numbers = [
2    10,
3    25,
4    40,
5    60,
6    35
7];
8
9const result = numbers.findLast(
10    number => number > 30
11);
12
13console.log(result);

Output

textCopy
135

Because the search starts from the end.

findLastIndex()

Returns the index of the last matching element.

javascriptCopy
1const numbers = [
2    10,
3    25,
4    40,
5    60,
6    35
7];
8
9console.log(
10    numbers.findLastIndex(
11        number => number > 30
12    )
13);

Output

textCopy
14

Working with Objects

javascriptCopy
1const employees = [
2
3    {
4        id:101,
5        name:"Ankit"
6    },
7
8    {
9        id:102,
10        name:"Rahul"
11    },
12
13    {
14        id:103,
15        name:"Priya"
16    }
17
18];
19
20const employee = employees.find(
21    emp => emp.name === "Rahul"
22);
23
24console.log(employee);

Output

javascriptCopy
1{
2    id:102,
3    name:"Rahul"
4}

Search Methods Comparison

includes() vs indexOf()

javascriptCopy
1const colors = [
2    "Red",
3    "Blue",
4    "Green"
5];
6
7colors.includes("Blue");

Returns

textCopy
1true

javascriptCopy
1colors.indexOf("Blue");

Returns

textCopy
11

Use includes() when you only need to know whether a value exists.

Use indexOf() when you need its position.

find() vs filter()

javascriptCopy
1const products = [
2
3    {
4        price:500
5    },
6
7    {
8        price:900
9    },
10
11    {
12        price:1000
13    }
14
15];

javascriptCopy
1products.find(
2    p => p.price > 700
3);

Returns

javascriptCopy
1{
2    price:900
3}

javascriptCopy
1products.filter(
2    p => p.price > 700
3);

Returns

javascriptCopy
1[
2    {
3        price:900
4    },
5
6    {
7        price:1000
8    }
9]

find() returns one element.

filter() returns all matching elements.

Performance

Real-World Example — Product Search

javascriptCopy
1const products = [
2
3    {
4        id:1,
5        name:"Laptop",
6        stock:true
7    },
8
9    {
10        id:2,
11        name:"Mouse",
12        stock:false
13    },
14
15    {
16        id:3,
17        name:"Keyboard",
18        stock:true
19    }
20
21];
22
23const available = products.find(
24    product => product.stock
25);
26
27console.log(available);

Output

javascriptCopy
1{
2    id:1,
3    name:"Laptop",
4    stock:true
5}

Real-World Example — Login System

javascriptCopy
1const users = [
2    "Rahul",
3    "Ankit",
4    "Priya"
5];
6
7const username = "Ankit";
8
9if(users.includes(username)){
10
11    console.log("Login Successful");
12
13}else{
14
15    console.log("User Not Found");
16
17}

Output

textCopy
1Login Successful

Common Mistakes

Using indexOf() with Objects

javascriptCopy
1const user = {
2    id:1
3};
4
5const users = [
6    user
7];
8
9users.indexOf({
10    id:1
11});

Output

textCopy
1-1

Objects are compared by reference, not by value.

Use find() instead.

Forgetting find() Can Return undefined

javascriptCopy
1const product = products.find(
2    p => p.id === 100
3);
4
5console.log(product.name);

This throws an error because product is undefined.

Always check first:

javascriptCopy
1if(product){
2
3    console.log(product.name);
4
5}

Best Practices

• Use at(-1) instead of array[array.length - 1] for better readability.
• Use includes() when checking if a primitive value exists.
• Use find() to search arrays of objects.
• Use findIndex() when you need the position of an object.
• Prefer findLast() and findLastIndex() when searching from the end.
• Avoid using indexOf() for objects because it compares references.
• Always handle cases where find() returns undefined.

Mini Project — Employee Directory Search

index.html

htmlCopy
1<!DOCTYPE html>
2<html>
3<head>
4    <title>Employee Search</title>
5</head>
6<body>
7
8<h2>Employee Search</h2>
9
10<div id="output"></div>
11
12<script src="script.js"></script>
13
14</body>
15</html>

script.js

javascriptCopy
1const employees = [
2
3    {
4        id:101,
5        name:"Ankit",
6        department:"Engineering"
7    },
8
9    {
10        id:102,
11        name:"Rahul",
12        department:"HR"
13    },
14
15    {
16        id:103,
17        name:"Priya",
18        department:"Finance"
19    }
20
21];
22
23const employee = employees.find(
24    emp => emp.id === 102
25);
26
27const output = document.getElementById("output");
28
29if(employee){
30
31    output.innerHTML = `
32        <h3>${employee.name}</h3>
33        <p>ID : ${employee.id}</p>
34        <p>Department : ${employee.department}</p>
35    `;
36
37}else{
38
39    output.innerHTML = "<p>Employee Not Found</p>";
40
41}

Summary

In this module, you learned:

• How at() simplifies element access, especially with negative indexes.
• How includes() checks whether a value exists in an array.
• How indexOf() and lastIndexOf() locate the first and last occurrence of a value.
• How find() and findIndex() search arrays using custom conditions.
• How findLast() and findLastIndex() search from the end of an array (ES2023).
• The differences between searching primitive values and objects.
• Performance characteristics and best practices for each method.
• Real-world patterns for searching arrays in login systems, employee directories, and product catalogs.

Next Module: Module 10.3 — Iteration & Functional Array Methods, where you'll master forEach(), map(), filter(), reduce(), reduceRight(), every(), and some()—the most frequently used array methods in React, Next.js, Node.js, and professional JavaScript development.