If-only Ternary Operation

💡 Ideas
#1

I have a suggestion for ternary operations for ease of use and cleaner code. The main premise is as follows:

There are plenty of situations where people implement a conditional statement without including an else clause such as :

var x = "World";
var y = "";
if(typeof x === "string")
{
y = Hello ${x});
}

This is prevalent in much coding, and sometimes people choose to use ternary operators to go through that process but end up either not being able to do so, or end up having longer than necessary resolutions to their code.

What I SHOULD be able to do INSTEAD of needing the bracketing is this:

var x = "World";
var y = typeof x === "string" ? Hello ${x};

with it yet being decided as to whether or not the return should be the default value of what was the original assignment, null, or both depending on whether or not there was an original assignment. As you can see above, the assignment is much cleaner and in one line versus multiple, and despite the fact that you could have a return of null, the simplicity of simply having it AS a default isn't the worst option to help clean things up and then only offer an alternative solution as needed/defined.

1 Like
#2

Hi,
there's a part in your original code that you forgot to include in the version with the conditional operator:

That's the else value, and to make your code both correct and syntactically valid you'd write

var x = "World";
var y = typeof x === "string" ? `Hello ${x}` : "";

The ": """ is not "longer than necessary", it is absolutely required for the code to work. Omitting it would not work, even if that was valid syntax (as you suggest) the variable y would end up as null or undefined, but not as the empty string as desired.

1 Like
#3 
foo = foo ? foo : bar;
foo := bar;

foo = bar ? bar : foo;
foo ?= bar;

wherein the condition could be specified more explicitly, e.g. as (x != null) or something more useful.

#4

@Crissov that looks like a different use case? And I think it is already covered by the nullish coalescing operator proposal:

foo = foo ?? bar;

Only thing that's missing in there is a shorthand assignment operator

foo ??= bar;
1 Like
#5

The ??= operator is part of the Logical Assignment operators proposal, which reached state 3 this week.

1 Like
#6

I'm not necessarily arguing for a null coalescer because I'm not wanting to merely check as to whether a value is null when it comes to assignment. It'll be nice to have and C# has had this for a while now with "??". I am wanting to base it off of true and false conditional statements with the else clause (which after ":" essentially is) not being necessary and simply defaulting to null or some other value. I prefer the null value since as a default check it would allow for better cohesion and less need to check for other values.

#7

Many responses deal with assignment, when this should be about evaluation.

// these two should function identically
console.log(bool ? 'string' : null);
console.log(bool ? 'string');

Similar to how try {} catch (err) {} does not require (err).
Similar to how if {} else {} does not require else {}.
The "else" in a ternary should be optional and default to null.
x ? y : z should not require : z

Having the else in a ternary default to null means Template syntax in modern frameworks can be cleaner. For example in Vue:

<div>
  {{ card.isExceptionTask ? 'Exception' : '' }}
  {{ card.isBoxTask ? 'Box' : '' }}
  {{ card.taskType }}
  {{ card.isCableOnly ? '(cable only)' : '' }}
</div>

Could be written cleaner as:

<div>
  {{ card.isExceptionTask ? 'Exception' }}
  {{ card.isBoxTask ? 'Box' }}
  {{ card.taskType }}
  {{ card.isCableOnly ? '(cable only)' }}
</div>

Currently there is no shorter way of returning a value based on a boolean. This feature would improve the language's ability to express these situations cleanly.

#8
  • null?.prop returns undefined
  • eval("if (false) 'result'") returns undefined

So for consistency it should probably default to undefined instead of null.

Shame that Vue didn't copy React, where booleans are void elements. So can do this:

<div>
  { condition && `Text` }
</div>
1 Like
#9

Agree on consistency. Else condition should definitely be resolved as undefined here.

#10

I'm fine with undefined or null as the default. So long as there is a logical default for the else.

// These two should function identically
console.log(bool ? 'string' : undefined);
console.log(bool ? 'string');

One of the things I like about Vue is that it doesn't deviate from HTML/CSS/JS functionality with weird caveats/gotchas like that or className instead of class. This shouldn't be handled at a framework level, this feature applies for all forms of usage of the language and in any application (UI, library, app, server, robotics, desktop, mobile, etc).

#11

You can get the desired result in an another way!

let x = "myself", y
(typeof x === "string") && (y = `Hello ${x}`)
console.log(y)

No need to mess up the ternary.

#12

Not as succinct but another alternative are do-expressions if they make it through the stages.

let v = do { if (condition) 'result' }
1 Like
#13

@jithujoshyjy bool && 'string' will return 'string' or false. We are looking for a way to return 'string' or undefined. Currently the shortest way is ugly.

bool ? 'string' : void 0

when it could be cleaner as

bool ? 'string'