Operator Precedence with Ternary Conditional and Logical And operators in JavaScript - Stack Overflow

Hey guys i was just going through the source of a JS plugin (dropdown.js) and came across the following line of code:

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

I am not able to grasp the above line pletely, I understand Logical And (&&) and the Ternary Conditional Operator (... ? ... : ...), but I don't seem to prehend how they interact in the above example.

Now if I add a console.log before the return statement:

console.log($parent && $parent.length ? $parent : $this.parent());

I get:

Object { 0: <li.dropdown.open>, length: 1, prevObject: Object, context: <a.dropdown-toggle>, selector: ".parent()" }

Which indeed is $this.parent()

Also, $parent in my case evaluates to false.

So these are the Lego pieces I have, can somebody put it in place for me and give me a clear picture of how this works:

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

Thank you.

---

*Please note that the pre-edit version of this question had an incorrect title and didn't explain what the question really was until one looked at it with sufficient care, therefore please don't downvote any answers below that may seem to talk about "Short-circuiting" in place of the actual topic of this question (Operator Precedence) for the sole sake of looking out-of-topic and careless

Hey guys i was just going through the source of a JS plugin (dropdown.js) and came across the following line of code:

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

I am not able to grasp the above line pletely, I understand Logical And (&&) and the Ternary Conditional Operator (... ? ... : ...), but I don't seem to prehend how they interact in the above example.

Now if I add a console.log before the return statement:

console.log($parent && $parent.length ? $parent : $this.parent());

I get:

Object { 0: <li.dropdown.open>, length: 1, prevObject: Object, context: <a.dropdown-toggle>, selector: ".parent()" }

Which indeed is $this.parent()

Also, $parent in my case evaluates to false.

So these are the Lego pieces I have, can somebody put it in place for me and give me a clear picture of how this works:

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

Thank you.

---

*Please note that the pre-edit version of this question had an incorrect title and didn't explain what the question really was until one looked at it with sufficient care, therefore please don't downvote any answers below that may seem to talk about "Short-circuiting" in place of the actual topic of this question (Operator Precedence) for the sole sake of looking out-of-topic and careless

• javascript
• operator-precedence

Share Improve this question Follow edited Dec 4, 2017 at 4:08 doubleOrt 2,50711 gold badge1616 silver badges3636 bronze badges asked Apr 8, 2015 at 6:32 Tenali_ramanTenali_raman 2,20233 gold badges2020 silver badges3030 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 7

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();

In javascript, especially within conditional statements,the following is true

if($parent) //checking whether the $parent variable has a value

The conditional statement you've posted is something of the following sort in words

If $parent is not null/undefined and $parent.length is not null/undefined, then return $parent, else return $this.parent();

Let's look at that statement again

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

The first is the condition for the ternary operator

$parent && $parent.length

The short-circuit operator here works, because if $parent is null/undefined, it will not evaluate $parent.length (which will throw a javascript exception). If it is not null, it evaluates if $parent.length is not null/undefined.

The same code can be written as (using 'null' only for brevity)

if($parent != null && $parent.length !=null) {
    return $parent;
} else {
    return $this.parent();
}

Here, both $parent and $this are JQuery objects. The line $parent && $parent.length ? $parent : $this.parent() is equivalent to:

if($parent && $parent.length) {
  return $parent;
}
return $this.parent();

So $parent && $parent.length is actually evaluated as: if $parent and $parent.length are not null, undefined, 0 or false (falsy values), then return $parent, else return $this.parent().

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

read it like that. both conditions need to be true. In JS, an && operand will return false as soon as a condition is false

If $parent resolves to a "truthy" value, and so does $parent.length (which means in this case that it isn't 0), then it will return the value of $parent.

If $parent is false (so most likely null or undefined), or the length of parent is 0, then it returns $this.parent().