The logical && and || operators in JavaScript

by

So what exactly is happening when you use the && and || operators with chaining values

&& is a binary operator, with one left-hand operand and one right-hand operand. The expression a && b && c && d && e is parsed based on associativity rules so that it looks like this:

if (a && (b && (c && (d && e)))) {

Based on the semantics of &&, if a is falsy, the entire condition immediately evaluates to a, which is falsy. If a is truthy, then the expression evaluates to the right side, which is b && (c && (d && e))). In that case if b is falsy, then that sub-expression, and thus the entire expression, immediately evaluates to b, which is falsy; if b is truthy, then that sub-expression evaluates to its right side, which is c && (d && e), and the process continues.

The net result is the intuitive behavior that for the entire expression to be falsy, and therefore for the if branch to not be taken, it suffices for any of the variables to be falsy. The evaluation will “short-circuit”–resulting in falsy–as soon as any falsy variable is encountered. For the entire expression to be truthy, and therefore for the if branch to be taken, all the variables must be truthy.

For ||, the logic is reversed. For the entire expression to be truthy, and therefore for the if branch to be taken, it suffices for any of the variables to be truthy. The evaluation will “short-circuit”–resulting in truthy–as soon as the first truthy value is encountered. For the entire expression to be falsy, and therefore for the if branch not to be taken, all the variables must be falsy.

You Don’t Know JS has a good explanation too.

More Related Contents:

  1. Javascript AND operator within assignment
  2. Why don’t logical operators (&& and ||) always return a boolean result?
  3. Logical operators in JavaScript — how do you use them?
  4. What’s the difference between & and && in JavaScript?
  5. Logical operator || in javascript, 0 stands for Boolean false?
  6. Why is there no logical xor in JavaScript?
  7. How does javascript logical assignment work?
  8. Why is there no logical XOR?
  9. Making a quiz in HTML and Javascript [closed]
  10. Javascript date object confusion
  11. What’s the meaning of “=>” (an arrow formed from equals & greater than) in JavaScript?
  12. Escaping HTML strings with jQuery
  13. Case insensitive regex in JavaScript
  14. Angular 2 Sibling Component Communication
  15. What’s the best way to break from nested loops in JavaScript?
  16. Why is Proxy to a Map object in ES2015 not working
  17. Replace a Regex capture group with uppercase in Javascript
  18. Check if year is leap year in javascript [duplicate]
  19. What’s the API Key for in Google Maps API V3?
  20. Populate a Razor Section From a Partial
  21. Javascript: document.execCommand cross-browser?
  22. Detect page zoom change with jQuery in Safari
  23. Javascript Regex to match only a single occurrence no more or less
  24. Uncaught TypeError: Cannot read property ‘top’ of undefined
  25. How to change the behaviour of a mocked import?
  26. How to remove DOM elements without memory leaks?
  27. Javascript select onchange=’this.form.submit()’
  28. Websocket API to replace REST API? [closed]
  29. Handling common JavaScript files in Visual Studio 2010
  30. Differentiating Between an AJAX Call / Browser Request

Leave a Comment