Operator Precedence with JavaScript Ternary Operator

Operator precedence with JavaScript's ternary operator

Use:

h.className = h.className + (h.className ? ' error' : 'error')

You want the operator to work for h.className. Better be specific about it.

Of course, no harm should come from h.className += ' error', but that's another matter.

Also, note that + has precedence over the ternary operator: JavaScript Operator Precedence

Operator Precedence with Ternary Conditional and Logical And operators in JavaScript

Due to JavaScript's operator precedence, the expression you posted is equivalent to:

return ($parent && $parent.length) ? $parent : $this.parent();

This is due to the && operator being evaluated before ?:. Alternatively, you can rewrite the expression using if else:

if ($parent && $parent.length)
    return $parent;
else
    return $this.parent();

Order of Operations with ternary operator and OR operator

Probably you know that operations are not executed from left to right, but following the operator priority: just think to:

1 + 2 * 3

do you expect 7 or 9? As you experimented, ternary operator has the lower priority.

"Hello" || true ? "World" : ""

is equivalent to

("Hello" || true) ? "World" : ""

Hope this helps.

Precedence: Logical or vs. Ternary operator

Yes, the || operator has higher precedence than the conditional ?: operator. This means that it is executed first. From the page you link:

Operator precedence determines the order in which operators are evaluated. Operators with higher precedence are evaluated first.

Let's have a look at all the operations here:

step = step || (start < end) ? 1:-1;

The operator with the highest precedence is the () grouping operation. Here it results in false:

step = step || false ? 1 : -1;

The next highest precedence is the logical OR operator. step is truthy, so it results in step.

step = step ? 1 : -1;

Now we do the ternary operation, which is the only one left. Again, step is truthy, so the first of the options is executed.

step = 1;

Can someone explain me why operator precedence applies to logical operators like || , && in javaScript

Operator precedence just determines grouping, not actual evaluation order: https://stackoverflow.com/a/46506130

• true || false && false becomes true || (false && false) but is still evaluated from left to right.

• true || alert() is evaluated as true || (alert()) and NOT (true || alert)()

• true || x = 7 is evaluated as (true || x) = 7 and causes an error, NOT true || (x = 7)

combining ternary with and or javascript?

Your statement

const result = number == 4 ? 'true 1' : 'false 1' || number == 3 ? 'true 2' : 'false 2'  || number == 5 ? 'true 3' : 'false 3'

is interpreted as if it were written

const result = (number == 4) ? 'true 1' : ('false 1' || number == 3) ? 'true 2' : ('false 2 || number == 5) ? 'true 3' : 'false 3';

In particular, this part ('false 1' || number ==3) is true because 'false 1' is a non-empty string.

I am not sure what you were attempting, but note that ? : ultimately can have just one value: either the value of the first expression, or the value of the second. Thus those 'false n' strings really don't make any sense: either one of those conditional tests of number will be true, or none will be.

Ternary operator not working properly in JS

Your code has the right concept, but wrong execution. The ternary is doing its job properly.

At the moment, your code is executing like this:

const a = 1const b = 2const c = 3
// This will evaluate to true, since 5 * 1 + 2 = 7, and 7 is greater than 0if (5 * a + b > 0) {   // So return b  console.log(b)} else {  console.log(c)}

How do you use the ? : (conditional) operator in JavaScript?

This is a one-line shorthand for an if-else statement. It's called the conditional operator.¹

Here is an example of code that could be shortened with the conditional operator:

var userType;
if (userIsYoungerThan18) {
  userType = "Minor";
} else {
  userType = "Adult";
}

if (userIsYoungerThan21) {
  serveDrink("Grape Juice");
} else {
  serveDrink("Wine");
}

This can be shortened with the ?: like so:

var userType = userIsYoungerThan18 ? "Minor" : "Adult";

serveDrink(userIsYoungerThan21 ? "Grape Juice" : "Wine");

Like all expressions, the conditional operator can also be used as a standalone statement with side-effects, though this is unusual outside of minification:

userIsYoungerThan21 ? serveGrapeJuice() : serveWine();

They can even be chained:

serveDrink(userIsYoungerThan4 ? 'Milk' : userIsYoungerThan21 ? 'Grape Juice' : 'Wine');

Be careful, though, or you will end up with convoluted code like this:

var k = a ? (b ? (c ? d : e) : (d ? e : f)) : f ? (g ? h : i) : j;

---

¹ Often called "the ternary operator," but in fact it's just a ternary operator [an operator accepting three operands]. It's the only one JavaScript currently has, though.

---

Related Topics