Javascript array functions allow you to manipulate data easily with fewer lines of codes. Having a knowledge of these Javascript array functions and how to use them can reduce the number of written codes, increase the performance of your app and also make you a better developer. Enough of the story let’s delve into these array functions.
- forEach()
- map()
- filter()
- concat()
- sort()
- slice()
- splice()
- includes()
- reverse()
- push()
- pop()
- shift()
- unshift()
1. forEach()
This method is used to iterate or loop through an array by executing a callback function on each array item
let numbers = [1, 2, 3, 4];
numbers.forEach(item => {
console.log(item * 5); // output: 5 10 15 20
})
2. map()
This method is also used to loop through every item in an array, executing a callback function on each item in the array. The map function returns a new array after executing the callback on each item. The major difference between forEach() and map() is map() returns a new array after looping through all items an array while forEach() returns undefined. In other words, if you need the result of the executed callback function on each array item then map() is suited for you otherwise use forEach().
let numbers = [1, 2, 3, 4];
//map function
let mapResult = numbers.map(item => {
console.log(item * 5); // output: 5 10 15 20
return item * 5;
})
console.log(mapResult); //[5, 10, 15, 20]
//foreach function
let forEachResult = numbers.forEach(item => {
console.log(item * 5); // output: 5 10 15 20
return item * 5;
})
console.log(forEachResult); //undefined
3. filter()
This method allows you to filter through a collection of items in an array. In the filter function, you pass a callback function, the callback function is executed against every item in the array. If the callback function returns a true statement the item is added to a new array.
let cars = [
{ name: "Toyota", topSpeed: 200 },
{ name: "Ferrari", topSpeed: 350 },
{ name: "Ford", topSpeed: 300 },
{ name: "Nissan", topSpeed: 200 },
{ name: "BMW", topSpeed: 250 },
{ name: "Honda", topSpeed: 200 },
]
let fastCars = cars.filter(car => car.topSpeed > 200);
console.log(fastCars);
// [
// { name: "Ferrari", topSpeed: 350 },
// { name: "Ford", topSpeed: 300 },
// { name: "BMW", topSpeed: 250 },
// ]
4. concat()
This method allows you to join multiple arrays together to form one array.
let evenNumbers = [2, 4, 6, 8, 10]; let oddNumbers = [1, 3, 5, 7, 9]; let decimalNumbers = [0.1, 0.2, 0.3, 0.4, 0.5]; let allNumbers = evenNumbers.concat(oddNumbers, decimalNumbers); console.log(allNumbers); // [2, 4, 6, 8, 10, 1, 3, 5, 7, 9, 0.1, 0.2, 0.3, 0.4, 0.5]
5. sort()
The sort method allows you to sort items in an array either in descending or ascending order. By default without passing a callback to the sort() function, it sorts the array base on the Unicode point value, in other words, it converts each individual array item to string and sort them alphabetically with some special rules such as Capital Letters coming before Lower Letters.
let numbers = [1, 15, 2, 21, 33, 04, 03, 12, 05, 30, 400, 250]; let sortedNumbers = numbers.sort() console.log(sortedNumbers); //[1, 12, 15, 2, 21, 250, 3, 30, 33, 4, 400, 5]
As you can see in the example above it sorts number 250 before number 3 which is not the desired result we want, Therefore, to get the desired result we pass a callback function to the sort() function.
let numbers = [1, 15, 2, 21, 33, 04, 03, 12, 05, 30, 400, 250]; let ascOrder = numbers.sort((a, b) => a < b ? -1 : 1); console.log(ascOrder); //[1, 2, 3, 4, 5, 12, 15, 21, 30, 33, 250, 400] let descOrder = numbers.sort((a, b) => a > b ? -1 : 1); console.log(descOrder); //[400, 250, 33, 30, 21, 15, 12, 5, 4, 3, 2, 1]
6. slice()
This method returns selected items in an array into a new array. The function takes a start argument and an end argument. It uses this start and end arguments to select items in the array. The slice() function selects the items starting at the given start argument, and ends at, but does not include the given end argument.
let numbers = [1, 15, 2, 21, 33, 04, 03, 12, 05, 30, 400, 250]; let removedNumbers = numbers.slice(3, 7); console.log(removedNumbers); //[21, 33, 4, 3]
7. splice()
This method is used to add or remove items into an array. It deletes zero or more items starting from the provided start argument and replaces the items with zero or more new values that are provided. The important thing to note about splice is that it modifies the initial array. For example
let numbers = [1, 2, 3, 4, 5, 6, 7, 8]; let removedNumbers = numbers.splice(3, 3, "a", "b", "c"); console.log(numbers); // [1, 2, 3, "a", "b", "c", 7, 8] console.log(removedNumbers); //[4, 5, 6]
8. includes()
This method checks if an array consists of the item passed in the include() function. The function returns true if the item exists and false if it does not.
let numbers = [1, 2, 3, 4, 5, 6, 7, 8]; console.log(numbers.includes(3)); // true console.log(numbers.includes(9)); // false
9. reverse()
This method reverses the order of the items of the array it is applied to.
let numbers = [1, 2, 3, 4, 5, 6, 7, 8]; console.log(numbers.reverse()); // [8, 7, 6, 5, 4, 3, 2, 1]
10. push()
This method adds the arguments given to it, in order, to the end of the array. It modifies the array directly rather than creating a new array;
let numbers = [1, 2, 3, 4, 5, 6, 7, 8]; numbers.push(9, 10) console.log(numbers); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
11. pop()
This method removes the last item in an array and returns the item that was removed
let numbers = [1, 2, 3, 4, 5, 6, 7, 8]; let removednumber = numbers.pop() console.log(numbers); // [1, 2, 3, 4, 5, 6, 7] console.log(removednumber); // 8
12. shift()
This method removes the first item in an array and returns the item that was removed.
let removednumber = numbers.shift() console.log(numbers); // [2, 3, 4, 5, 6, 7, 8] console.log(removednumber); // 1
13. unShift()
This method adds the arguments given to it, in order, to the beginning of the array. It modifies the array directly rather than creating a new array;
let numbers = [4, 5, 6, 7, 8, 9, 10]; numbers.unshift(1, 2, 3) console.log(numbers); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
*** For more Javascript Array Functions visit https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
In conclusion, mastering these important Javascript array functions and knowing when to use them will make you a better developer and increase your development workflow.
Do you like this article 🙂 Like, Comment and Share.
Cheers!!!
