Quick Guide to JavaScript Array Methods

JavaScript arrays offer a wide variety of methods to handle elements efficiently. These methods cover a range of operations, including adding or removing elements, transforming data, and more. In this article, we will explore 26 common array methods along with 3 static methods. The explanations will be accompanied by code examples to demonstrate how each method can be applied in real-world scenarios.
JavaScript Array Methods Overview
1. concat()
The concat()
method is used to merge two or more arrays into a new array.
1 var fruits = ["apple", "banana", "cherry"];2 var numbers = [10, 20, 30];3 var merged = fruits.concat(numbers);4 console.log(merged); // ["apple", "banana", "cherry", 10, 20, 30]
Explanation: This method combines the contents of two arrays into a single new array without modifying the original arrays.
2. every()
Checks if all elements in an array meet the provided condition.
1 function isAdult(age) {2 return age >= 18;3 }4 var ages = [22, 19, 17, 25];5 var allAdults = ages.every(isAdult);6 console.log(allAdults); // false
Explanation: The every()
method returns true
if all elements pass the provided test; otherwise, it returns false
.
3. some()
Checks if at least one element in an array meets the specified condition.
1 function isMinor(age) {2 return age < 18;3 }4 var ages = [22, 19, 17, 25];5 var hasMinors = ages.some(isMinor);6 console.log(hasMinors); // true
Explanation: Unlike every()
, the some()
method returns true if at least one element matches the condition.
4. filter()
Creates a new array with all elements that pass the test implemented by the provided function.
1 function isAbove15(age) {2 return age > 15;3 }4 var ages = [12, 16, 14, 20, 30];5 var olderThan15 = ages.filter(isAbove15);6 console.log(olderThan15); // [16, 20, 30]
5. forEach()
Executes a provided function once for each array element.
1 var colors = ["red", "green", "blue"];2 colors.forEach(function(color) {3 console.log(color);4 });5 // Output: red, green, blue
6. indexOf()
Searches the array for a specified element and returns its first index.
1 var pets = ["dog", "cat", "bird"];2 var petIndex = pets.indexOf("cat");3 console.log(petIndex); // 1
7. lastIndexOf()
Returns the index of the last occurrence of a specified element.
1 var animals = ["dog", "cat", "dog", "fish"];2 var lastDogIndex = animals.lastIndexOf("dog");3 console.log(lastDogIndex); // 2
8. join()
Joins all elements of an array into a string, with a specified separator.
1 var animals = ["cat", "dog", "rabbit"];2 var animalString = animals.join(" - ");3 console.log(animalString); // "cat - dog - rabbit"
9. map()
Creates a new array by applying a function to each element of the original array.
1 var prices = [10, 20, 30];2 var discountedPrices = prices.map(price => price * 0.9);3 console.log(discountedPrices); // [9, 18, 27]
10. pop()
Removes the last element from the array and returns it.
1 var numbers = [1, 2, 3];2 var lastNumber = numbers.pop();3 console.log(lastNumber); // 3
11. push()
Adds one or more elements to the end of the array.
1 var colors = ["red", "green"];2 colors.push("blue");3 console.log(colors); // ["red", "green", "blue"]
12. reduce()
Applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.
1 var numbers = [1, 2, 3, 4];2 var sum = numbers.reduce(function(acc, num) {3 return acc + num;4 }, 0);5 console.log(sum); // 10
13. reduceRight()
Similar to reduce()
, but it processes the array from right to left.
1 var numbers = [1, 2, 3, 4];2 var sum = numbers.reduceRight(function(acc, num) {3 return acc + num;4 }, 0);5 console.log(sum); // 10
14. reverse()
Reverses the order of the elements in the array.
1 var values = [5, 10, 15];2 values.reverse();3 console.log(values); // [15, 10, 5]
15. shift()
Removes and returns the first element of the array.
1 var queue = ["first", "second", "third"];2 var firstItem = queue.shift();3 console.log(firstItem); // "first"
16. unshift()
Adds one or more elements to the beginning of the array.
1 var stack = ["top", "middle"];2 stack.unshift("bottom");3 console.log(stack); // ["bottom", "top", "middle"]
17. sort()
Sorts the elements of the array.
1 var nums = [9, 2, 5, 1];2 nums.sort((a, b) => a - b);3 console.log(nums); // [1, 2, 5, 9]
18. splice()
Changes the contents of an array by removing or replacing elements.
1 var fruits = ["apple", "banana", "cherry"];2 fruits.splice(1, 1, "orange");3 console.log(fruits); // ["apple", "orange", "cherry"]
19. toString()
Converts the array to a string.
1 var items = ["pen", "notebook", "eraser"];2 var itemsString = items.toString();3 console.log(itemsString); // "pen,notebook,eraser"
20. slice()
Extracts a portion of the array and returns a new array.
1 var fruits = ["apple", "banana", "cherry", "date"];2 var selectedFruits = fruits.slice(1, 3);3 console.log(selectedFruits); // ["banana", "cherry"]
21. spread operator (...
)
Expands an array into individual elements.
1 var numbers = [1, 2, 3];2 var newArray = [...numbers, 4, 5];3 console.log(newArray); // [1, 2, 3, 4, 5]
22. includes()
Checks if a specific element is in the array.
1 var animals = ["lion", "tiger", "elephant"];2 var hasLion = animals.includes("lion");3 console.log(hasLion); // true
23. fill()
Replaces elements of an array with a static value.
1 var numbers = [1, 2, 3, 4];2 numbers.fill(0, 2, 4);3 console.log(numbers); // [1, 2, 0, 0]
24. flat()
Flattens a multidimensional array into a one-dimensional array.
1 var nestedArr = [1, [2, 3], [4, [5, 6]]];2 var flatArr = nestedArr.flat(2);3 console.log(flatArr); // [1, 2, 3, 4, 5, 6]
25. flatMap()
Similar to flat()
, but first maps the array elements.
1 var arr = [1, 2, 3];2 var doubled = arr.flatMap(x => [x * 2]);3 console.log(doubled); // [2, 4, 6]
26. at()
Accesses an element at a specific index, supporting negative indexing.
1 var numbers = [1, 2, 3, 4];2 console.log(numbers.at(-1)); // 4
Static Methods
1. Array.isArray()
Checks if the given value is an array.
1 var data = [1, 2, 3];2 console.log(Array.isArray(data)); // true
2. Array.from()
Creates a new array from an array-like or iterable object.
3. Array.of()
Creates a new array instance with the given arguments as elements.
1 var newArray = Array.of(1, 2, 3);2 console.log(newArray); // [1, 2, 3]
Conclusion
JavaScript arrays are an essential part of programming, and their built-in methods offer a variety of ways to work with data. By understanding how to use methods like map()
, filter()
, reduce()
, and more, you can manipulate arrays in powerful ways to suit your needs. These methods make working with arrays simple and efficient, and changing variable names doesn't affect their functionality.