Rahat
Enhance your JS Skill by using the correct array method
I saw a lot of junior developers using forEach when they need to handle an array.
I will show you and help you to over-abuse of forEach by using the correct array methods depending on the current context!
forEach
When to use it?
As I said before, you don't need to over-abuse of forEach. In some cases, forEach is a very good method.
If you need to iterate an array in order to make a specific action (for example console log each item).
You shouldn't use forEach every time you need to fill a new array (before doing this, check if you can use other methods)
👇
const items = [1, 2, 3, 4, 5]items.forEach(item => console.log(item))forEach DOESN'T return any value !!
// // ...const toto = items.forEach(item => console.log(item))toto // undefinedfilter
When to use it?
As named, it allows us to filter some value in your array depending on your condition.
Example 👇
For example, if you want to remove an odd number
❌ With forEach
const items = [1, 2, 3, 4]const evenValue = []items.forEach(item => {if (item % 2 == 0) {evenValue.push(item)}})✅ With filter
const items = [1, 2, 3, 4]const evenValue = items.filter(currentValue => {return currentValue % 2 == 0})💡 When you are using filter you need to return a boolean (the condition of filter) in each iteration.
map
When to use it?
When you need to transform items from one array to another array!
Example 👇
For example, if you want to multiply all values in an array by 2.
❌ With forEach
const items = [1, 2, 3, 4]const result = []items.forEach(item => {result.push(item * 2)})✅ With map
const items = [1, 2, 3, 4]const result = items.map(item => {return item * 2})💡 When you are using map you need to return an item (transformed item) in each iteration.
reduce
When to use it?
When you need to get a single value from an array. This 'single value' can be an array.
Example 👇
For example, if you want to sum all numbers in an array.
❌ With forEach
const items = [1, 2, 3, 4]const result = 0items.forEach(item => {accumulator += item})✅ With reduce
const items = [1, 2, 3, 4]const sum = items.reduce((accumulator, currentValue) => {return accumulator += currentValue}, 0)💡 When you are using reduce you need to return the accumulator (a value that is returned by the reduce method) in each iteration and you need to init this accumulator (in the example above we init the accumulator to 0)!
find
When to use it?
When you need to find an item that fits a condition and you are using this item after.
const items = [1, 2, 3, 4]const item = items.find(item => item === 3)// ...// Use item afterwardssome
When to use it?
If you need to check if one of your items match a condition (like find) but you don't need to use the item afterwards.
Example 👇
For example, if you want to check if your array has the number 2.
Using find is bad if you don't use the item afterwards, or you just use the item for checking if the value is undefined or not (to know if the condition has matched)
❌ With find
const items = [1, 2, 3, 4]const item = items.find(item => item === 2)if (item !== undefined) {// ...}✅ With some
const items = [1, 2, 3, 4]const hasNumber2 = items.some(item => item === 2)if (hasNumber2) {...}💡 some return boolean if at least one item matched your condition
every
When to use it?
every is similar to some, it will check if ALL of your items match your condition. Instead of some that will return true if only one item matches the condition, every will return true only if all items match the condition!
TLDR;
As you can see you can use a lot of array methods depending on the context, so you can avoid over-abuse of forEach!
It's also a good point to use methods depending on the current context for other developers that will read your code (for example if I see a filter I know that we need to filter a value from this array)
A good point that I didn't show above, it's about the fact that you can combine array methods (except forEach since forEach doesn't return value).
So you can make this 👇
You need to filter odd values from the array and multiply the event number by 2.
const items = [1, 2, 3, 4]const result = items.filter(item => item % 2 == 0 ).map(item => item * 2)
Rahat
I am Rayhan Hossain Rahat. I am a Web Developer.