Skip to main content

JS Array

Methods​

length ⭐️​

The length property returns the length (size) of an array:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let size = fruits.length;
console.log('size: ', 4); // result: size: 4

toString()​

The JavaScript method toString() converts an array to a string of (comma separated) array values.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.toString()) // result: Banana,Orange,Apple,Mango

at()​

ES2022 intoduced the array method at():

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.at(2); // result: Apple

Too redundant for me, I prefer using fruits[2];

join() ⭐️​

The join() method also joins all array elements into a string.

It behaves just like toString(), but in addition you can specify the separator:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.join(" * ")); // result: Banana * Orange * Apple * Mango

pop()​

The pop() method removes the last element from an array:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.pop();
console.log(fruit); // Mango
console.log(fruits); // ["Banana", "Orange", "Apple"]

push() ⭐️​

The push() method adds a new element to an array (at the end):

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");

more on W3 Schools

indexOf()​

const fruits = ["Apple", "Orange", "Apple", "Mango"];
let index = fruits.indexOf("Apple"); // result: 0 -> first index

lastIndexOf()​

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

more on W3 Schools

Sort​

more on W3 Schools

Iteration​

forEach​

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

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

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

map() ⭐️​

The map() method creates a new array by performing a function on each array element.

The map() method does not execute the function for array elements without values.

The map() method does not change the original array.

This example multiplies each array value by 2:

const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);

function myFunction(value, index, array) {
  return value * 2;
}

flatMap()​

ES2019 added the Array flatMap() method to JavaScript.

The flatMap() method first maps all elements of an array and then creates a new array by flattening the array.

const myArr = [1, 2, 3, 4, 5, 6];
const newArr = myArr.flatMap((x) => x * 2);

filter() ⭐️​

The filter() method creates a new array with array elements that pass a test.

This example creates a new array from elements with a value larger than 18:

const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);

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

reduce() ⭐️​

The reduce() method runs a function on each array element to produce (reduce it to) a single value.

The reduce() method works from left-to-right in the array. See also reduceRight().

The reduce() method does not reduce the original array.

This example finds the sum of all numbers in an array:

Example
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction); // 99

function myFunction(total, value, index, array) {
  return total + value;
}

reduceRight() ⭐️​

Different from reduce(): it works from right-to-left in the array

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction); // 99

function myFunction(total, value, index, array) {
  return total + value;
}

every()​

The every() 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); // false

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

some()​

The some() method checks if some array values pass a test.

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

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

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

more on W3 Schools

Const​

more on W3 Schools