Simplify JavaScript Arrays
In this post we'll cover some methods of JavaScript that will make it easier for you to work with arrays and write more elegant codes.
Let's define our arrays
const beers = ["Heineken", "San Diego", "Coruja", "Saint Bier"]; const ages = [20, 25, 19, 21, 42];
We created two arrays, where we will use methods that we will understand next.
Desmystifyng some incredible methods!
Now that you've created the arrays you need yo work on, let's put your hand in the dough and check the results with some very interesting methods.
Array.every():
It allows you to test all the elements of your array. If any of the elements doesn't pass through the condition you defined, the return will be false
. See example:
// ES5 function isGreaterThan(age) { return age >= 18; } const greater = ages.every(isGreaterThan); // ES6 const isGreaterThan = (age) => age > 18; const greater = ages.every(isGreaterThan); console.log(greater); // true
The return of the greater
variable must be true
since all values in the ages
array are greather than 18
.
Note: If an empty array is given, the default return must be TRUE
Array.includes()
It allows checking whether or not an element exists in the defined array. Example:
console.log(beers.includes("Skol")); // false console.log(ages.includes(25)); // true
In the cases mentioned above the returns will be false
for beers.includes('Skol')
and true
for ages.includes(25)
.
Array.filter():
This method allows you to filter multiple elements with a condition you define. Example:
// ES5 function startWithS(word) { return word.indexOf("S") === 0; } // ES6 const startWithS = (word) => word.indexOf("S") === 0; const beersStartWithS = beers.filter(startWithS); console.log(beersStartWithS); // [0: 'San Diego', 1: Saint Bier]
The return of the beersStartWithS
variable should be:
[ 0: 'San Diego', 1: 'Saint Bier' ]
Since all returned elements begin with the letter S
.
Array.find():
The difference of this method compared to the filter()
method is that first one found will be returned based in condition defined by you. See example:
// ES5 function findSanDiego(element) { return element === "San Diego"; } // ES6 const findSanDiego = (element) => element === "San Diego"; const beerSanDiego = beers.find(findSanDiego); console.log(beerSanDiego); // 'San Diego'
We've created a filter to fetch the element called San Diego
as our beers
array has an element with this name, we will get the return San Diego
in the variable beerSanDiego
, if there were more elements with the same name we would receive the first one found in our beers
array.
Note: If there were no elements to be returned, we would get the undefined
return
Array.map()
This method traverses all elements of the array, executing functions for each element, and returning a new array as a result. Example:
// ES5 function upAge(age) { return age + 1; } // ES6 const upAge = (age) => age + 1; const newAges = ages.map(upAge); console.log(newAges); // [0: 21, 1: 26, 2: 20, 3: 22, 4: 43]
We will receive the following return in newAges
:
;[(0: 21), (1: 26), (2: 20), (3: 22), (4: 43)]
Where plus one
was added to its initial values.
Array.some()
This method checks if a least one element satisfies the condition. Example:
// ES5 function hasHeinekenOrSaint(beer) { return beer === "Saint Bier" || beer === "Heineken"; } // ES6 const hasHeinekenOrSaint = (beer) => beer === "Saint Bier" || beer === "Heineken"; const heinekenSaint = beers.some(hasHeinekenOrSaint); console.log(heinekenSaint); // true
In this case it's being checked whether there are occasions for Heineken
or Saint Bier
elements. If it does the result will be true
.
Array.reduce()
You can use the reduce method for some cases, one of which is to facilitate calculations. Example:
// ES5 function reducerAge(accumulator, age) { return accumulator + age; } // ES6 const reducerAge = (accumulator, age) => accumulator + age; const sumAges = ages.reduce(reducerAge); console.log(sumAges); // 127
The return in this case will be 127
the sum of all ages.
Conclusion
Using features offered by language gives you great powers!
Do you use these features? Share your experience in the comments. ⚡️