using Short-Circuiting ( || ) in Object in JavaScript

Question

this block of code takes the values of the scored property and puts them in duplication object as a key and how many times the name got duplicated as a value using the || operator. I understand that the || operator will return the first truthy value or the last value if all of the values are falsy, however, I didn't understand duplication[x]++ what does the ++ sign do exactly? and why we put the (duplication[x]=1) between parentheses

const game = {
  score: "4:0",
  scored: ["Lewandowski", "Gnarby", "Lewandowski", "Hummels"],
}; 


const duplication = {};
for (let x of game.scored) {
 duplication[x]++ || (duplication[x]=1) // I'm confused in this line
}
 
console.log(duplication);

Answer 1

Let's see what's happing on this line :

duplication[x]++ || (duplication[x]=1)

1. duplication[x]++ , first duplication[x] it will check if duplication has any with value of x, if yes then it it will perform duplication[x]++ else it will be undefined to moved to the other part of or condition

2. duplication[x]=1, this is a simple assignment it will assign the value 1, duplication[x] and this will create a key if not exist in the duplication object

Now if you run the below script and check the console log for each loop, it will give you clear idea what actually happing.

const game = {
  score: "4:0",
  scored: ["Lewandowski", "Gnarby", "Lewandowski", "Hummels"],
}; 


const duplication = {};
let index = 0;

for (let x of game.scored) {

  console.log( `INDEX : ${index} ` , x , duplication[x] ? 'FOUND , INCREMENT CURRENT VALUE WITH ++' : 'NOT FOUND, SO ASSIGN VALUE 1' );
  duplication[x]++ || (duplication[x]=1)
  console.log( `INDEX : ${index} \n` , duplication);
  index++;

}
 
console.log( 'FINAL OBJECT \n' , duplication);

Answer 2

The non-descriptive variable names don't really help to explain the situation. Let's start of by rewriting the code with more descriptive variable names.

const game = {
  score: "4:0",
  scored: ["Lewandowski", "Gnarby", "Lewandowski", "Hummels"],
}; 


const goals = {};
for (const player of game.scored) {
  goals[player]++ || (goals[player] = 1);
}
 
console.log(goals);

goals[player]++ increments the goals for player by 1 and returns the old value. The tricky thing in goals[player]++ is that player might not be present in goals yet. In which case undefined is returned (which is falsy). Because the value is falsy the second operand of the OR operator will be executed. (goals[player] = 1) will set the goals for player to 1.

The code is essentially counting how often a specific name is present in the game.scored array. The presence of a name symbolises a goal made by them.

A less cryptic way of writing similar code would be:

const goals = {};
for (const player of game.scored) {
  if (player in goals) {
    goals[player] += 1; // add 1 to the current score
  } else {
    goals[player] = 1; // no score present so use 1
  }
}

However I usually prefer to set a default value, this way you don't have to split the logic into two actions:

const goals = {};
for (const player of game.scored) {
  goals[player] ||= 0; // assign 0 if the current value is falsy
  goals[player] += 1;  // add 1 to the current value
}

Note that ||= is fairly new, if you write JavaScript for older browser you can use the following instead:

if (!goals[player]) goals[player] = 0;

Answer 3

The first part of

duplication[x]++ || (duplication[x] = 1)
^^^^^^^^^^^^^^^^

has four parts:

1. a variable duplication with
2. a property accessor x in bracket notation
3. a postfix increment operator ++ and
4. an expression for the logical OR || operator.

The second part returns undefined at the first call with an unknown property.

The try to increment this value returns NaN, because of the following operation of duplication[x] = duplication[x] + 1. The result is is a falsy value.

This forces the expression to evaluate the right hand part of logical OR.

And because the left hand part has an expression, it needs to be evaluated first with a grouping operator (). Now the assignment takes place and the result of 1 is returned to the OR.