JavaScript Arrays

Array Search

indexOf()

The indexOf() method searches an array for an element value and returns its position.

Note: The first item has position 0, the second item has position 1, and so on.

Example Search an array for the item "Apple":

const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1;

A second argument (start may be added and tells where to start the search. Negative values will start at the given position counting from the end, and search to the end.

Array.indexOf(ITEM) returns -1 if the item is not found.

(If the item is present more than once, it returns the position of the first occurrence.)

lastIndexOf()

Array.lastIndexOf() is the same as Array.indexOf(), but returns the position of the last occurrence of the specified element.

includes()

ECMAScript 2016 introduced Array.includes() to arrays. This allows us to check if an element is present in an array (including NaN, unlike indexOf).

const fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.includes("Mango"); // is true

find(`test-function`)

The find() method returns the value of the first array element that passes a test function.

This example finds (returns the value of) the first element that is larger than 18:

const numbers = [4, 9, 16, 25, 29];
let first = numbers.find(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

Note that the function takes 3 arguments:

The item value
The item index
The array itself

findIndex()

The findIndex() method returns the index of the first array element that passes a test function.

This example finds the index of the first element that is larger than 18:

const numbers = [4, 9, 16, 25, 29];
let first = numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

Note that the function takes 3 arguments:

The item value
The item index
The array itself

findLast()

ES2023 added the findLast() method that will start from the end of an array and return the value of the first element that satisfies a condition.

findLastIndex()

The findLastIndex() method finds the index of the last element that satisfies a condition.

const temp = [27, 28, 30, 40, 42, 35, 30];
let pos = temp.findLastIndex(x => x > 40);

Array Iterations

Many of the iteration functions take 3 arguments:

The item value
The item index
The array itself

Functions Array.filter(), Array.map(), and Array.reduce() are discussed elsewhere.

`forEach()`

The forEach() method calls a function (a callback function) once for each array element. Example:

const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);

function myFunction(value, index, array) {
  txt += value + "<br/>";
}

The example above uses only the value parameter. The example can be rewritten to:

const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);

function myFunction(value) {
  txt += value + "<br/>";
}

`Array.every()`

The every(value, index, array) method checks if all array values pass a test.

This example checks if all array values are larger than 18:

const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

`Array.some`

Array.some(f) is analogous to Array.every(f). It will return true if any of the array's elements fulfill a condition.

Here is an example

const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

`Array.from()`

The Array.from() method returns an Array object from:

Any iterable object
Any object with a length property

Example Create an Array from a String:

let text = "ABCDEFG";
Array.from(text);

Array.from() has an optional parameter which allows you to execute a function on each element of the new array.

Example: Create an Array from an Array:

const myNumbers = [1,2,3,4];
const myArr = Array.from(myNumbers, (x) => x * 2);

JavaScript Sparse Arrays

A sparse array is one in which the elements are not sequential, and they don't always start at 0. They are essentially Arrays with "holes", or gaps in the sequence of their indices.

So an example would be:

let array = [];
array[100] = "Holes now exist";
array.length // 101, but only 1 element

Normally, the length property of an Array accurately returns the number of elements in the array, but in sparse arrays they don't. If the array is sparse, the value of the length property is greater than the number of elements.

This behaviour is possible because Arrays under the hood in JavaScript are Objects. Their keys are numbers, and their values are the elements.

The length property on an Array takes the last element's index and adds one. So if you have an array with holes between index 0 through 100, and an element at index 101, the length will return 101, as it's the last index + 1.

How to Create a Sparse Array

Use the Array object

let array = new Array(10); // array initialized with no elements
array.length // 10

Insert a key/value at a certain index

array[1000] = 0; // Assignment adds one element
array.length // But .length returns 1001

Use the delete operator

let array = [1, 2, 3, 4, 5]
delete array[0]
array.length // .length returns 5

Initialize an Array with holes

[,,,,] // You have created an array with nothing but holes
[1,2,3,4,,5] // Oh no, you mistyped a comma and entered a hole between 4 and 5!