In JavaScript, an array is an object. More often than not, we will be provided with an array of elements or an object that consists of an array of elements that we need to extract and/or modify and this is where some of these methods make our lives easier:
- array.mapping() / array.forEach()
- array.filter()
- array.reduce()
Arr Captain
Why do we use arrays? Arrays were most likely created for us to have an easy way to store a collection of similar data, (It's possible to have mixed datatypes but not recommended - that's why we have objects!) so that we don't need to declare a ton of variables.
const array1 = [1,3,3,7]; //same datatype of integers
const array2 = [1,"3",3,7]; //legal but not recommended
vs.
const variable1 = 1;
const variable2 = 3;
const variable3 = 3;
const variable4 = 7;
Array Iterating
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
More often, you may need to extract information from an array and usually all of it and that's where array.map() and array.forEach() comes in. These functions iterate over every element and returns a callback function. The only difference is map returns a new Array while forEach only iterates over the elements. So what that means is that if you do not need to modify an array, use forEach instead of map.
Here is an example. Recently I had to fetch data from an API database but the array of moves contained a dash "-" and I didn't want that since it obstructed the way my project functions.
const moves = ["karate-chop","double-slap", "comet-punch", "mega-punch"]
I used the array.map() method to iterate over every move to replace the dash with a space and assigned the result to return to a new array, newMoves.
const newMoves = moves.map(move => move.replace(/[^a-zA-Z ]/g, " "))
console.log(moves)
console.log(newMoves)
// (4) ['karate-chop', 'double-slap', 'comet-punch', 'mega-punch'] // (4) ['karate chop', 'double slap', 'comet punch', 'mega punch']
whereas
const newMoves = moves.forEach(move => move.replace(/[^a-zA-Z ]/g, " "))
console.log(moves)
console.log(newMoves)
// (4) ['karate-chop', 'double-slap', 'comet-punch', 'mega-punch'] // undefined
There are ways around that to use forEach but it would be more work.
Array Filtering
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
Filtering an array is equally as important since sometimes you may not want to use everything from the array. The array.filter() method, creates a new array returning the condition you set in the callback function. The example in the documentary link is pretty self explanatory but it is also possible to use the ! - not operator to return an array to exclude element(s):
const ids = [1, 2, 3, 4, 5]
const newIds = ids.filter(id => id !== 2)
console.log(ids)
console.log(newIds)
//(5) [1, 2, 3, 4, 5]
//(4) [1, 3, 4, 5]
Array Reducing
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
Less often, we may need to break down an array and return it with one value. Remember, arrays are objects so we may have a list of numbers in an object and we want to return a total number. The parameters that the array.reduce() function takes are a callback function and an optional initialization value.
const numbers = [101, 4, 6, 20, 9];
const reduceFunction = (total, num) => {
return total - num;
}
console.log(numbers.reduce(reduceFunction))
// 62
console.log(numbers.reduce(reduceFunction, 100))
// -40
console.log(numbers.reduce(reduceFunction, 200))
// 60
I am sure there are many other array manipulation methods out there but these will be the most common, general ones that will be used and it's important to learn how to use them to improve QOL!
Top comments (0)