DEV Community

Enhance your JS Skill by using the correct array method

Code Oz on November 05, 2021

I saw a lot of junior developper using forEach when they need to handle array. I will show you and help you to over-abuse of forEach by using the ...

Read full post

Jon Randy 🎖️ • Nov 5 '21

you need to init this accumulator

This is incorrect, you can omit the initial value for the accumulator. If you do this, the accumulator will be automatically initialised to the first item in the array, and the reduce will continue from the next item. Your example can therefore be written more efficiently as:

const items = [1, 2, 3, 4]

const sum = items.reduce((accumulator, currentValue) => {
   return accumulator += currentValue
})

Code Oz • Nov 6 '21

Hey thanks for comment, in fact you but it's really not adice to not init your accumulator value!

I edtied the post about this fact thanks!

Jon Randy 🎖️ • Nov 6 '21

The ability to have the accumulator automatically initiated like this is a part of JS and allows for more efficient code. Telling people not to use it is bad advice. The same advice applies as per my other comment - how do you expect developers to improve at JS if there is an insistence on treating them as children who will not understand more than basic code. 'Readable' code is subjective, and should not come at the price of less efficient code, and the misleading of people who are learning.

Mora Emeel • Nov 6 '21

I was about to write this comment

Jon Randy 🎖️ • Nov 5 '21 • Edited

When you are using filter you need to return a boolean (the condition of filter) in each iteration

This isn't true. You can return anything you like - the value will be coerced to a boolean based upon its truthiness or falsiness. Examples:

const arr = [1, 2, 3, 4]
const evenNumbers = arr.filter(item => 1 & item ^ 1)   // [2, 4]
const oddNumbers = arr.filter(item => item % 2)   // [1, 3]

Both of these filter functions return numbers, not booleans. Similarly, you could strip empty strings out of an array by just returning the string in the filter function:

const arr = ['aaa', '', 'bbb', 'ccc', '', '', 'ddd']
const nonEmptyStrings = arr.filter(item => item)   // ['aaa', 'bbb', 'ccc', 'ddd']

This works because non-empty strings are truthy and empty strings are falsey

Code Oz • Nov 6 '21

hey yes you can but it's not totally clear for every dev that will read your code! I prefer the option of making a good return about a condition ! I edited the post to add your comment thanks

Jon Randy 🎖️ • Nov 6 '21 • Edited

If we want to make the code totally clear for every dev, then we need to write for the lowest common denominator of understanding... which is obviously a terrible idea since no developer will ever get any better, or understand how JS actually works

Sebastian Larrieu • Nov 6 '21

Coerce to boolean is a bad practice and you are not a better programmer because you use one less line of code, also developers that write clear code are not child

Jon Randy 🎖️ • Nov 7 '21 • Edited

I very much did not say they were children. I said that by misleading them and falsely telling them they have to do something - you are treating them like a child - assuming they cannot understand the language feature and make the choice for themselves. You are denying them knowledge, to preserve the dogma of 'clean' code

Jon Randy 🎖️ • Nov 7 '21 • Edited

From the MDN docs for filter:

Function is a predicate, to test each element of the array. Return a value that coerces to true to keep the element, or to false otherwise.

Thomas Junkツ • Nov 10 '21

And then there is reduceRight which helped me a lot back in 2012 when we had input fields like customer.billingadress.street and had to parse that to {"customer":{"billingadress":{"street": $customer.billingadress.street.value}}}

Code Oz • Nov 10 '21

Nice usage of reduceRight!

renaudham • Nov 5 '21

Hi.
Interesting because i tend to forget "some" and "reduce".
Anyway note that those functions has a slower performance, and forEach is not great also, than a for in...

Code Oz • Nov 6 '21

happy to help you ;D

CaptFlys • Nov 5 '21

Nice!

Amran AL Ketara • Nov 6 '21

Nice article!
Can I post this in my blog and mention you in it ?

Code Oz • Nov 9 '21

hey sorry I can't accept! I will put it in my own blog and it's bad to copy the same article in many website for the SEO ;D

Amran AL Ketara • Nov 9 '21

🌹🌹

Code Oz • Nov 9 '21

Hey! I mean accumulator + currentValue but I use += since it will add current value to the current accumulator! it made the same thing but it return the accumulator directly!