Read on TwitterThese 5 functions have become a staple of working with arrays in JS since they were introduced.
Here& #39;s a quick overview of what each one does and how we can use them.
--
#100DaysOfCode #developer #DEVCommunity
JS: forEach, map, reduce, filter & sort overview https://abs.twimg.com/emoji/v2/... draggable="false" alt="🟡" title="Gelber Kreis" aria-label="Emoji: Gelber Kreis"> These 5 functions have become a staple of working with arrays in JS since they were introduced. Here& #39;s a quick overview of what each one does and how we can use them. https://abs.twimg.com/emoji/v2/... draggable="false" alt="🧵" title="Thread" aria-label="Emoji: Thread"> 1/8-- #100DaysOfCode #developer #DEVCommunity" title="https://abs.twimg.com/emoji/v2/... draggable="false" alt="🟡" title="Gelber Kreis" aria-label="Emoji: Gelber Kreis"> JS: forEach, map, reduce, filter & sort overview https://abs.twimg.com/emoji/v2/... draggable="false" alt="🟡" title="Gelber Kreis" aria-label="Emoji: Gelber Kreis"> These 5 functions have become a staple of working with arrays in JS since they were introduced. Here& #39;s a quick overview of what each one does and how we can use them. https://abs.twimg.com/emoji/v2/... draggable="false" alt="🧵" title="Thread" aria-label="Emoji: Thread"> 1/8-- #100DaysOfCode #developer #DEVCommunity" class="img-responsive" style="max-width:100%;"/>
Before diving into the list, I wanted to cover what allows all of these functions to exist. They are all examples of & #39;Higher-Order Functions& #39;.
This is when a function operates on another. I covered it further in the thread linked. 2/8
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔗" title="Link Symbol" aria-label="Emoji: Link Symbol"> https://twitter.com/MrConerMurphy/status/1364206725826564109">https://twitter.com/MrConerMu...
This is when a function operates on another. I covered it further in the thread linked. 2/8
.forEach() allows us to loop over an array and access each item individually, similar to how a for loop would do it but in a nicer syntax.
.forEach().forEach() allows us to loop over an array and access each item individually, similar to how a for loop would do it but in a nicer syntax. https://abs.twimg.com/emoji/v2/... draggable="false" alt="❗" title="Rotes Ausrufezeichen" aria-label="Emoji: Rotes Ausrufezeichen"> You can& #39;t return values from a .forEach() if you want to return values you need to use .map(). 3/8" title="https://abs.twimg.com/emoji/v2/... draggable="false" alt="1️⃣" title="Tastenkappe Ziffer 1" aria-label="Emoji: Tastenkappe Ziffer 1"> .forEach().forEach() allows us to loop over an array and access each item individually, similar to how a for loop would do it but in a nicer syntax. https://abs.twimg.com/emoji/v2/... draggable="false" alt="❗" title="Rotes Ausrufezeichen" aria-label="Emoji: Rotes Ausrufezeichen"> You can& #39;t return values from a .forEach() if you want to return values you need to use .map(). 3/8" class="img-responsive" style="max-width:100%;"/>
As mentioned for .forEach(), if you want to iterate over an array, manipulate the value(s) in some way & return the final results, you need to use a .map()
.map() and .forEach() are very similar, to tell which to use think if you need to return a new array. 4/8
.map()As mentioned for .forEach(), if you want to iterate over an array, manipulate the value(s) in some way & return the final results, you need to use a .map().map() and .forEach() are very similar, to tell which to use think if you need to return a new array. 4/8" title="https://abs.twimg.com/emoji/v2/... draggable="false" alt="2️⃣" title="Tastenkappe Ziffer 2" aria-label="Emoji: Tastenkappe Ziffer 2"> .map()As mentioned for .forEach(), if you want to iterate over an array, manipulate the value(s) in some way & return the final results, you need to use a .map().map() and .forEach() are very similar, to tell which to use think if you need to return a new array. 4/8" class="img-responsive" style="max-width:100%;"/>
.reduce() is a special method that is often one of the hardest to learn due to how versatile it is.
With a .map() you operate on the values & return. But, with .reduce(), you can do pretty much anything.
In this example, I sum the values in the array. 5/8
.reduce().reduce() is a special method that is often one of the hardest to learn due to how versatile it is.With a .map() you operate on the values & return. But, with .reduce(), you can do pretty much anything.In this example, I sum the values in the array. 5/8" title="https://abs.twimg.com/emoji/v2/... draggable="false" alt="3️⃣" title="Tastenkappe Ziffer 3" aria-label="Emoji: Tastenkappe Ziffer 3"> .reduce().reduce() is a special method that is often one of the hardest to learn due to how versatile it is.With a .map() you operate on the values & return. But, with .reduce(), you can do pretty much anything.In this example, I sum the values in the array. 5/8" class="img-responsive" style="max-width:100%;"/>
.filter() does what it says on the tin, it filters the array down to a smaller size based on if each value passes/fails the filter condition.
In this example, I check if the value is an even number by checking if the remainder of dividing by 2 is 0. 6/8
.filter().filter() does what it says on the tin, it filters the array down to a smaller size based on if each value passes/fails the filter condition.In this example, I check if the value is an even number by checking if the remainder of dividing by 2 is 0. 6/8" title="https://abs.twimg.com/emoji/v2/... draggable="false" alt="4️⃣" title="Tastenkappe Ziffer 4" aria-label="Emoji: Tastenkappe Ziffer 4"> .filter().filter() does what it says on the tin, it filters the array down to a smaller size based on if each value passes/fails the filter condition.In this example, I check if the value is an even number by checking if the remainder of dividing by 2 is 0. 6/8" class="img-responsive" style="max-width:100%;"/>
.sort() allows us to sort an array based on a compare function we pass in.
Sort works by taking 2 values (a,b) and checking if one is larger than the other to ascertain the correct order. This is then returned as a new array. 7/8
.sort().sort() allows us to sort an array based on a compare function we pass in. Sort works by taking 2 values (a,b) and checking if one is larger than the other to ascertain the correct order. This is then returned as a new array. 7/8" title="https://abs.twimg.com/emoji/v2/... draggable="false" alt="5️⃣" title="Tastenkappe Ziffer 5" aria-label="Emoji: Tastenkappe Ziffer 5"> .sort().sort() allows us to sort an array based on a compare function we pass in. Sort works by taking 2 values (a,b) and checking if one is larger than the other to ascertain the correct order. This is then returned as a new array. 7/8" class="img-responsive" style="max-width:100%;"/>
If you found this thread helpful, please consider sharing it so others can also find it helpful. Also, if you wish to see more content like this please consider following my account. https://abs.twimg.com/emoji/v2/... draggable="false" alt="😄" title="Lächelndes Gesicht mit geöffnetem Mund und lächelnden Augen" aria-label="Emoji: Lächelndes Gesicht mit geöffnetem Mund und lächelnden Augen">
