In the realm of JavaScript, arrays are at the core of managing and manipulating data. JavaScript provides an array of different methods to work with arrays, making them an indispensable tool in every developer’s arsenal. This post is designed as a comprehensive guide to understanding and effectively using JavaScript array methods, accompanied by code examples for a hands-on experience. Let’s explore!
01. Array Length
The array length property in JavaScript is used to determine the number of elements present in an array. It’s the most basic yet crucial property of an array that helps in iterations and condition checks. Let’s understand it with a simple code snippet:
let fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits.length); // Outputs: 302. Array toString()
The toString() method converts an array into a string, separating array elements by commas. This is an efficient way to present array data in a readable format.
let fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits.toString()); // Outputs: "Apple,Banana,Cherry"03. Array pop()
The pop() method removes the last element from an array and returns that element. This method modifies the original array.
let fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits.pop()); // Outputs: "Cherry"
console.log(fruits); // Outputs: ["Apple", "Banana"]04. Array push()
Opposite of pop(), the push() method adds one or more elements to the end of an array and returns the new length of the array.
let fruits = ['Apple', 'Banana'];
console.log(fruits.push('Cherry')); // Outputs: 3
console.log(fruits); // Outputs: ["Apple", "Banana", "Cherry"]05. Array shift()
The shift() method works similarly to pop(), but instead of removing the last element, it removes the first element from an array and returns that element.
let fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits.shift()); // Outputs: "Apple"
console.log(fruits); // Outputs: ["Banana", "Cherry"]06. Array unshift()
The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.
let fruits = ['Banana', 'Cherry'];
console.log(fruits.unshift('Apple')); // Outputs: 3
console.log(fruits); // Outputs: ["Apple", "Banana", "Cherry"]07. Array join()
The join() method merges all the elements of an array into a string. The elements are separated by a specified separator. If no separator is mentioned, the elements are separated by a comma.
let fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits.join()); // Outputs: "Apple,Banana,Cherry"
console.log(fruits.join(' and ')); // Outputs: "Apple and Banana and Cherry"08. Array delete
In JavaScript, we can delete an element from an array using the delete keyword. However, it leaves undefined holes in the array.
let fruits = ['Apple', 'Banana', 'Cherry'];
delete fruits[1];
console.log(fruits); // Outputs: ["Apple", undefined, "Cherry"]09. Array concat()
The concat() method merges two or more arrays and returns a new array. The original arrays are not
changed.
let fruits = ['Apple', 'Banana'];
let moreFruits = ['Cherry', 'Date'];
let allFruits = fruits.concat(moreFruits);
console.log(allFruits); // Outputs: ["Apple", "Banana", "Cherry", "Date"]10. Array flat()
The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.
let nestedArray = [1, 2, [3, 4, [5, 6]]];
console.log(nestedArray.flat(2)); // Outputs: [1, 2, 3, 4, 5, 6]11. Array splice()
The splice() method adds or removes items from an array. The first argument specifies the array position for insertion or deletion. The second argument specifies the number of elements to delete. The subsequent arguments are the new elements to be added.
let fruits = ['Apple', 'Banana', 'Cherry'];
fruits.splice(1, 1, 'Blackberry');
console.log(fruits); // Outputs: ["Apple", "Blackberry", "Cherry"]12. Array slice()
The slice() method returns a shallow copy of a portion of an array into a new array object. The original array will not be modified.
let fruits = ['Apple', 'Banana', 'Cherry', 'Date'];
let someFruits = fruits.slice(1, 3);
console.log(someFruits); // Outputs: ["Banana", "Cherry"]13. Array map()
The map() method creates a new array by calling a function for every array element. The original array is not changed.
let numbers = [1, 2, 3, 4];
let squares = numbers.map(num => num * num);
console.log(squares); // Outputs: [1, 4, 9, 16]Absolutely, let’s look at a few more useful array methods that JavaScript provides:
14. Array.filter()
The filter() method creates a new array with all elements that pass the test implemented by the provided function.
let numbers = [1, 2, 3, 4, 5];
let evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // Outputs: [2, 4]15. Array.reduce()
The reduce() method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // Outputs: 1516. Array.every()
The every() method tests whether all elements in the array pass the test implemented by the provided function.
let numbers = [2, 4, 6];
let allEven = numbers.every(num => num % 2 === 0);
console.log(allEven); // Outputs: true17. Array.some()
The some() method tests whether at least one element in the array passes the test implemented by the provided function.
let numbers = [1, 3, 5, 6];
let hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven); // Outputs: true18. Array.find()
The find() method returns the value of the first element in the array that satisfies the provided testing function.
let numbers = [5, 12, 8, 130, 44];
let found = numbers.find(element => element > 10);
console.log(found); // Outputs: 1219. Array.findIndex()
The findIndex() method returns the index of the first element in the array that satisfies the provided testing function.
let numbers = [5, 12, 8, 130, 44];
let foundIndex = numbers.findIndex(element => element > 10);
console.log(foundIndex); // Outputs: 120. Array.reverse()
The reverse() method reverses an array in place. The first array element becomes the last, and the last array element becomes the first.
let array = ['one', 'two', 'three'];
console.log(array.reverse()); // Outputs: ["three", "two", "one"]My apologies for the oversight. Let’s explore the sort() method.
21. Array.sort()
The sort() method sorts the elements of an array in place and returns the array. The sort is not necessarily stable, and the default sort order is according to string Unicode code points.
let numbers = [5, 1, 10, 3];
console.log(numbers.sort()); // Outputs: [1, 10, 3, 5]
let fruits = ["Banana", "Orange", "Apple", "Cherry"];
console.log(fruits.sort()); // Outputs: ["Apple", "Banana", "Cherry", "Orange"]By default, sort() converts elements to strings for comparison, which is why [1, 10, 3, 5] gets sorted incorrectly. We can pass in a comparison function to sort numeric arrays correctly:
let numbers = [5, 1, 10, 3];
console.log(numbers.sort((a, b) => a - b)); // Outputs: [1, 3, 5, 10]In this case, (a, b) => a - b is a comparison function that subtracts b from a. The function basically says that if a is less than b, make a come before b. If a is greater than b, make a come after b. And if a and b are equal, leave them unchanged with respect to each other.
The sort() method can be a powerful tool when used correctly in your JavaScript code.
Yes, JavaScript indeed provides several more Array methods. Let’s take a look at a few additional ones:
22. Array.fill()
The fill() method changes all elements in an array to a static value, from a start index (default 0) to an end index (default array.length).
let numbers = [1, 2, 3, 4, 5];
console.log(numbers.fill(0, 2, 4)); // Outputs: [1, 2, 0, 0, 5]23. Array.includes()
The includes() method determines whether an array includes a certain value among its entries, returning true or false as appropriate.
let numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(3)); // Outputs: true
console.log(numbers.includes(6)); // Outputs: false24. Array.indexOf()
The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits.indexOf("Banana")); // Outputs: 125. Array.lastIndexOf()
The lastIndexOf() method returns the last index at which a given element can be found in the array, or -1 if it is not present. The array is searched backwards, starting at fromIndex.
let numbers = [1, 2, 3, 2, 4];
console.log(numbers.lastIndexOf(2)); // Outputs: 326. Array.forEach()
The forEach() method executes a provided function once for each array element.
let numbers = [1, 2, 3, 4, 5];
numbers.forEach((value, index, array) => {
console.log(value); // Outputs each number
});27. Array.from()
The Array.from() static method creates a new, shallow-copied array instance from an array-like or iterable object.
console.log(Array.from('Hello')); // Outputs: ['H', 'e', 'l', 'l', 'o']28. Array.isArray()
The Array.isArray() method determines whether the passed value is an Array.
console.log(Array.isArray([1, 2, 3])); // Outputs: true
console.log(Array.isArray({foo: 123})); // Outputs: falseIndeed, there are even more array methods to explore. Here are a few more:
29. Array.find()
The find() method returns the value of the first element in the provided array that satisfies the provided testing function.
let numbers = [5, 12, 8, 130, 44];
let found = numbers.find(num => num > 10);
console.log(found); // Outputs: 1230. Array.flatmap()
The flatMap() method first maps each element using a mapping function, then flattens the result into a new array. It’s essentially equivalent to a map() followed by a flat() of depth 1.
let arr = [1, 2, 3, 4];
let newArr = arr.flatMap(x => [x, x * 2]);
console.log(newArr); // Outputs: [1, 2, 2, 4, 3, 6, 4, 8]31. Array.keys()
The keys() method returns a new Array Iterator object that contains the keys for each index in the array.
let arr = ['a', 'b', 'c'];
let iterator = arr.keys();
for (let key of iterator) {
console.log(key); // Outputs: 0, then 1, then 2
}32. Array.values()
The values() method returns a new Array Iterator object that contains the values for each index in the array.
let arr = ['a', 'b', 'c'];
let iterator = arr.values();
for (let value of iterator) {
console.log(value); // Outputs: 'a', then 'b', then 'c'
}33. Array.entries()
The entries() method returns a new Array Iterator object that contains the key/value pairs for each index in the array.
let arr = ['a', 'b', 'c'];
let iterator = arr.entries();
for (let pair of iterator) {
console.log(pair); // Outputs: [0, 'a'], then [1, 'b'], then [2, 'c']
}34. Array.copyWithin()
The copyWithin() method shallow copies part of an array to another location in the same array and returns it without modifying its length.
let arr = ['a', 'b', 'c', 'd', 'e'];
console.log(arr.copyWithin(0, 3, 4)); // Outputs: ['d', 'b', 'c', 'd', 'e']35. Array.toLocaleString()
The toLocaleString() method returns a string representing the elements of the array. The elements are converted to Strings using their toLocaleString methods and these Strings are separated by a locale-specific String (such as a comma “,”).
let arr = [1000, 'Banana', new Date()];
console.log(arr.toLocaleString()); // Example Output: "1,000,Banana,12/11/2023, 7:00:00 PM"Sure, let’s go over a few more methods that are less commonly used but can still be useful in certain scenarios:
36. Array.at()
The at() method takes an integer value and returns the item at that index, allowing for positive and negative integers. Negative integers count back from the last item in the array.
let arr = ['a', 'b', 'c', 'd', 'e'];
console.log(arr.at(-1)); // Outputs: 'e'37. Array.reduceRight()
The reduceRight() method applies a function against an accumulator and each element in the array (from right to left) to reduce it to a single value. This is essentially like the reduce() method, but it goes from right to left.
let array1 = [[0, 1], [2, 3], [4, 5]].reduceRight((accumulator, currentValue) => accumulator.concat(currentValue));
console.log(array1); // Outputs: [4, 5, 2, 3, 0, 1]38. Array.toSource() (Non-standard)
The toSource() method returns a string representing the source code of the array. This is a non-standard feature and it’s not supported in all environments.
let arr = ['a', 'b', 'c', 'd', 'e'];
console.log(arr.toSource()); // Outputs: ['a', 'b', 'c', 'd', 'e'] (in Firefox)These are some of the other methods provided by the Array object. Remember, not all methods are universally supported (like toSource()) and some are very new (like at()), so always consider the environments where your code will run.
These methods provide even more ways to interact with and manipulate arrays in JavaScript. Remember, using these methods efficiently can help you write cleaner and more concise code.
Understanding and using these methods will give you a powerful toolset to work with arrays in JavaScript. Remember, it’s not just about knowing the methods but also understanding when and where to use them.
Happy coding!
