Arrays in JavaScript: A Cheat sheet for a developer

In JavaScript, an array is a collection of values or elements, stored in a single variable. Arrays can hold values of any data type, including numbers, strings, booleans, and objects.

const fruits = ["mango","orange","peach","apple"];

Here, fruits is an array which is storing 4 values.

Create an Array

Initializing the array explicitly

This involves manually specifying the elements of the array as a comma-separated list enclosed in square brackets.

const cars = "mango","orange","peach","apple"] 

Using the Array() constructor

This involves creating an Array with built in Array() constructor

const fruits = Array.of("mango","orange","peach","apple");
console.log(fruits); // ["mango","orange","peach","apple"];

Array.of()

This involves using the Array.of() method. This method takes in a number of argument and create a new array instance.

const fruits = Array.of("mango","orange","peach","apple");
console.log(fruits); // ["mango","orange","peach","apple"]

Array Length

We can find the length of an Array by accessing the length property

const fruits = ["mango","orange","peach","apple"];
console.log(fruits.length); // 4

Accessing the value of an Array

We can access the value of Array by referring to the index number of the item in a square bracket

const fruits = ["mango","orange","peach","apple"];

//first element
console.log(fruits[0]); // mango

//second element
console.log(fruits[1]); //orange

Adding an element to an Array

Array.push()

The push() method adds one or more elements to the end of an array

const fruits = ["mango","orange","peach","apple"];
fruits.push("banana","grape");
console.log(fruits); 
//["mango","orange","peach","apple","banana","grape"];

Array.unshift()

The unshift() method adds one or more elements to the start of an array

const fruits = ["mango","orange","peach","apple"];
fruits.unshift("banana","grape");
console.log(fruits); 
//["banana","grape","mango","orange","peach","apple"];

Removing an element from an Array

Array.pop()

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

const fruits = ["mango","orange","peach","apple"];
fruits.pop();
console.log(fruits); 
//["mango","orange","peach"];

Array.unshift()

The shift() method removes the first element of an array

const fruits = ["mango","orange","peach","apple"];
fruits.shift();
console.log(fruits); 
//["orange","peach","apple"];

Array Methods

There are various method provided by an array.Lets understand and learn how to use them.

Array.concat()

The concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.

const fruits1 = ["mango","orange"];
const fruits2 = ["peach","apple"];
const fruits3 = fruits1.concat(fruits2);
console.log(fruits3); 
//["mango","orange","peach","apple"];

Array.map()

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

const fruits = ["mango","orange","peach","apple"];
fruits.map((fruit) => fruit);
//["mango","orange","peach","apple"]

const numbers = [5,10,15,20];
numbers.map((number) => number * 2);
//[10,20,30,40]

Array.filter()

The filter() method is used to create a new array from a given array consisting of only those elements from the given array which satisfy a condition set by the argument method.

const fruits = ["mango","orange","mango","apple"];
fruits.filter((fruit) => fruit.length > 5);
//["orange"]

Array.find()

The find() method is used to get the value of the first element in the array that satisfies the provided condition if the condition is not satisfied it returns undefined.

const fruits = ["mango","orange","peach","apple"];
fruits.find((fruit) => fruit); //["mango"]

fruits.find((fruit) => "strawberry"); // undefined

const numbers = [5,10,15,20];
numbers.find((number) => number > 15); // 20

Array.findIndex()

The findIndex() method returns the index of the first element in an array that satisfies the provided testing function. If no elements satisfy the testing function, -1 is returned.

const fruits = ["mango","orange","peach","apple"];
fruits.findIndex((fruit) => fruit.length === 6); 
// 1
//Since the value returned is orange and the 
//position of orange is 1 in the fruits array

Array.findLast()

The findLast() method iterates the array in reverse order and returns the value of the first element that satisfies the provided testing function. If no elements satisfy the testing function, undefined is returned.

const fruits = ["mango","orange","peach","apple"];
fruits.findLast((fruit) => fruit.length === 5); 
// apple

const fruits = ["mango","orange","peach","apple"];
fruits.findLast((fruit) => fruit.length === 7); 
// undefined

Array.findLastIndex()

The findLastIndex() method iterates the array in reverse order and returns the index of the first element that satisfies the provided testing function. If no elements satisfy the testing function, -1 is returned.

const fruits = ["mango","orange","peach","apple"];
fruits.findLastIndex((fruit) => fruit.length === 5); 
// 3
//Since the value returned is apple and the 
//position of orange is 1 in the fruits array

const fruits = ["mango","orange","peach","apple"];
fruits.findLastIndex((fruit) => fruit.length === 7); 
// -1

Array.flat()

The flat() method is used to flatten a nested array into a single, one-dimensional array. This method returns a new array with all sub-array elements concatenated into it recursively up to the specified depth.

const fruits = ["mango","orange",["peach","apple"]];
fruits.flat(); 
// ["mango","orange","peach","apple"]

const fruits = ["mango","orange",[[[["peach","apple"]]]]];
fruits.flat(2); 
//["mango","orange",[["peach","apple"]]];

const fruits = ["mango","orange",[[[["peach","apple"]]]]];
fruits.flat(4); 
//["mango","orange","peach","apple"];

Array.flatMap()

The flatMap() method is used to both maps and flattens an array. It takes a callback function as an argument, which is applied to each element of the array, and returns a new array with the resulting values flattened into a single, one-dimensional array.

const fruits = ["mango","orange",["peach","apple"]];
fruits.flatMap((fruit) => fruit);
//["mango","orange","peach","apple"]

Note: The difference between flat() and flatMap() is that
flat() takes a depth parameter that specifies the depth to which the nested arrays should be flattened.
Whereas flatMap() flattens the result into a single, one-dimensional array.

Array.includes()

The includes() method allows you to check if an array includes a specific value. It returns a boolean value true if the array contains the specified value, and false otherwise.

const fruits = ["mango","orange","peach","apple"];
fruits.includes("orange");
//true

const fruits = ["mango","orange","peach","apple"];
fruits.includes("banana");
//false

Array.every()

The every() method checks whether all the elements in an array pass a particular test implemented by a provided function. The method returns a boolean value true if all the elements pass the test, and false otherwise.

const fruits = ["mango","orange","peach","apple"];
fruits.every((fruit) => fruit.length > 4);
//true

const fruits = ["mango","orange","peach","apple"];
fruits.every((fruit) => fruit.length > 8);
//false

Array.some()

The some() method checks whether at least one element in an array passes a particular test implemented by a provided function. The method returns a boolean value true if at least one element passes the test, and false otherwise.

const fruits = ["mango","orange","peach","apple"];
fruits.some((fruit) => fruit.length >= 6);
//true

const fruits = ["mango","orange","peach","apple"];
fruits.some((fruit) => fruit.length >= 7);
//false

Array.splice()

The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

//Removing Elements
const fruits = ["mango","orange","peach","apple"];
fruits.splice(1, 1); // Removes the element at index 1 (banana)
// ["mango", "peach", "apple"]

// Adding elements
const fruits = ["mango","orange","peach","apple"];
fruits.splice(1, 0, "blueberry", "kiwi"); // Adds "blueberry", "kiwi" at index 1
// ["mango","blueberry","kiwi","orange","peach","apple"];

// Replacing elements
const fruits = ["mango","orange","peach","apple"];
fruits.splice(2, 1, 'kiwi'); // Replaces the element at index 2 (peach) with 'kiwi'
// ["mango", "orange", "kiwi", "apple]

Array.slice()

The slice() method returns a shallow copy of a portion of an array into a new array object selected from begin to end (end not included). The original array will not be modified.

const fruits = ["mango","orange","peach","apple"];
fruits.slice(2);
// ["peach","apple"]

const fruits = ["mango","orange","peach","apple"];
fruits.slice(1,3);
// ["orange","peach"]

Array.fill()

The fill() method fills the elements in an array with a static value.

const fruits = ["mango","orange","peach","apple"];
fruits.fill("kiwi");
// ["kiwi","kiwi","kiwi","kiwi"]

Array.reverse()

The reverse() method reverses an array in place and returns the reference to the same array, the first array element now becoming the last, and the last array element becoming the first. In other words, elements order in the array will be turned towards the direction opposite to that previously stated.

const fruits = ["mango","orange","peach","apple"];
fruits.reverse();
// ["apple","peach","orange","mango"]

Array.sort()

The sort() method sorts the elements of an array in place and returns the array. The default sort order is according to string Unicode code points.

const fruits = ["mango","orange","peach","apple"];
fruits.sort();
// ["apple","mango","orange","peach"]

Array.toString()

The toString() method returns a string representation of the array by converting each element to a string and joining them together with commas

const fruits = ["mango","orange","peach","apple"];
fruits.toString();
// "apple, mango, orange, peach"