Contact Us
Email: info@mohitdesigns.com
Mobile: +91-9718991639
JavaScript array methods are powerful tools that allow developers to manipulate and transform data efficiently. As JavaScript continues to evolve, mastering these methods is essential for anyone working in front-end or back-end development. This Top 30 JavaScript Array Methods Cheat Sheet 2024 covers all the must-know methods with easy-to-follow examples. Whether you’re a beginner or a seasoned developer, this guide will help you use these methods effectively and optimize your code.
JavaScript Array Methods:
1. push()
Adds one or more elements to the end of an array and returns the new length.
Syntax:
array.push(element1, element2, ...);Example:
const fruits = ['apple', 'banana'];
fruits.push('cherry');
console.log(fruits); // ['apple', 'banana', 'cherry']2. pop()
Removes the last element of an array and returns that element.
Syntax:
array.pop();Example:
const fruits = ['apple', 'banana', 'cherry'];
const lastFruit = fruits.pop();
console.log(fruits); // ['apple', 'banana']3. shift()
Removes the first element of an array and returns that element.
Syntax:
array.shift();Example:
const fruits = ['apple', 'banana', 'cherry'];
const firstFruit = fruits.shift();
console.log(fruits); // ['banana', 'cherry']4. unshift()
Adds one or more elements to the beginning of an array and returns the new length.
Syntax:
array.unshift(element1, element2, ...);Example:
const fruits = ['banana', 'cherry'];
fruits.unshift('apple');
console.log(fruits); // ['apple', 'banana', 'cherry']5. map()
Creates a new array by applying a function to each element of the original array.
Syntax:
const newArray = array.map(callback);Example:
const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]6. filter()
Creates a new array with elements that pass a condition defined in the callback function.
Syntax:
const newArray = array.filter(callback);Example:
const numbers = [1, 2, 3, 4];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]7. reduce()
Applies a function to each array element, reducing the array to a single value.
Syntax:
const result = array.reduce(callback, initialValue);Example:
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 108. forEach()
Executes a function on each element of an array, but does not return a new array.
Syntax:
array.forEach(callback);Example:
const fruits = ['apple', 'banana', 'cherry'];
fruits.forEach(fruit => console.log(fruit));9. find()
Returns the first element that satisfies the provided testing function.
Syntax:
const found = array.find(callback);Example:
const numbers = [1, 2, 3, 4];
const firstEven = numbers.find(num => num % 2 === 0);
console.log(firstEven); // 210. some()
Tests whether at least one element in the array passes the callback condition.
Syntax:
const result = array.some(callback);Example:
const numbers = [1, 2, 3];
const hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven); // true11. every()
Tests whether all elements in the array pass the callback condition.
Syntax:
const result = array.every(callback);Example:
const numbers = [2, 4, 6];
const allEven = numbers.every(num => num % 2 === 0);
console.log(allEven); // true12. concat()
Merges two or more arrays into a new array.
Syntax:
const newArray = array1.concat(array2);Example:
const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = arr1.concat(arr2);
console.log(combined); // [1, 2, 3, 4]13. slice()
Returns a shallow copy of a portion of an array into a new array.
Syntax:
const newArray = array.slice(start, end);Example:
const fruits = ['apple', 'banana', 'cherry'];
const someFruits = fruits.slice(1, 2);
console.log(someFruits); // ['banana']14. splice()
Changes the contents of an array by removing or adding elements.
Syntax:
array.splice(start, deleteCount, item1, item2, ...);Example:
const fruits = ['apple', 'banana', 'cherry'];
fruits.splice(1, 1, 'orange');
console.log(fruits); // ['apple', 'orange', 'cherry']15. join()
Joins all elements of an array into a string.
Syntax:
const result = array.join(separator);Example:
const fruits = ['apple', 'banana', 'cherry'];
const fruitString = fruits.join(', ');
console.log(fruitString); // 'apple, banana, cherry'16. reverse()
Reverses the order of the elements in an array in place.
Syntax:
array.reverse();Example:
const numbers = [1, 2, 3];
numbers.reverse();
console.log(numbers); // [3, 2, 1]17. sort()
Sorts the elements of an array in place.
Syntax:
array.sort(compareFunction);Example:
const numbers = [4, 2, 5, 1, 3];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 2, 3, 4, 5]18. flat()
Flattens a nested array.
Syntax:
const newArray = array.flat(depth);Example:
const nested = [1, [2, [3, [4]]]];
const flatArray = nested.flat(2);
console.log(flatArray); // [1, 2, 3, [4]]19. fill()
Fills all elements in an array with a static value from a start index to an end index.
Syntax:
array.fill(value, start, end);Example:
const numbers = [1, 2, 3, 4];
numbers.fill(0, 1, 3);
console.log(numbers); // [1, 0, 0, 4]20. includes()
Determines whether an array includes a certain value.
Syntax:
const result = array.includes(value);Example:
const fruits = ['apple', 'banana', 'cherry'];
const hasBanana = fruits.includes('banana');
console.log(hasBanana); // true21. indexOf()
Returns the first index at which a given element can be found in the array.
Syntax:
const index = array.indexOf(value);Example:
const fruits = ['apple', 'banana', 'cherry'];
const index = fruits.indexOf('banana');
console.log(index); // 122. lastIndexOf()
Returns the last index at which a given element can be found.
Syntax:
const index = array.lastIndexOf(value);Example:
const numbers = [1, 2, 3, 2];
const lastIndex = numbers.lastIndexOf(2);
console.log(lastIndex); // 323. findIndex()
Returns the index of the first element in the array that satisfies the provided testing function.
Syntax:
const index = array.findIndex(callback);Example:
const numbers = [1, 2, 3, 4];
const evenIndex = numbers.findIndex(num => num % 2 === 0);
console.log(evenIndex); // 124. findLast()
Returns the last element that satisfies the provided testing function.
Syntax:
const found = array.findLast(callback);Example:
const numbers = [1, 2, 3, 4];
const lastEven = numbers.findLast(num => num % 2 === 0);
console.log(lastEven); // 425. findLastIndex()
Returns the index of the last element in the array that satisfies the provided testing function.
Syntax:
const index = array.findLastIndex(callback);Example:
const numbers = [1, 2, 3, 4];
const lastEvenIndex = numbers.findLastIndex(num => num % 2 === 0);
console.log(lastEvenIndex); // 326. at()
Returns the element at the specified index, allowing for negative indexing from the end of the array.
Syntax:
const element = array.at(index);Example:
const numbers = [1, 2, 3, 4];
console.log(numbers.at(-1)); // 427. from()
Creates a new, shallow-copied array from an array-like or iterable object.
Syntax:
const newArray = Array.from(object);Example:
const str = 'hello';
const charArray = Array.from(str);
console.log(charArray); // ['h', 'e', 'l', 'l', 'o']28. isArray()
Checks if a given value is an array.
Syntax:
const result = Array.isArray(value);Example:
const arr = [1, 2, 3];
console.log(Array.isArray(arr)); // true29. of()
Creates a new array from the given arguments.
Syntax:
const newArray = Array.of(element1, element2, ...);Example:
const arr = Array.of(1, 2, 3);
console.log(arr); // [1, 2, 3]30. copyWithin()
Copies part of an array to another location within the same array, without modifying its length.
Syntax:
array.copyWithin(target, start, end);Example:
const arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3);
console.log(arr); // [4, 5, 3, 4, 5]Conclusion:
Mastering these JavaScript array methods in 2024 will make your code cleaner, more efficient, and easier to maintain. These 30 methods allow for manipulating arrays in various ways, helping you tackle a wide range of development challenges. Keep this JavaScript Array Methods Cheat Sheet 2024 handy, and you’ll be well-prepared to optimize your JavaScript code with ease. Also, learn about JavaScript Hoisting for more clarity.
