JavaScript Array Methods CheatSheet: Boost Your Productivity

Today I’m going to share a JavaScript Array methods cheat sheet that saves me time during development.

Working with arrays in JavaScript is a common task for developers. JavaScript provides a variety of built-in methods that allow us to manipulate arrays efficiently. This cheatsheet aims to provide a quick reference for some of JavaScript’s most commonly used array methods.

What is an Array in JavaScript?

Arrays in JavaScript are like magical containers that let you store and access multiple values in a single variable, making your code more organized and powerful.

When working with JavaScript arrays, there are several ways to create them:

// Array Literal Syntax
let numbers = [1, 2, 3, 4, 5];

// Array Constructor
const array1 = new Array(); // Empty Array

const array2 = new Array(1, 2, 3, 4, 5);

Array methods are useful for improving the cleanliness and efficiency of our JavaScript code.

This article will explore commonly used array methods and their role in simplifying our code.

1. push():

Adds one or more elements to the end of an array and returns the new length of the array.

const array = [1, 2, 3];
array.push(4);
console.log(array); 

// Output: 
[1, 2, 3, 4]

2. pop():

Removes the last element from an array and returns that element.

const array = [1, 2, 3, 4, 5];
array.pop();
console.log(array); 

// Output: 
[ 1, 2, 3, 4]

3. shift():

Removes the first element from an array and returns that element, shifting all other elements down by one.

const Numbers = [1, 2, 3, 4, 5,];
Numbers.shift( );
console.log(Numbers);

// Output: 
[2, 3, 4, 5]

4. unshift():

Adds one or more elements to the beginning of an array and returns the new length of the array.

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

// Output: 
['apple', 'kiwi', 'banana', 'orange']

5. concat():

Combines two or more arrays and returns a new array.

const array1 = [ 1, 2, 3];
const array2 = [ 4, 5, 6, 7];
const array3 = [ 8, 9, 10, 11];

const newArray = array1.concat(array2, array3);
console.log(newArray); 

// Output 
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

6. join():

The join() method converts all the elements of an array into a string and concatenates them using a specified separator.

const array = [1, 2, 3, 4, 5];
const joinedArray = array.join(' - ');
console.log(joinedArray); 

// Output: 
'1 - 2 - 3 - 4 - 5'

7. slice():

The slice() method in JavaScript allows us to create a new array that contains a portion of the original array.

const fruits = ['apple', 'banana', 'orange', 'mango', 'kiwi'];

// Extract a portion of the array starting from index 1 (banana) up to index 3 (mango)
const slicedFruits = fruits.slice(1, 4);

console.log(slicedFruits);

// Output: 
['banana', 'orange', 'mango']

8. splice():

The splice() function modifies an array by removing, replacing, or adding elements.

const fruits = ['apple', 'banana', 'orange', 'kiwi'];
fruits.splice(1, 1); // Remove 'banana' from the array
console.log(fruits); // Output: ['apple', 'orange', 'kiwi']

const colors = ['red', 'green', 'blue', 'yellow'];
colors.splice(1, 1, 'purple'); // Replace 'green' with 'purple' in the array
console.log(colors); // Output: ['red', 'purple', 'blue', 'yellow']

const numbers = [1, 2, 3, 4];
numbers.splice(2, 0, 5, 6); // Add elements 5 and 6 after index 2 in the array
console.log(numbers); // Output: [1, 2, 5, 6, 3, 4]

9. indexOf():

The indexOf function returns the first index of a given element in an array. If the element is not present, it returns -1.

const numbers = [12, 13, 14, 15, 16, 17];

console.log(numbers.indexOf(13)); //  1
console.log(numbers.indexOf(15)); //  3
console.log(numbers.indexOf(20)); // -1

10. lastIndexOf():

The lastIndexOf() function returns the last index of a specific element in an array. If the element is not found, it returns -1.

const numbers = [12, 13, 14, 15, 16, 17];

console.log(numbers.lastIndexOf(16)); // 4
console.log(numbers.lastIndexOf(17)); // 5

11. includes():

The includes() method checks for the presence of a value in an array. If the value is found, the method returns true otherwise, it returns false.

const numbers = [1, 2, 3, 4, 5];

console.log(numbers.includes(3)); // Output: true
console.log(numbers.includes(7)); // Output: false

12. forEach():

The forEach() method is used to execute a provided function for each element in an array. It enables us to perform operations on each element individually.

const numbers = [1, 2, 3];

numbers.forEach(function(number) {
  console.log(number);
});

// Output:
 1
 2
 3

13. map():

The map() method generates a fresh array by applying a given function to each element in the original array.

const numbers = [16, 25, 36, 49];
const newArray = numbers.map(Math.sqrt)

console.log(newArray); // [ 4, 5, 6, 7 ]

14. filter():

The filter() method generates a new array containing only the elements that meet the specified criteria.

let numbers = [1, 2, 3, 4, 5, 6];

let evenNumbers = numbers.filter(function(element) {
  return element % 2 === 0;
});

console.log(evenNumbers); // Output: [2, 4, 6]

15. reduce():

The reduce() method in JavaScript is used to apply a function to reduce an array to a single value.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((total, currentValue) => total + currentValue, 0);

console.log(sum); // Output: 15

16. sort():

The sort() function is used to arrange the elements of an array in a specific order. It modifies the array directly and also returns the sorted array.

const numbers = [5, 1, 3, 2, 4];
console.log(numbers.sort()); 

// Output:
[1, 2, 3, 4, 5]

17. reverse():

The reverse() method is used to change the sequence of elements in an array. It swaps the positions of the last and first elements, making the last element become the first, and the first element become the last.

let fruits = ['apple', 'banana', 'cherry', 'date'];
console.log(fruits.reverse()); 

// Output: 
['date', 'cherry', 'banana', 'apple']

18. find():

The find() function returns the first matching element in an array based on a provided function or test.

const numbers = [1, 2, 3, 4, 5];

// Find the first even number in the array
const firstEvenNumber = numbers.find(num => num % 2 === 0);

console.log(firstEvenNumber); // Output: 2

19. findIndex():

The findIndex() function is used to find the index of the first element in an array that matches a given condition.

const numbers = [1, 2, 3, 4, 5];

const evenIndex = numbers.findIndex((num) => { 
  return num % 2 === 0
});

console.log(evenIndex); // Output: 1

20. some():

The function some() scans the array and returns true if there is at least one element that fulfills the given condition.

const numbers = [1, 2, 3, 4, 5];

// Check if at least one element is even
const hasEvenNumber = numbers.some((number) => {
  return  number % 2 === 0;
});

console.log(hasEvenNumber); // Output: true

21. every():

The every() function checks whether every item in an array meets a specific condition. It returns true only if all items satisfy the condition; otherwise, it returns false.

let numbers = [ 2, 4, 6, 8, 10];

let allEven = numbers.every((element) => { 
  return element % 2 === 0
});
console.log(allEven); 

// Output: true

Conclusion

This cheat sheet covers some of the essential array methods in JavaScript. Using these methods effectively allows you to easily manipulate arrays and improve your coding productivity. Keep this cheatsheet handy as a reference whenever you’re working with arrays in JavaScript

Thank you for reading😃, and I hope to see you in my next blog post. Stay curious, and keep coding!!🌟