user1486133 user1486133 - 3 months ago 8
Javascript Question

Creating a check using multiple arguments to produce three different results

I need to find the most succinct way to return one of three values based on two arguments. I think a switch statement is the most succinct but please suggest alternatives.

I have two arguments,

type
and
action


If
action == 'close'
then the returned result should always be
'Hide'


If
action == open
then more checks are needed

If
action == 'open' && type == 'flight'
return
show more flights


If
action == 'open' && type == 'protection'
return
show protections


What's the most succinct way to do this without involving multiple nested
if
statements? This whole statement is already inside another
if
statement called by a ternary so I don't really want to add more.

This is my current solution, any way I can make this lighter?

createShowLabels: function(testEnabled,action,type){
if (testEnabled){
if(action === 'open'){
switch(type) {
case 'flight':
return 'Show flight times';
case 'protection':
return 'What\'s this?';
}
} else {
return 'Hide';
}
} else {
// Defaults
if (action === 'open'){
return 'Show more';
} else {
return 'Show less';
}
}
},

Answer

First, let's be clear: "Succinct" is not a synonym for "good," "readable," or "maintainable." Sometimes succinct code is good, readable, and maintainable; sometimes, it isn't.

Given your guarantee in the comments that the values will only be the ones listed, there are several ways.

In my own code, I would probably use somnething like FDavidov's answer but with different formatting:

if (action == 'close') {
    result = 'Hide';
} else if (type == 'flight') {
    result = 'show more flights';
} else {
    result = 'show protections';
}

But you asked for the most succinct way. The conditional operator is succinct, but not necessarily hyper-easy to debug:

result = action == 'close' ? 'Hide' : type == 'flight' ? 'show more flights' : 'show protections';

Example:

function test(action, type) {
  return action == 'close' ? 'Hide' : type == 'flight' ? 'show more flights' : 'show protections';
}
console.log(test('close', 'flight'));
console.log(test('close', 'protections'));
console.log(test('open', 'flight'));
console.log(test('open', 'protections'));


These are all less concise but more configurable:

You can use a lookup object:

var lookup = {
    'close|flight': 'Hide',
    'close|protections': 'Hide',
    'open|flight': 'show more flights',
    'open|protections': 'show protections'
};

result = lookup[action + '|' + type];

Example:

var lookup = {
    'close|flight': 'Hide',
    'close|protections': 'Hide',
    'open|flight': 'show more flights',
    'open|protections': 'show protections'
};

function test(action, type) {
    return lookup[action + '|' + type];
}
console.log(test('close', 'flight'));
console.log(test('close', 'protections'));
console.log(test('open', 'flight'));
console.log(test('open', 'protections'));

Or as you say, a switch:

switch (action + '|' + type) {
    case 'close|flight':      result = 'Hide'; break;
    case 'close|protections': result = 'Hide'; break;
    case 'open|flight':       result = 'show more flights'; break;
    case 'open|protections':   result = 'show protections'; break;
};

Example:

function test(action, type) {
    var result;
    switch (action + '|' + type) {
        case 'close|flight':      result = 'Hide'; break;
        case 'close|protections': result = 'Hide'; break;
        case 'open|flight':       result = 'show more flights'; break;
        case 'open|protections':   result = 'show protections'; break;
    };
    return result;
}
console.log(test('close', 'flight'));
console.log(test('close', 'protections'));
console.log(test('open', 'flight'));
console.log(test('open', 'protections'));

Comments