CODEWITHSUNDEEP
javascriptconditional-operator
Web_Designer
Web_Designer

Reputation: 74530

JavaScript shorthand ternary operator

I know that in PHP 5.3 instead of using this redundant ternary operator syntax:

startingNum = startingNum ? startingNum : 1

...we can use a shorthand syntax for our ternary operators where applicable:

startingNum = startingNum ?: 1

And I know about the ternary operator in JavaScript:

startingNum = startingNum ? startingNum : 1

...but is there a shorthand?

Upvotes: 172

Views: 110350

Answers (12)

Clark
Clark

Reputation: 42

Re @Joshu's 'nullish' answer.

The shortcut, or Optional Chaining operator, "?." keeps the dot when used prior to a square bracket for a string (unknown) property, instead of a known property, eg.:

object.propLevel1?.[unknownPropLevel2]

At first usage, for me, it seemed appropriate to drop the dot:

object.propLevel1?[unknownPropLevel2] // WRONG

From mdn: Syntax

obj.val?.prop
obj.val?.[expr]
obj.func?.(args)

Upvotes: 1

Damien
Damien

Reputation: 1528

var startingNum = startingNum || 1;

Can (in this case) be shortened to:

var startingNum =|| 1;

See Logical OR assignment (||=).

See also Nullish coalescing assignment (??=).

Upvotes: 0

Feargal Kavanagh
Feargal Kavanagh

Reputation: 116

You can use the accepted answer, but it's not ideal as it breaks when used with bools, if you're defaulting to true, it will always evaluate to true ->

var undefinedVal: boolean;
var trueVal = true;
var falseVal = false;

Angular Template ex:

Value : {{ undefinedVal || true }} -> true
Value : {{ trueVal || true }} -> true
Value : {{ falseVal || true }} -> true?

So use the long way when using bools:

Value : {{ (val != null) ? val : true }}

Also note for typescript and C# (I think), when using ternary with string concatenation it has to be in brackets ->

console.log("Value :" + ((val != null) ? val : true));

Upvotes: 0

Joshu
Joshu

Reputation: 520

With the addition of ES2020:

New w/Nullish Coalescence: const difficulty = var?.nest[i]?.prop ?? false

Older Operation: const difficulty = var.nest[i].prop ? var.nest[i].prop : false

The question mark before the property will first check if the object even exists (if you aren't sure it will: like in API data) and, if an object is missing, it will return undefined

The ?? checks if the value on the left is null or undefined and, if it is, will return a supplied value on the right.

Upvotes: 21

user3336882
user3336882

Reputation: 3313

In most modern browsers you can now use:

startingNum ??= 1;

This will only change startingNum if it is null or undefined.

See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_nullish_assignment

Upvotes: 8

xxjjnn
xxjjnn

Reputation: 15239

To make a ternary like:

boolean_condition ? true_result : false_result

in javascript, you can do:

(boolean_condition && true_result ) || false_result;

Example:

(true && 'green') || 'red';
=> "green"
(false && 'green') || 'red';
=> "red"

Upvotes: 4

arunmmanoharan
arunmmanoharan

Reputation: 2675

startingNum = startingNum || 1

If you have a condition with null, like 

startingNum = startingNum ? startingNum : null

you can use '&&'

startingNum = startingNum && startingNum

Upvotes: 3

Gostrath
Gostrath

Reputation: 73

The above answers are correct. In JavaScript, the following statement:

startingNum = startingNum ? otherNum : 1

can be expressed as 

startingNum = otherNum || 1

Another scenario not covered here is if you want the value to return false when not matched. The JavaScript shorthand for this is:

startingNum = startingNum ? otherNum : 0

But it can be expressed as 

startingNum = startingNum && otherNum

Just wanted to cover another scenario in case others were looking for a more generalized answer.

Upvotes: 2

Adam Rackis
Adam Rackis

Reputation: 83358

|| will return the first truthy value it encounters, and can therefore be used as a coalescing operator, similar to C#'s ??

startingNum = startingNum || 1;

Upvotes: 37

Tadeck
Tadeck

Reputation: 137310

Yes, there is:

var startingNum = startingNum || 1;

In general, expr1 || expr2 works in the following way (as mentioned by the documentation):

Returns expr1 if it can be converted to true; otherwise, returns expr2. Thus, when used with Boolean values, || returns true if either operand is true; if both are false, returns false.

Upvotes: 13

Daniel
Daniel

Reputation: 191

var startingNum = startingNum || 1;

In this case, you can use the OR operator.

Upvotes: 2

Brad Christie
Brad Christie

Reputation: 101604

var startingNumber = startingNumber || 1;

Something like that what you're looking for, where it defaults if undefined?

var foo = bar || 1; // 1
var bar = 2;
foo = bar || 1;     // 2

By the way, this works for a lot of scenarios, including objects:

var foo = bar || {}; // secure an object is assigned when bar is absent

Upvotes: 261

Related Questions