List of JavaScript Useful Array Methods and how to use them
By Harshit Kumar | 2023-11-14
10 min read ◦ javascript
Welcome to our comprehensive guide on essential JavaScript array methods! If you are on a journey to master JavaScript and become a skilled full-stack web developer, you have come to the right place. In this article, we will explore a curated list of JavaScript array methods that are not only important to learn but are also fundamental tools in building a full-stack website.
These methods are the building blocks of web development, enabling you to manipulate and transform data efficiently. Whether you're a newbie looking to strengthen your foundation or an experienced developer aiming to hone your skills, this guide will serve as your trusted resource. Let's dive into the world of JavaScript arrays and empower your development journey!
Short introduction to JavaScript Arrays
Arrays are fundamental to JavaScript, serving as the backbone for organizing and manipulating data. They are versatile data structures capable of storing multiple values within a single variable, be they numbers, strings or even objects. Here's a quick glimpse of what arrays look like in JavaScript:
// javascript array of strings
const developers = ["Harshit", "Larry", "Brendan", "Tim"];
// javascript array of numbers
const myNumber = [1, 2, 3, 4, 5, 6, 7, 9, 10];
Above are the two types of javascript arrays that we declare, first one is developers array that contains string and second one is myNumber array that contains numbers.
We classify each JavaScript array methods according to its usage.
Accessing Elements
Accessing Elements methods in JavaScript help us find and get specific data in your arrays.
01. Array.length
The Array.length property is not the function or method. It is a property that returns the number of elements in the array. We can use the Array.length property on every array no matter what type of data that array holds.
We can use the Array.length to iterate over the elements of an javascript arrays. The Array.length property is a read-only property. That means that we cannot change the return value of the Array.length property and we get the error if we try to change it.
Example 1:
// Accessing the length property
const myArray = [1, 2, 3, 4, 5];
const length = myArray.length;
console.log(length); // Output: 5
In the above code snippet, we create an array called myArray that contains five elements. To know the number of elements in the array, we use the length property, which returns the value 5. It's important to note that length gives us the count of elements in the array, and it's always one more than the highest index in the array.
Example 2:
const colors = ["red", "green", "blue", "yellow"];
if (colors.length === 0) {
console.log("The array is empty.");
} else {
console.log(`The array contains ${colors.length} elements.`);
}
// Output: The array contains 4 elements.
In this example, we have an array called colors with four elements. We use the array.length property to check whether the array is empty or contains elements and then display an appropriate message based on its length.
02. Array.indexOf()
The Array.indexOf() method is used to find the index of particular array element. If the element is found in the array then this method returns the index of the array element and if it did not find the element in the array then it returns the -1.
Note: The index of an array begins with number 0.
Suppose if we have array in which are many duplicate elements, so when we use the indexOf() method and it find many element of same type then it returns the index of first occurence.
Example:
const fruits = ["apple", "banana", "cherry", "date"];
const bananaIndex = fruits.indexOf("banana");
const grapeIndex = fruits.indexOf("grape");
console.log(bananaIndex);
// Output: 1 (index of 'banana' in the array)
console.log(grapeIndex);
// Output: -1 (not found in the array)
In the code snippet above, we have an array fruits containing four elements. We use the indexOf() method to search for the index of 'banana' within the array. Since 'banana' is at index 1, the method returns 1.
Next, we search for the index of 'grape', which is not present in the array. In this case, the method returns -1 to indicate that the element was not found.
03. Array.lastIndexOf()
The Array.lastIndexOf() javascript array method is very similar to the Array.indexOf() method but instead of giving the index first occurence of a specified element, the Array.lastIndexOf() gives the index of last occurence of a specified element in an array.
const fruits = ["apple", "banana", "cherry", "date", "banana"];
const bananaLastIndex = fruits.lastIndexOf("banana");
const grapeLastIndex = fruits.lastIndexOf("grape");
console.log(bananaLastIndex);
// Output: 4 (last index of 'banana' in the array)
console.log(grapeLastIndex);
// Output: -1 (not found in the array)
In the code snippet above, we have an array fruits containing five elements. We use the lastIndexOf() method to search for the index of the last occurrence of 'banana' within the array. Since 'banana' is present at index 1 and 4, the method returns 4, indicating the index of the last occurrence.
Next, we search for the index of 'grape', which is not present in the array. In this case, the method returns -1 to indicate that the element was not found.
Manipulating Arrays
Manipulating Arrays methods in JavaScript are your toolkit for changing, sorting, and managing your array data with ease.
04. Array.reverse()
The Array.reverse() method is used to reverse the order of elements inside the array. It directly changes or mutates the original array by reversing the elements in place.
Example 1:
const numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers); // Output: [5, 4, 3, 2, 1]
In the code snippet above, we have an array numbers with five elements. When we call the reverse() method on this array, it reverses the order of the elements in place, resulting in [5, 4, 3, 2, 1]. The original array is mutated, and the elements are reversed.
Note:
Array.reverse()method alters the original array and do not create the new array, so that from above example if you later access thenumbersarray, you will find it has been reversed.
Example 2:
const fruits = ["apple", "banana", "cherry", "date"];
fruits.reverse();
console.log(fruits);
// Output: ['date', 'cherry', 'banana', 'apple']
05. Array.sort()
The Array.sort() method in javascript is simply sort the elements of an array and returns the sorted array.
By Default the Array.sort() method sort the elements of an array as strings and arranges them in the ascending order, but we can make our custom sorting function for more complex arrays.
Example 1:
const fruits = ["cherry", "banana", "apple", "date"];
fruits.sort();
console.log(fruits);
// Output: ['apple', 'banana', 'cherry', 'date']
In this above code, we have an array fruits containing 4 elements. When we call the sort() method on this array, it sorts the elements in ascending order by default. The sorted array is then returned, and the original array is also sorted in place.
By default, the sort() method treats the elements of an array as strings and sorts them alphabetically. This means it may not work as expected for numbers:
const numbers = [10, 2, 30, 5, 15];
numbers.sort();
console.log(numbers);
// Output: [10, 15, 2, 30, 5]
To sort the array of numbers numerically, we can make the compare function:
const numbers = [10, 2, 30, 5, 15];
numbers.sort((a, b) => a - b);
console.log(numbers);
// Output: [2, 5, 10, 15, 30]
Above, we provide a compare function to sort the numbers in ascending order. The function subtracts b from a, which results in a numeric sort.
And yes, we use this compare function that sort() the array of numbers in ascending order on any type of numbers array no matter how big the array is.
You can also reverse the sort order by swapping a and b in the compare function or by returning b - a:
const numbers = [10, 2, 30, 5, 15];
numbers.sort((a, b) => b - a);
console.log(numbers);
// Output: [30, 15, 10, 5, 2]
06. Array.fill()
The Array.fill() method in JavaScript is used to fill all the elements of an array with a specified value. It can be used to initialize an array with a default value or to update all elements with a new value.
Here's a detailed explanation with code snippets:
const numbers = [3, 0, 56, 94, 99];
numbers.fill(0);
console.log(numbers);
// Output: [0, 0, 0, 0, 0]
In above snippet, we have an array numbers containing five elements. When we call the fill(0) method on this array, it replaces all the elements with the value 0. The original array is modified in place, and all its elements become 0.
We can also specify the range of elements to be filled by providing the starting and ending indices as arguments.
const numbers = [1, 2, 3, 4, 5];
numbers.fill(0, 1, 4);
console.log(numbers);
// Output: [1, 0, 0, 0, 5]
In this case, we specified that the filling should start at index 1 and end at index 4 (exclusive). So, only the elements from index 1 to 3 are replaced with 0.
07. Array.join()
The Array.join() method in JavaScript is used to join all the elements of an array into a single string. We can specify a separator (a string) to separate the elements in the resulting string.
Here's a detailed explanation with code:
const fruits = ["apple", "banana", "cherry", "date"];
const result = fruits.join(", ");
console.log(result); // Output: "apple, banana, cherry, date"
Above, we make an array fruits containing four elements. When we call the join(', ') method on this array, it joins all the elements into a single string, separated by a comma and a space (', '). The result is a string where all the elements from the array are concatenated together with the specified separator.
const myName = ["h", "a", "r", "s", "h", "i", "t"];
const name = myName.join("");
// Output: 'harshit'
The Array.join() method is simply used when we want to convert an array of elements into a formatted string for display or for building a query string in a URL, among other use cases. It gives a straight way to concatenate array elements into a single string with the desired separator.
08. Array.toString()
The Array.toString() method in JavaScript is used to convert an array into a string representation. This method returns a string containing the elements of the array separated by commas, with no additional formatting.
Here's a detailed explanation with code:
const fruits = ["apple", "banana", "cherry", "date"];
const result = fruits.toString();
console.log(result);
// Output: "apple,banana,cherry,date"
In the code snippet above, we have an array fruits containing four elements. When we call the toString() method on this array, it converts the array into a string. The default behavior is to separate the array elements with commas.
The Array.toString() method is similar to the Array.join() method with a default separator of a comma (,), but it doesn't allow us to specify a custom separator.
You can use Array.toString() when we need a quick and simple way to convert an array into a string, especially for debugging or simple string representations. If we need more control over the separator or formatting, we might prefer using Array.join().
09. Array.pop()
The Array.pop() method in JavaScript is used to remove and return the last element from an array. This method mutates the original array by reducing its length and this method returns the removed element.
Example 1:
const fruits = ["apple", "banana", "cherry", "date"];
const lastFruit = fruits.pop();
console.log(fruits); // Output: ['apple', 'banana', 'cherry']
console.log(lastFruit); // Output: 'date'
Above, we have an array fruits containing four elements. When we call the pop() method on this array, it removes and returns the last element, which is 'date'. The original array is modified, and its length is reduced by one, so the last element is no longer part of the array.
Example 2:
const myNums = [66, 43, 22, 09, 56];
const removeLast = myNums.pop();
console.log(removeLast);
// output: [56]
Array.pop() method is a convenient way to work with stacks or to remove the last element from an array when processing elements in reverse order.
Note: If we call the
Array.pop()on an empty array, it returnsundefined, because there is no element to remove. And this method directly mutates the original array.
10. Array.shift()
The Array.shift() method in JavaScript is used to remove and return the first element from an array. This method mutates the original array by reducing its length by one and returns the removed element.
Example 1:
const fruits = ["apple", "banana", "cherry", "date"];
const firstFruit = fruits.shift();
console.log(fruits);
// Output: ['banana', 'cherry', 'date']
console.log(firstFruit);
// Output: 'apple'
Above, we have an array fruits containing four elements. When we call the shift() method on this array, it removes and returns the first element, which is 'apple'. The original array is modified, and its length is reduced by one, so the first element is no longer part of the array.
Example 2:
const myNums = [66, 43, 22, 09, 56];
const removeLast = myNums.shift();
console.log(removeLast);
// output: [66]
This is useful when you want to process elements in a specific order or implement a queue data structure.
Note: Similar to the
pop()method for the last element, theshift()method mutates the original array. If we call it on an empty array, it returnsundefinedbecause there are no elements to remove.
11. Array.push()
The Array.push() method in JavaScript is used to add one or more elements to the end of an array. It mutates the original array by modifying its length and appending the new elements.
Example 1:
const fruits = ["apple", "banana", "cherry"];
fruits.push("date", "elderberry");
console.log(fruits);
// Output: ['apple', 'banana', 'cherry', 'date', 'elderberry']
Above, we have an array fruits containing three elements. When we call the push() method on this array with the arguments 'date' and 'elderberry', it adds these two elements to the end of the array. The original array is modified, and its length is increased by two. As a result, the array now contains five elements.
Example 2:
const myNums = [66, 43, 22, 09, 56];
myNums.push(1, 2);
console.log(myNums);
// output: [66, 43, 22, 09, 56, 1, 2]
It's a common method for appending data to arrays, such as when working with dynamic lists or processing data sequentially.
The push() method returns the new length of the array after the elements have been added, which is helpful if we want to track the length of the array after modification. Additionally, we can use the push() method to add elements one by one or pass an array of elements to append them all at once.
12. Array.unshift()
The Array.unshift() method in JavaScript is used to add one or more elements to the beginning of an array. It mutates the original array by modifying its length and shifting the existing elements to accommodate the new ones.
Example:
const fruits = ["cherry", "date", "elderberry"];
fruits.unshift("banana", "apple");
console.log(fruits);
// Output: ['banana', 'apple', 'cherry', 'date', 'elderberry']
Above, we have an array fruits containing three elements. When we call the unshift() method on this array with the arguments 'banana' and 'apple', it adds these two elements to the beginning of the array. The original array is modified, and its length is increased by two. As a result, the array now contains five elements.
13. Array.concat()
The Array.concat() method in JavaScript is used to merge two or more arrays, creating a new array that contains the elements of the original arrays.
Note: This method does not mutate the original arrays; instead, it returns a new array.
Example:
const fruits1 = ["apple", "banana"];
const fruits2 = ["cherry", "date"];
const mergedFruits = fruits1.concat(fruits2);
console.log(mergedFruits);
// Output: ['apple', 'banana', 'cherry', 'date']
Above, we have two arrays, fruits1 and fruits2, each containing two elements. When we call the concat() method on fruits1 with fruits2 as its argument, it combines the elements from both arrays into a new array named mergedFruits. The original arrays, fruits1 and fruits2, remain unchanged.
We can use Array.concat() to combine multiple arrays or add individual elements to an existing array without modifying the original arrays.
Array.concat() method can accept multiple arguments, so you can merge more than two arrays:
const fruits1 = ["apple", "banana"];
const fruits2 = ["cherry", "date"];
const fruits3 = ["elderberry", "fig"];
const mergedFruits = fruits1.concat(fruits2, fruits3);
console.log(mergedFruits);
// Output: ['apple', 'banana', 'cherry', 'date', 'elderberry', 'fig']
Here I do not add the example of numbers array because it works on every type of array.
14. Array.splice()
The Array.splice() method in JavaScript is used to change the contents of an array by removing, replacing, or adding elements at specified positions. It can both modify the original array in place and return the removed elements as a new array.
Removing Elements
const fruits = ["apple", "banana", "cherry", "date", "elderberry"];
const removedFruits = fruits.splice(2, 2);
console.log(fruits);
// Output: ['apple', 'banana', 'elderberry']
console.log(removedFruits);
// Output: ['cherry', 'date']
Above, we have an array fruits containing five elements. When we call the splice(2, 2) method on this array, it removes two elements starting at index 2 ('cherry' and 'date'). The original array is modified in place, and the removed elements are returned as a new array (removedFruits).
Replacing Elements
const colors = ["red", "green", "blue", "yellow"];
colors.splice(1, 2, "orange", "purple");
console.log(colors);
// Output: ['red', 'orange', 'purple', 'yellow']
Above, we have an array colors with four elements. When we call the splice(1, 2, 'orange', 'purple') method, it removes two elements starting at index 1 ('green' and 'blue') and replaces them with the elements 'orange' and 'purple'. The original array is modified in place.
Adding Elements
const numbers = [1, 2, 3, 4];
numbers.splice(2, 0, 5, 6);
console.log(numbers);
// Output: [1, 2, 5, 6, 3, 4]
Above, we have an array numbers with four elements. When we call the splice(2, 0, 5, 6) method, it doesn't remove any elements but inserts the elements '5' and '6' at index 2. The original array is modified in place.
15. Array.copyWithin()
The Array.copyWithin() method in JavaScript is used to copy a sequence of elements from one part of an array to another part within the same array. It allows us to modify the original array in place by overwriting a specified range with the elements from another range.
The method can take two optional arguments: the target index to copy to and the start and end indices to copy from.
Example 1:
const fruits = ["apple", "banana", "cherry", "date", "elderberry"];
fruits.copyWithin(2, 0, 2);
console.log(fruits);
// Output: ['apple', 'banana', 'apple', 'banana', 'elderberry']
Above, we have an array fruits containing five elements. When we call the copyWithin(2, 0, 2) method on this array, it copies the elements in the range from index 0 (inclusive) to 2 (exclusive) and pastes them into the target range starting at index 2. The result is that the elements 'apple' and 'banana' are copied and placed into the array, overwriting the elements 'cherry' and 'date'.
Example 2:
const numbers = [1, 2, 3, 4, 5];
numbers.copyWithin(1, 3);
console.log(numbers);
// Output: [1, 4, 5, 4, 5]
Above, we have an array numbers with five elements. When we call the copyWithin(1, 3) method, it copies elements starting at index 3 and pastes them into the target range starting at index 1. The elements '4' and '5' are copied and placed into the array, overwriting the elements '2' and '3'.
Searching and filtering
Searching and filtering methods of array assist you in finding specific data within arrays, sort elements, and filter out what you need based on certain conditions.
01. Array.findIndex()
The Array.findIndex() method in JavaScript is used to find the index of the first element in an array that satisfies a provided testing function. It returns the index of the first element that meets the condition or -1 if no element matches.
Finding an Element
const numbers = [10, 20, 30, 40, 50];
const index = numbers.findIndex((element) => element > 25);
console.log(index);
// Output: 2 (index of the first element greater than 25)
Above, we have an array numbers containing five elements. We use the findIndex() method to search for the index of the first element that is greater than 25. The provided testing function (element) => element > 25 checks if an element is greater than 25. The method returns the index of the first element that satisfies this condition, which is 2 (index of 30).
No Match Found
const numbers = [10, 20, 30, 40, 50];
const index = numbers.findIndex((element) => element > 60);
console.log(index);
// Output: -1 (no element greater than 60)
We can also provide an optional thisArg argument to set the this value within the testing function.
Usage with thisArg:
const fruits = ["apple", "banana", "cherry"];
const index = fruits.findIndex(function (element) {
return element === this;
}, "banana");
console.log(index);
// Output: 1 (index of 'banana')
The Array.findIndex() method is a powerful tool for searching arrays based on custom conditions and can be used for various filtering and data retrieval tasks. It's especially useful when you need to locate the first element that matches a specific condition.
02. Array.find()
The Array.find() method in JavaScript is used to find the first element in an array that satisfies a provided testing function. It returns the value of the first element that meets the condition or undefined if no element matches.
Finding an Element
const numbers = [10, 20, 30, 40, 50];
const result = numbers.find((element) => element > 25);
console.log(result);
// Output: 30 (the first element greater than 25)
Above, we have an array numbers containing five elements. We use the find() method to search for the first element that is greater than 25. The provided testing function (element) => element > 25 checks if an element is greater than 25. The method returns the value of the first element that satisfies this condition, which is 30.
No Match Found
const numbers = [10, 20, 30, 40, 50];
const result = numbers.find((element) => element > 60);
console.log(result);
// Output: undefined (no element greater than 60)
We can also provide an optional thisArg argument to set the this value within the testing function.
Usage with thisArg:
const fruits = ["apple", "banana", "cherry"];
const result = fruits.find(function (element) {
return element === this;
}, "banana");
console.log(result);
// Output: 'banana' (the first matching element)
03. Array.includes()
The Array.includes() method in JavaScript is used to check if an array includes a specific element. It returns a boolean value, true if the element is found in the array, and false if it is not.
Checking for Element Inclusion
const fruits = ["apple", "banana", "cherry", "date"];
const includesBanana = fruits.includes("banana");
const includesGrape = fruits.includes("grape");
console.log(includesBanana); // Output: true
console.log(includesGrape); // Output: false
Above, we have an array fruits containing 4 elements. We use the includes() method to check if the array includes the elements 'banana' and 'grape'. The method returns true for 'banana' because it is found in the array and false for 'grape' because it is not.
We can also specify an optional fromIndex argument to start the search from a specific index in the array:
Usage with fromIndex:
const numbers = [1, 2, 3, 4, 5];
const includesTwo = numbers.includes(2, 2);
console.log(includesTwo);
// Output: false (not found after index 2)
In this example, we search for the element 2 starting from index 2. The method returns false because it does not find the element after index 2.
The Array.includes() method is a straightforward way to determine whether an array contains a particular element. It's often used for conditional checks, validation, and conditional logic based on the presence or absence of specific values in an array.
04. Array.filter()
The Array.filter() method in JavaScript is used to create a new array containing all elements that pass a specified test defined by a provided function. It doesn't modify the original array but returns a new array with the filtered elements.
Filtering Elements
const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter((element) => element % 2 === 0);
console.log(evenNumbers);
// Output: [2, 4, 6]
Above, we have an array numbers containing six elements. We use the filter() method to create a new array, evenNumbers, that includes only the elements that are even. The provided testing function (element) => element % 2 === 0 checks if an element is even. The method returns a new array containing [2, 4, 6].
Filtering by Object Property
const people = [
{ name: "Harshit", age: 21 },
{ name: "Bob", age: 32 },
{ name: "Charlie", age: 25 },
];
const adults = people.filter((person) => person.age >= 18);
console.log(adults);
// Output: [{ name: 'Harshit', age: 21 }, { name: 'Bob', age: 32 }, { name: 'Charlie', age: 25 }]
In this example, we have an array of objects, people, each representing a person with a name and age. We use the filter() method to create a new array, adults, that includes only people who are 18 years or older.
Iterating Over Arrays
Iterating over arrays methods help you go through every item in your array one by one and perform tasks on them.
01. Array.map()
The Array.map() method in JavaScript is used to create a new array by applying a provided function to each element in an existing array. It returns a new array with the results of applying the function to each element.
Transforming Elements
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map((element) => element * element);
console.log(squaredNumbers);
// Output: [1, 4, 9, 16, 25]
Above, we have an array numbers containing five elements. We use the map() method to create a new array, squaredNumbers, where each element is the result of squaring the corresponding element in the original array. The provided function (element) => element * element is applied to each element. The method returns a new array containing the squared numbers.
Transforming Objects
const people = [
{ name: "Harshit", age: 22 },
{ name: "Bob", age: 32 },
{ name: "Charlie", age: 25 },
];
const names = people.map((person) => person.name);
console.log(names); // Output: ['Harshit', 'Bob', 'Charlie']
In this example, we have an array of objects, people, where each object represents a person. We use the map() method to create a new array, names, by extracting the name property from each person object.
02. Array.forEach()
The Array.forEach() method in JavaScript is used to iterate over the elements of an array and perform a specified action for each element. It doesn't create a new array but provides a way to execute a function for each element in the original array.
Iterating Over Elements
const colors = ["red", "green", "blue"];
colors.forEach((color) => {
console.log(color);
});
Above, we have an array colors containing three elements. We use the forEach() method to iterate over each element in the array and log each element to the console. The provided function (color) => { console.log(color); } is executed for each element, resulting in the console output of each color.
Modifying Elements
const numbers = [1, 2, 3, 4];
numbers.forEach((element, index, array) => {
array[index] = element * 2;
});
console.log(numbers);
// Output: [2, 4, 6, 8]
In this example, we have an array of numbers, numbers. We use the forEach() method to iterate over each element, double the value of each element, and modify the original array in place. This technique is useful when you need to apply a function to each element while keeping the original array.
03. Array.some()
The Array.some() method in JavaScript is used to check if at least one element in an array satisfies a specified test. It returns a boolean value (true if the condition is met by at least one element, and false otherwise).
Checking for Element Satisfaction
const numbers = [1, 2, 3, 4, 5];
const hasEvenNumbers = numbers.some((element) => element % 2 === 0);
console.log(hasEvenNumbers);
// Output: true (at least one even number exists)
Above, we have an array numbers containing five elements. We use the some() method to check if at least one element in the array is even. The provided testing function (element) => element % 2 === 0 checks if an element is even. The method returns true because there is at least one even number in the array.
04. Array.every()
The Array.every() method in JavaScript is used to check if all elements in an array satisfy a specified test. It returns a boolean value (true if the condition is met by all elements, and false otherwise).
Checking if All Elements Satisfy a Condition
const numbers = [2, 4, 6, 8, 10];
const allEvenNumbers = numbers.every((element) => element % 2 === 0);
console.log(allEvenNumbers);
// Output: true (all numbers are even)
Above, we have an array numbers containing five elements. We use the every() method to check if all elements in the array are even. The provided testing function (element) => element % 2 === 0 checks if an element is even. The method returns true because all numbers in the array are even.
const numbers = [2, 4, 6, 8, 9];
const allEvenNumbers = numbers.every((element) => element % 2 === 0);
console.log(allEvenNumbers);
// Output: false (not all numbers are even)
In this example, we have the same array numbers, but this time one of the elements (9) is not even. We use the every() method to check if all elements in the array are even. The method returns false because not all numbers in the array are even.
Iterating with Entries
Iterating with Entries array methods guide you through arrays, providing not only the elements but also their index positions, acting as a map to help you find your way around the array.
01. Array.entries()
The Array.entries() method in JavaScript is used to create an iterator object that allows you to iterate over an array's key-value pairs. It returns an iterator with key-value pairs in the form of [index, element].
Iterating Over Key-Value Pairs
const fruits = ["apple", "banana", "cherry"];
for (const entry of fruits.entries()) {
console.log(entry);
}
// output:
// [0, 'apple']
// [1, 'banana']
// [2, 'cherry']
Above, we have an array fruits containing three elements. We use the entries() method to create an iterator for the array. Then, we use a for...of loop to iterate over the key-value pairs. Each entry in the loop represents a key-value pair, where the key is the index and the value is the element at that index.
The Array.entries() method is helpful when we need to work with both the index and the corresponding elements in an array.
02. Array.keys()
The Array.keys() method in JavaScript is used to create an iterator object that allows us to iterate over the indices (keys) of an array. It returns an iterator with the array's indices.
Iterating Over Array Indices
const fruits = ["apple", "banana", "cherry"];
for (const index of fruits.keys()) {
console.log(index);
}
// output:
// 0
// 1
// 2
Above, we have an array fruits containing three elements. We use the keys() method to create an iterator for the array's keys (indices). Then, we use a for...of loop to iterate over the indices. Each index in the loop represents the index of an element in the array.
03. Array.values()
The Array.values() method in JavaScript is used to create an iterator object that allows us to iterate over the values of an array. It returns an iterator with the array's values.
Iterating Over Array Values
const fruits = ["apple", "banana", "cherry"];
for (const value of fruits.values()) {
console.log(value);
}
// output:
// 'apple'
// 'banana'
// 'cherry'
Above, we have an array fruits containing three elements. We use the values() method to create an iterator for the array's values. Then, we use a for...of loop to iterate over the values. Each value in the loop represents an element in the array.
Transforming Arrays
Transforming array javascript methods allow you to change, reorganize, and reshape your array elements to meet your specific needs.
04. Array.reduceRight()
The Array.reduceRight() method in JavaScript is used to reduce an array into a single value by applying a provided function from right to left. It iterates over the elements of the array in reverse order.
If you are beginner in Javascript, so you find it difficult to understand in starting, but trust me it is very useful method in the array.
Array.reduceRight() is commonly used for summing, averaging, or aggregating data in arrays.
Reducing from Right to Left
const numbers = [1, 2, 3, 4, 5];
const result = numbers.reduceRight(
(accumulator, currentElement) => accumulator + currentElement,
0
);
console.log(result);
// Output: 15 (1 + 2 + 3 + 4 + 5)
Above, we have an array numbers containing five elements. We use the reduceRight() method to reduce the array by adding all elements from right to left. The provided function (accumulator, currentElement) => accumulator + currentElement takes two parameters: accumulator, which accumulates the result, and currentElement, which represents the current element being processed. The initial value 0 is provided as the starting value for the accumulator.
The method processes the elements in reverse order, starting with 5, then 4, and so on. It accumulates the sum of all elements and returns the result, which is 15.
Reducing an Array of Objects
const people = [
{ name: "Alice", age: 28 },
{ name: "Bob", age: 32 },
{ name: "Charlie", age: 25 },
];
const averageAge =
people.reduceRight((totalAge, person) => totalAge + person.age, 0) /
people.length;
console.log(averageAge);
// Output: 28.333 (Average age of the people)
In this example, we have an array of objects, people, each representing a person with a name and age. We use the reduceRight() method to calculate the average age of the people in the array by summing up their ages and dividing by the number of people.
05. Array.reduce()
The Array.reduce() method in JavaScript is used to reduce an array into a single value by applying a provided function. It iterates over the elements of the array from left to right and accumulates a result based on the function's logic.
Reducing from Left to Right
const numbers = [1, 2, 3, 4, 5];
const result = numbers.reduce(
(accumulator, currentElement) => accumulator + currentElement,
0
);
console.log(result);
// Output: 15 (1 + 2 + 3 + 4 + 5)
Above, we have an array numbers containing five elements. We use the reduce() method to reduce the array by adding all elements from left to right. The provided function (accumulator, currentElement) => accumulator + currentElement takes two parameters: accumulator, which accumulates the result, and currentElement, which represents the current element being processed. The initial value 0 is provided as the starting value for the accumulator.
The method processes the elements in order, starting with 1, then 2, and so on. It accumulates the sum of all elements and returns the result, which is 15.
And like Array.reduceRight() method, we can use the Array.reduce method for summing, averaging, etc. of the array.
Type Checking
01. Array.isArray()
The Array.isArray() method in JavaScript is used to determine whether an object is an array. It returns a boolean value, true if the object is an array, and false if it's not.
Checking If an Object is an Array
const array = [1, 2, 3, 4, 5];
const notArray = "I am not an array";
const isArray = Array.isArray(array);
const isNotArray = Array.isArray(notArray);
console.log(isArray); // Output: true
console.log(isNotArray); // Output: false
Above, we have an array array and a non-array notArray. We use the Array.isArray() method to check whether each of these objects is an array.
The method returns true for array because it's an array, and it returns false for notArray because it's not an array.
Detecting Arrays in Complex Objects
const data = [1, 2, { name: "Alice", age: 28 }, [3, 4]];
for (const item of data) {
if (Array.isArray(item)) {
console.log("Found an array:", item);
}
}
// Output: Found an array: [3, 4]
In this example, we have a complex data structure containing an array data. We iterate over the elements of the data array and use Array.isArray() to detect if an element is an array. In this case, we find an array within the data and log it.
Creating Arrays
01. Array.of()
The Array.of() method in JavaScript is used to create a new array with the specified values as its elements. It's a convenient way to create an array with one or more elements, especially when you want to ensure that the arguments are treated as elements and not as the length of the array.
Creating an Array with Elements
const numbers = Array.of(1, 2, 3, 4, 5);
console.log(numbers); // Output: [1, 2, 3, 4, 5]
Above, we use the Array.of() method to create a new array, numbers, with the specified values as its elements. The method ensures that the values are treated as elements, so you get an array containing the values [1, 2, 3, 4, 5].
Handling Edge Cases
const emptyArray = Array.of();
const singleValueArray = Array.of(42);
console.log(emptyArray); // Output: []
console.log(singleValueArray); // Output: [42]
The Array.of() method can also handle edge cases where we want to create an array without elements or with a single element. It ensures that the arguments are treated as elements, even when no arguments are provided.
02. Array.from()
The Array.from() method in JavaScript is used to create a new array from an array-like or iterable object. It provides a way to transform a collection of values, such as the elements of an array or the characters in a string, into a new array.
Creating an Array from an Iterable
const iterableString = "hello";
const arrayFromIterable = Array.from(iterableString);
console.log(arrayFromIterable); // Output: ['h', 'e', 'l', 'l', 'o']
Above, we have a string iterableString. We use the Array.from() method to create a new array, arrayFromIterable, from the characters in the string. The method iterates over the iterable object (in this case, the string) and creates an array with each character as an element.
Mapping and Filtering Elements
const numbers = [1, 2, 3, 4, 5];
const filteredArray = Array.from(numbers, (element) => element * 2);
console.log(filteredArray);
// Output: [2, 4, 6, 8, 10]
In this example, we have an array of numbers, numbers. We use the Array.from() method to create a new array, filteredArray, by applying a mapping function to each element of the original array. The provided function (element) => element * 2 doubles the value of each element, resulting in the new array [2, 4, 6, 8, 10].
Usage: Creating an Array from Array-Like Objects
const arrayLike = { 0: "apple", 1: "banana", 2: "cherry", length: 3 };
const arrayFromArrayLike = Array.from(arrayLike);
console.log(arrayFromArrayLike);
// Output: ['apple', 'banana', 'cherry']
In this example, we have an array-like object arrayLike that has indexed properties and a length property. We use the Array.from() method to create a new array, arrayFromArrayLike, from the array-like object. The method extracts values from the indexed properties and creates an array.
Flattering Arrays
03. Array.flat()
The Array.flat() method in JavaScript is used to create a new array with all sub-array elements concatenated into it. It "flattens" a multi-dimensional array into a one-dimensional array.
Flattening a Multi-dimensional Array
const multiDimensionalArray = [1, [2, 3], [4, [5, 6]]];
const flattenedArray = multiDimensionalArray.flat();
console.log(flattenedArray);
// Output: [1, 2, 3, 4, 5, 6]
Above, we have a multi-dimensional array, multiDimensionalArray, containing nested arrays. We use the flat() method to create a new array, flattenedArray, where all the sub-array elements are concatenated into a one-dimensional array. The resulting array contains all the elements from the original array, with nested arrays "flattened" into a single array.
Controlling Flattening Depth
const deeplyNestedArray = [1, [2, [3, [4]]]];
const partiallyFlattenedArray = deeplyNestedArray.flat(2);
console.log(partiallyFlattenedArray); // Output: [1, 2, 3, [4]]
In this example, we have a deeply nested array, deeplyNestedArray. We use the flat(2) method to control the flattening depth. The argument 2 specifies that it should flatten at most two levels deep. As a result, the innermost nested array [4] is not flattened, and the array is only partially flattened.
Handling Empty Slots in Arrays
const sparseArray = [1, , 3, 4];
const flatSparseArray = sparseArray.flat();
console.log(flatSparseArray); // Output: [1, 3, 4]
The flat() method can be used to remove empty slots from arrays. In this example, we have a sparse array sparseArray with an empty slot (undefined value). The flat() method removes the empty slot, resulting in a flat array without undefined values.
In Javascript Array.flat() method is a useful tool for working with multi-dimensional arrays and arrays with nested structures.
It simplifies the process of flattening arrays, allowing us to work with the elements in a one-dimensional form. It's commonly used in data transformation and manipulation tasks when dealing with structured data.
04. Array.flatMap()
The Array.flatMap() method in JavaScript is used to map and flatten an array simultaneously. It applies a provided function to each element of the array and then flattens the results into a new array. This method is particularly useful when we want to transform the elements of an array and keep the result as a one-dimensional array.
Mapping and Flattening an Array
const numbers = [1, 2, 3, 4, 5];
const doubledAndSquared = numbers.flatMap((element) => [
element * 2,
element ** 2,
]);
console.log(doubledAndSquared);
// Output: [2, 1, 4, 9, 6, 16, 10, 25, 8, 36]
Above, we have an array numbers containing five elements. We use the flatMap() method to create a new array, doubledAndSquared, by applying a mapping function (element) => [element * 2, element ** 2] to each element. The mapping function transforms each element into an array with two values: the element multiplied by 2 and the element squared. The flatMap() method then flattens the resulting arrays into a single, one-dimensional array.
Removing Empty Values
const strings = ["Hello", "", "World"];
const nonEmptyWords = strings.flatMap((element) => element.split(" "));
console.log(nonEmptyWords);
// Output: ['Hello', 'World']
In this example, we have an array of strings, strings, containing some empty values. We use the flatMap() method with a mapping function to split each string by whitespace. The result is an array of words. The flatMap() method not only maps the strings but also flattens the results, removing the empty string.
Flattening Arrays of Arrays
const nestedArrays = [
[1, 2],
[3, 4],
[5, 6],
];
const flatArray = nestedArrays.flatMap((element) => element);
console.log(flatArray); // Output: [1, 2, 3, 4, 5, 6]
In this example, we have an array of arrays, nestedArrays. We use the flatMap() method to flatten the nested arrays into a single array. The provided mapping function (element) => element returns each inner array as is, and the method flattens them into a one-dimensional array.
Locale-specific Formatting
01. Array.toLocalString()
The Array.toLocaleString() method in JavaScript is used to create a localized, human-readable string representation of an array. It converts the array elements into strings, using each element's toLocaleString() method, and separates them with locale-specific values like commas. This method is particularly useful for displaying data in a format that adheres to the user's locale and language preferences.
Creating a Localized String Representation
const numbers = [1000, 2000, 3000];
const localizedString = numbers.toLocaleString();
console.log(localizedString);
// Output varies based on the user's locale, e.g., "1,000, 2,000, 3,000"
Above, we have an array numbers containing three numbers. We use the toLocaleString() method to create a localized string representation of the array. The resulting string is formatted according to the user's locale, which typically includes using appropriate thousands separators and decimal separators.
Specifying Locales and Options
const priceList = [1000.5, 2500.75, 3000.25];
const localizedString = priceList.toLocaleString("de-DE", {
style: "currency",
currency: "EUR",
});
console.log(localizedString);
// Output: "1.000,50 €, 2.500,75 €, 3.000,25 €"
In this example, we have an array priceList with prices. We use the toLocaleString() method with options to specify the locale as German (de-DE) and format the numbers as currency in euros (EUR). The method produces a string with the values formatted according to the specified options.
Conclusion
Finally, JavaScript provides a versatile set of array methods that empower developers to easily manipulate and transform data. From mapping and filtering to flattening and formatting, these array methods are the building blocks of efficient and elegant code. By mastering these techniques, you not only streamline your development process but also open the door to endless possibilities in data processing.