JavaScript Arrays Simplified

Most important Array Methods Based on Their Use Cases :

I find this cheat-sheet easy to remember and use, for beginners the array methods can be sometimes overwhelming, but have a look to this, I am sure you will get a lot of confidence just by organizing the array methods based on their use cases. The same can be done for the string methods as well.

Array Methods, Based on the usage with Examples :

Finding Array Index

• Based on Value .indexOf

const array = [2, 9, 9];
console.log(array.indexOf(2)); // Output: 0
console.log(array.indexOf(7)); // Output: -1

• Based on test condition .findIndex

const array = [5, 12, 8, 130, 44];
const foundIndex = array.findIndex(element => element > 10);
console.log(foundIndex); // Output: 1

Finding an Array element

Based on test condition .find

const array = [5, 12, 8, 130, 44];
const found = array.find(element => element > 10);
console.log(found); // Output: 12

To know if Array Includes :

Based on value: .includes

const array = [1, 2, 3];
console.log(array.includes(2)); // Output: true
console.log(array.includes(4)); // Output: false

Based on test condition .some, .every :

• The some method tests whether at least one element in the array passes the test implemented by the provided function.

const array = [1, 2, 3, 4, 5];
const even = (element) => element % 2 === 0;
console.log(array.some(even)); // Output: true

• The every method tests whether all elements in the array pass the test implemented by the provided function.

const array = [2, 4, 6, 8, 10];
const even = (element) => element % 2 === 0;
console.log(array.every(even)); // Output: true

To transform to new value:

Based on accumulator .reduce : This will boils down an Array of any single type : string, Boolean, number or even new Array or an Object.

const array = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;
console.log(array.reduce(reducer)); // Output: 10

based on separator string .join:

const elements = ['Fire', 'Wind', 'Rain'];
console.log(elements.join()); // Output: "Fire,Wind,Rain"
console.log(elements.join('-')); // Output: "Fire-Wind-Rain"

To loop Over

Based on callback .forEach This does not create new array just loop over the elements.

const array = ['a', 'b', 'c'];
array.forEach(element => console.log(element));
// Output:
// a
// b
// c

To mutate original array

To add to original Array : .push(end) and .unshift (start) :

• The push method appends one or more elements to the end of an array and returns the new length of the array.
  

  const fruits = ['apple', 'banana'];
  fruits.push('orange', 'mango');
  console.log(fruits); // Output: ['apple', 'banana', 'orange', 'mango']
  

• The unshift method adds one or more elements to the beginning of an array and returns the new length of the array.
  

const fruits = ['apple', 'banana'];
fruits.unshift('orange', 'mango');
console.log(fruits); // Output: ['orange', 'mango', 'apple', 'banana']

To remove from original Array : .pop(end) .shift(start) .splice(any):

• The pop method removes the last element from an array and returns that element.

const fruits = ['apple', 'banana', 'orange'];
const lastFruit = fruits.pop();
console.log(lastFruit); // Output: 'orange'
console.log(fruits); // Output: ['apple', 'banana']

• The shift method removes the first element from an array and returns that element.

const fruits = ['apple', 'banana', 'orange'];
const firstFruit = fruits.shift();
console.log(firstFruit); // Output: 'apple'
console.log(fruits); // Output: ['banana', 'orange']

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

const fruits = ['apple', 'banana', 'orange', 'mango'];
fruits.splice(2, 1, 'cherry', 'pineapple');
console.log(fruits); // Output: ['apple', 'banana', 'cherry', 'pineapple', 'mango']

Some of other methods mostly used are : .reverse , .sort, .fill:

• The reverse method reverses the order of the elements in an array in place.

const array = [1, 2, 3, 4, 5];
array.reverse();
console.log(array); // Output: [5, 4, 3, 2, 1]

• The sort method sorts the elements of an array in place and returns the sorted array.

const array = [5, 2, 1, 4, 3];
array.sort();
console.log(array); // Output: [1, 2, 3, 4, 5]

• The fill method fills all the elements of an array from a start index to an end index with a static value.

const array = [1, 2, 3, 4, 5];
array.fill(0, 2, 4);
console.log(array); // Output: [1, 2, 0, 0, 5]

Creates a new Array

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

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((num) => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8, 10]

The filter method creates a new array with all elements that pass the test implemented by the provided function

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]

The slice method in JavaScript 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 = ['apple', 'banana', 'cherry', 'date', 'grape'];
// Extracting a portion of an array
const citrus = fruits.slice(2, 4);

console.log(citrus); // Output: ['cherry', 'date']
console.log(fruits); // Output: ['apple', 'banana', 'cherry', 'date', 'grape']

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 array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const newArray = array1.concat(array2);
console.log(newArray); // Output: [1, 2, 3, 4, 5, 6]

The flat method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.

const array = [1, 2, [3, 4, [5, 6]]];
const flatArray = array.flat(2);
console.log(flatArray); // Output: [1, 2, 3, 4, 5, 6]

The flatMap method first maps each element using a mapping function, then flattens the result into a new array.

const array = [1, 2, 3, 4];
const mappedArray = array.flatMap(x => [x * 2]);
console.log(mappedArray); // Output: [2, 4, 6, 8]

Comments

[Eckehard]

Your cheat-sheet is really helpful!

Maybe you could add some common helpful patterns where arrays are used:

String replace with split and join

   const s = "This is a string"
   let t = s.split(' ').join('-');

   // t = "This-is-a-string"

Convert string to array of char

   const s = "Hello"
   let t = s.split('');

   // s =>  ["H","e","l","l","o"]

There are possibly more workaround like this.

[Tanmay Agrawal]

Thanks for the feedback, I will make one post on JS string Methods, on that I will try to make more patterns, Feel free to collaborate with me :)

[Eckehard]

We should build a library of cheat-sheets, as there are so man aspects on Javascript that are confusing.

See this post for curiosity: "The magic function"

[Rick Delpo]

I really like your cheat-sheet because it well organizes various array methods to be ultimately used to transform an array into values.

I thought your readers might like a simple use case using array methods to populate a stacked bar chart in plain Javascript using plain English.

find it here and download the code at
dev.to/rickdelpo1/how-to-populate-...

[Tanmay Agrawal]

Its interesting, thanks for the add on

[VirginieLemaire]

great cheat-sheet I'll share with my students ! Thanks

[Terrence Enrique]

INVESTIGATE CRYPTO SCAMS AND RECOVER STOLEN FUNDS