Array Searching & Sorting in JavaScript

Arrays in JavaScript often contain large sets of data like a list of numbers, names, or objects. To make the most of this data, you’ll frequently need to search for a specific item or sort items into a useful order.

Searching in Arrays

Array searching allows you to find specific elements within an array. Let’s explore two powerful methods to do this:

1. find()

The find() method returns the first element in an array that satisfies a provided testing function. It’s ideal for finding an object or value based on a condition.

Syntax

array.find(callback(element[, index[, array]])[, thisArg])

The callbackFunction accepts three arguments:

• currentValue: The current element being processed.
• index: The index of the current element.
• array: The array that find() was called on.
• thisArg (optional): Value to use as this in the callback.

Now let's understand this with the help of example

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

const user = users.find(user => user.id === 2);
console.log(user); 

Output

{ id: 2, name: 'Bob' }

In this example

• Array users contains objects with id and name.
• find() is used to search for the user with id equal to 2.
• The callback checks if user.id === 2.
• It returns the first match, which is { id: 2, name: 'Bob' }.

2. findIndex()

The findIndex() method returns the index of the first element that satisfies the testing function, or -1 if no element is found.

Syntax

array.findIndex(callback(element[, index[, array]])[, thisArg])

In the above syntax

• findIndex(): Finds the index of the first element that satisfies the condition.
• callback: Checks each element in the array.
• Returns the index of the first match, or -1 if no match is found.

Now let's understand this with the help of example

const numbers = [10, 20, 30, 40];
const index = numbers.findIndex(num => num > 25);
console.log(index);

Output

2

In this example

• Array: numbers = [10, 20, 30, 40]
• findIndex(): Finds the index of the first number greater than 25.
• Callback: num => num > 25 checks each number.
• It returns the index of the first number that is greater than 25, which is 30 at index 2.

3. includes()

The includes() method checks if an array contains a specific value, returning true or false.

Syntax

array.includes(valueToFind[, fromIndex])

In the above syntax

• valueToFind: The value you're checking for.
• fromIndex (optional): Index to start the search from.
• Returns true if found, false if not.

Now let's understand this with the help of example

const fruits = ['apple', 'banana', 'orange'];
console.log(fruits.includes('banana')); 
console.log(fruits.includes('grape'));

Output

true
false

In this example

• fruits.includes('banana'): Checks if 'banana' is in the array. Returns true.
• fruits.includes('grape'): Checks if 'grape' is in the array. Returns false.

4. indexOf()

The indexOf() method returns the first index of a specified value, or -1 if the value is not found.

Syntax

array.indexOf(searchElement[, fromIndex])

In the above syntax

• searchElement: The item you're searching for in the array.
• fromIndex (optional): The index to start the search from. Default is 0.
• The index of the first occurrence of searchElement.
• Returns -1 if the element is not found.

Now let's understand this with the help of example

const colors = ['red', 'blue', 'green', 'blue'];
console.log(colors.indexOf('blue'));
console.log(colors.indexOf('yellow')); 

Output

1
-1

In this example

• colors.indexOf('blue'): Searches for 'blue' in the array. Returns 1 (first occurrence at index 1).
• colors.indexOf('yellow'): Searches for 'yellow' in the array.Returns -1 (not found).

Array Sorting in JavaScript

Just like searching helps retrieve data, sorting allows you to organize array elements to make them easier to read, compare, or manipulate. JavaScript’s primary method for sorting is sort(), with additional utilities like toSorted() (introduced in ES2023) for immutable sorting.

1. sort()

The sort() method sorts an array in place, modifying the original array. By default, it sorts elements as strings, but you can provide a comparison function for custom sorting.

Syntax

array.sort([compareFunction])

In the above syntax

• array.sort(): Sorts the elements of the array in place.
• compareFunction (optional): A function that defines the sort order. If not provided, the array elements are sorted as strings (lexicographically).
• Returns: The sorted array.

Now let's understand this with the help of example

const numbers = [100, 5, 20, 10];
numbers.sort((a, b) => a - b); // Ascending order
console.log(numbers); 

In this example

• numbers.sort((a, b) => a - b): Sorts the numbers array in ascending order using the compareFunction (a, b) => a - b.
• Result: The array becomes [5, 10, 20, 100] after sorting.
• console.log(numbers): Logs the sorted array: [5, 10, 20, 100].

2. toSorted()

The toSorted() method (ES2023) returns a new sorted array, leaving the original array unchanged.

Syntax

array.toSorted([compareFunction])

In this syntax

• array.toSorted(): Creates a new sorted array without modifying the original array.
• compareFunction (optional): A function used to define the sort order. If not provided, it sorts in ascending order (as strings).
• Returns: A new array sorted based on the compareFunction.

Now let's understand this with the help of example

const numbers = [100, 5, 20, 10];
const sortedNumbers = numbers.toSorted((a, b) => a - b);
console.log(sortedNumbers); 
console.log(numbers); 

Output

[5, 10, 20, 100]
[100, 5, 20, 10]

In this example

• numbers.toSorted((a, b) => a - b): Sorts the numbers array in ascending order (from smallest to largest). Returns a new sorted array: [5, 10, 20, 100].
• console.log(sortedNumbers): Logs the sorted array: [5, 10, 20, 100].
• console.log(numbers): Logs the original array, which remains unchanged: [100, 5, 20, 10].

toSorted() is a recent addition (ES2023) and may not be supported in older browsers.