How to add items to array based on conditional

Question

Instead of doing a nested conditional, is there a cleaner more efficient way of achieving this:

if option === 3, add both the nearbyLocations and recentSearches object to array
if option == 1, add only the recentSearches
else (or option === 2), add only nearbyLocations object

See below for my code. Thank you!

const results = option === 3 ? [...state.nearbyLocations, ...recentSearches] : option === 1 ? [...recentSearches] : [...state.nearbyLocations]

Is `option` really a string, and can it have only those three values? Would 0 be a valid value as well? — Bergi, Jan 23 '19 at 22:12
Perhaps [Switch](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch) might be something you want to take a look it if you don't want nested conditionals. — , Jan 23 '19 at 22:13
I updated the code above so that option is an integer. There is a 0 or Default value where I'd like to return empty array [] — Mike, Jan 23 '19 at 22:14
IMO never use nested conditionals. Use switches of if statements to preserve readability — Andrew Li, Jan 23 '19 at 22:15
@Mike Good, my answer does just that :-) The code in your question didn't consider the `0` case correctly. — Bergi, Jan 23 '19 at 22:15

Bergi · Accepted Answer · 2019-01-23T22:19:31.063

2

You could use multiple spread elements that depending on the options contribute a value to the result or not:

const results = [
    ...(option === 3 || option === 2 ? state.nearbyLocations : []),
    ...(option === 3 || option === 1 ? recentSearches : []),
];

or with bit masks - as that is what your options essentially match - do

const results = [
    ...(option & 0b10 ? state.nearbyLocations : []),
    ...(option & 0b01 ? recentSearches : []),
];

edited Jan 23 '19 at 22:19

answered Jan 23 '19 at 22:14

Bergi

630,263
148
957
1,375

Why are you adding the spread operator to ...option? The spread operator is for ...state.nearbyLocations – Mike Jan 23 '19 at 22:18
1

@Mike The spread syntax encompasses the whole ternary expression. I'll use parenthesis to make it more clear, but they are not necessary. – Bergi Jan 23 '19 at 22:20
1

Ah nice - this works perfectly. Much cleaner than what I had originally. Thank you! – Mike Jan 23 '19 at 22:24
Awwww. Exacly what I would suggest. When answer isn't clear, ask different question (what is the situation when I add ...). Please, don't use bitmap - bad practice! ...unless it's code golf :) – Tymek Jan 23 '19 at 22:34
@Tymek Why do you think bitmaps are a bad practice? Because few people understand bitwise operations? Imo they're perfect for this and probably even how `option` was designed - as per the OP, for a value of `0` nothing should be returned, for `1` the one, for `2` the other, and for `3` both. It's not hard to discover the pattern :-) – Bergi Jan 23 '19 at 22:37
It's not about can you understand it, it's about how fast you can process it. There are hard things that many people don't understand, but I can quickly snap to what I was thinking when writing it (functional programming?). Some things aren't like that for me. Why not use other weird things in JS: `~` operator, `typeof NaN` etc. I'd get yield at if I write code like this at work. KISS rule. – Tymek Jan 23 '19 at 22:47
@Tymek well especially if there are more than just two option bits, the bitwise AND *is* the short and simple solution :-) – Bergi Jan 23 '19 at 22:53
Short, "simple", and (time) expensive. I'd just never do it to my `cwrkrs&|emplyr` ;) For more than 2 just create some additional variables, name them. Use full `if` statements and `let results` with `push`. You're smart, answer is great, I just don't agree with obfuscation. – Tymek Jan 23 '19 at 23:13

score 0 · Answer 2 · edited Jan 23 '19 at 22:56

0

In this situation, it's better to use a switch statement:

var results = [];
switch (option) {
    case 3:
        results.push(...state.nearbyLocations, ...recentSearches);
        break;
    case 1:
        results.push(...recentSearches);
        break;
    case 2:
        results.push(...state.nearbyLocations);
        break;
}

edited Jan 23 '19 at 22:56

Bergi

630,263
148
957
1,375

answered Jan 23 '19 at 22:25

Jack Bashford

43,180
11
50
79

Did you mean to use spread syntax for the method call? You shouldn't need `apply`, and you shouldn't need array literals. – Bergi Jan 23 '19 at 22:26
@Bergi I'm sorry, that's how I believed the OP wanted it pushed to the array. How should I best do this? Feel free to edit my answer with the correct syntax if you feel the need. – Jack Bashford Jan 23 '19 at 22:54
1

Ok done, now it should be equivalent to what the OP was doing :-) – Bergi Jan 23 '19 at 22:56

How to add items to array based on conditional

2 Answers2