I came across a block of code in a project and I find it hard to understand:

let isSelected = false;
const results = items.filter(Boolean).map(item => {
  isSelected = !isSelected && id === item.id;
  return {
    id: item.id,
    name: item.name
  };
});

What's the line isSelected = !isSelected && id === item.id; before the return is trying to do?

Thanks.

CodePudding user response：

It's a confusing way of, while mapping through the array, also setting isSelected to true if any of the elements in the array match the ID.

An equivalent approach would be

const truthyItems = items.filter(Boolean);
const results = truthyItems.map(item => ({
  id: item.id,
  name: item.name
}));
const isSelected = truthyItems.some(item => item.id === id);

Side-effects inside a .map callback are usually a bit of a code smell.

CodePudding user response：

The line in question is doing a few things. To break it down:

The first portion will update the isSelected variable to the result evaluated by the rest of the line: isSelected = ...

The remainder of the line is what will be evaluated, and still has a few things happening: !isSelected && id === item.id;

The && in the middle is an operator to perform a boolean AND operation. The portions to the left and the right will be evaluated, and then the AND operator will return true if, and only if, both expressions are also true.

The left expression, !isSelected,is using another boolean logical operator--the NOT operator !. If isSelected is true then !isSelected is false--and vice versa. This assumes isSelected is holding a boolean value (either true or false)--Javascript will still work applying this to other types but it can be confusing.

And the right expression id === item.id is checking if the value of the id variable and the id property on item are an exact match. Javascript has two ways of checking for matches--the === operator checks for exact matches, where the == operator can also do some confusing Javascript things.

To put it all together you could use a small matrix to evaluate the result based on the starting state. Keep in mind the resulting value for isSelected will only be true if both sides of the && (AND) operator are true:

That said, in the sample of code you shared, the line in question isn't actually used to do anything--it updates the variable value but is never used again. So removing it wouldn't have any effect. One other note is that it will evaluate the line in question once for every item in the array that is passed into the .map() call -- and due to the above matrix the only way for isSelected to end in a true state is for the last (and only the last) item in the array to have id === item.id be true. That might be a bug--but without seeing the rest of the code and understanding its purpose it might be fine.