Introduction
JavaScript relies heavily on arrays which are data structures, for managing collections of information. Developers can efficiently and gracefully manipulate arrays using a range of built in methods provided by JavaScript. In this blog post we will explore array methods in JavaScript offering clear examples to enhance your understanding of how they can be used and their versatility.
Let’s explore commonly used JavaScript array methods one by one with examples.
forEach( )
The .forEach() method calls a function for each element in an array.It doesn’t mutate the original array, but it is very useful when you want to perform certain action on each element. .forEach() method is not executed for empty elements.
Example:
const numberArray = [1,2,3,4];
numberArray.forEach((num) => {
console.log(num*2);
});
concat( )
The .concat() method returns a new array by concatenating (joining) two or more arrays. It does not change the existing array.
Example:
const array1 = [1,2];
const array2 = [3,4];
const combinedArr = array1.concat(array2);
console.log(combinedArr); // [1,2,3,4]
map( )
The .map() method creates a new array by calling a function for every array element. It does not mutate the original array.
Example:
const numbers = [1,2,3,4];
const squaredNumbers = numbers.map((num) => num*num);
console.log(squaredNumbers); // [1,4,9,16]
reduce( )
The .reduce() methods returns a single value i.e., functions accumulating results. It basically executes a reducer function for array elements.
Example:
const number = [100,25,25];
const subtractedValue = number.reduce((total,num) => total-num);
console.log(subtractedValue); // 50
filter( )
The .filter() method returns a new array filled with element that passed through a specified condition. It does not change the existing array.
Example:
const numbers = [1,2,3,4,5];
const evenNumbers = numbers.filter((nums) => num%2 === 0);
console.log(evenNumbers); // [2,4]
sort( )
The .sort() method arranges the element of an array in ascending order (by default). However for complex sorting custom sorting function can be used. It overwrites the original array.
Example:
const fruits = ["banana", "apple", "oranges"];
fruits.sort();
console.log(fruits); // ["apple","banana","oranges"]
find( )
With .find() method you can find and return the very first element of an array that satisfies a given condition.
Example:
const fruits = ["apple", "banana", "oranges","grapes"];
const result = fruits.find((fruit) => fruit.startsWith("b"));
console.log(result); // banana
slice( )
The .slice() method return selected elements of an array in a new array. It selects from a given start, up to a (not inclusive) given end. It does not make any changes in original array.
Example:
const numbers = [1,2,3,4,5]
const slicedNumbers = numbers.slice(1,3);
console.log(slicedNumbers); // [2,3]
So, these are couple of array methods with their examples that we saw from many array methods. These methods make your development easy and also are efficient and readable to a great extent.
Conclusion
In this blog, we saw common array methods that we generally use a lot while manipulating array in JavaScript. Having a good knowledge of JavaScript array methods is very essential for a JavaScript developer or someone who is working with JavaScript as these methods not only provides elegant solutions but are also maintainable and readable.
With these thank you if you were there till the end. For more such blogs and updates follow Front-end Competency.
Follow NashTech Blogs for more amazing blogs.
