Discussion on: Which Array Function When?

[Erick Torres]

Liquid syntax error: 'raw' tag was never closed

[Jaromír Franek]

If i would ever seen such code i would instantly decline any pull request this may be contained in.
Do you seriously mean that it make it simpler in any way? I have been programing node.js apps for a 3 years now and seen some horrible things done in sake of simplicity and performance and this may be one of those. What if acumulator have started as -1 for some reason? You would have never change it in the end.

[Erick Torres]

You are right, when accumulator stars in -1, it'll fail. When I said much simpler, I meant simpler in terms of writing code. :D

[Bill Barron]

Protip: Don't try to be clever with your code:

simplethread.com/dont-be-clever/

[michie1]

I understand how the ternary and the logical operators work, and still I agree with you that it doesn't make it "simpler". If and else takes some more lines of code, but it's more easy to debug, refactor, document compared to single line expressions.

[Seth T]

Has no one mentioned filter!?

const originalArray = ["Alice", "Bob", "Charlie", "Bob", "Bob", "Charlie"];
const numberOfBobs = originalArray.filter(name => name === "Bob").length;
console.log(numberOfBobs); // -> 3

I think a better example of reduce would be something that can't be done with filter.

[Samuel]

I'll just briefly explain what that && does, for everyone not understanding what you mean:

&& returns the value of the right-hand expression when both are truthy.

Same with ||: It returns the left-hand expression if it's truthy, or the right-hand one of the first one was falsey.

See the descriptions of the logical operators (and the examples) on MDN for more information.

So && can be used like 'when the left expression is truthy, return the right-hand (or run a function)'.

E.g.

condition && doThis()

And || can be used to provide a default value (or also run a function or something).

someVariable = someVariable || 0
someVariable || varIsFalsey()

Hope this was not too confusing.

[Samuel]

While using && to actually return the latter is indeed a cool trick, it's probably confusing for beginners. And in my opinion the ternary operator comes in more handy in this case.

Here's a simple approach which uses the ternary operator and should also be pretty easy to understand for beginners:

const originalArray = ['Alice', 'Bob', 'Charlie', 'Bob', 'Bob', 'Charlie']

const numberOfBobs = originalArray.reduce(
  (acc, item) => item === "Bob" ? acc + 1 : acc,
  0
)

That works, because

if (item === 'Bob') {
  return acc + 1
} else {
  return acc
}

is basically the same as

return item === 'Bob' ? acc + 1 : acc

(Think of ? and : as 'then' and 'else')

And since we can leave away the curly braces in this case (since it's just one expression), we can simply use this arrow function:

(acc, item) => item === 'Bob' ? acc + 1 : acc

So this was a brief explanation (hopefully someone understands what I'm saying) of the ternary operator, see MDN to learn more

[Stephan Muller]

return accumulator + Number(item === "Bob");

[Yun]

return (accumulator += (item === "Bob" ?1:0));

this way(using "?:" or "&&||" after equal sign) works better in lots of situation

[Samuel]

That = in += is redundant since the reducer only needs to return the new value, not change the old one. I mean, it'll still work, because the correct value is returned, but there's no need in changing the passed-in accumulator.