[1]Preston Lamb (BUTTON) Menu
    * [2]About
    * [3]Résumé
    * [4]Blog
    * [5]Subscribe
    * [6]Tags
    * [7]Resources
    * [8]Contact

JavaScript Logical Operators

  Posted on April 02, 2020

  Written by Preston Lamb

  [9]javascript

  Read the other posts in the JavaScript Fundamentals series!
    * [10]JavaScript Variables: Scope and Hoisting
    * [11]JavaScript Variables: var and let and const
    * [12]There's More to the JavaScript Console
    * [13]JavaScript Primitive Types
    * [14]JavaScript Variables: Value and Reference
    * [15]The JavaScript this Keyword

[16]tldr;

  Logical operators are important in JavaScript applications. We
  constantly need to compare variables and do something based on that
  comparison. If some comparison is true, take path A; if it’s false,
  take path B. If we don’t understand the order of precedence of the
  logical operators, or don’t fully understand the result of the
  comparisons, then we will spend lots of time debugging our application
  trying to follow the flow. So even though this is a relatively basic
  part of JavaScript, it’s really important.

[17]Logical Operators

  JavaScript has three logical operators: || (or), && (and) and ! (not).
  They don’t have to only compare against boolean values, and the result
  of the operator doesn’t have to be a boolean either. Many times they
  are used as if statement comparisons, but that’s not the only place
  they have to be used. Let’s take a look at each of them in more depth.

[18]The || Operator

  Let’s look first at the logical || operator. When using this operator,
  you’re saying that you want to use one value OR another, or continue if
  one value is true OR another one. It’s a very useful operator. It
  starts on the left of the comparisons and goes to the right. It stops
  at and returns the first truthy value it finds. If it doesn’t find a
  truthy value, it returns the last value in the list. Let’s look at some
  examples of using it.
let isTrue = 5 > 3 || 6 > 8; // true

let isFalse = 1 > 3 || 2 > 4; // false

if (isTrue || isFalse) {
       console.log('Made it into the statement');
}

  In these examples, if either of the two comparisons is true, the end
  result is true. If they’re both false, the end result is false. Here’s
  a table to demonstrate when the result will be true and when it will be
  false:
true || true --> true;
true || false --> true;
false || true --> true;
false || false --> false;

  So the end result will only be false in one of the four situations, and
  that’s when both statements are false. If either one is true, or if
  both are true, then the result is true as well. You also don’t only
  have to pass 2 comparisons, it could be as many as you want or need for
  your situation. Also as I mentioned above, the end result doesn’t have
  to be a boolean value. Let’s look at an example of that.
let person = firstPerson || secondPerson || null;

  In this example, we want to initialize the person variable to either
  the firstPerson if it’s not null or undefined or any other falsy value;
  the secondPerson if it’s not falsy; and finally we set it to null as
  the fallback result. firstPerson and secondPerson might be objects,
  they might be strings, they might be an array; it doesn’t really matter
  what they are, the person variable will be that value if one of them is
  true.

[19]The && Operator

  The next operator we’ll look at is the && operator. It has many of the
  same use cases as the || operator, but instead of at least one
  statement needing to be true for the result to be true, all statements
  need to be true for the result to be true. Its result table looks like
  this:
true && true --> true;
true && false --> false;
false && true --> false;
false && false --> false;

  In this case, only one of the four routes ends in a truthy result.
  Let’s look at some examples of this.
let isTrue = 1 > 0 && 50 > 4 * 9; // true
let isFalse = 1 < 0 && 2 > 1; // false

if (name === 'Preston' && isReading) {
       console.log('Preston is reading');
}

  Just like before, the comparison statements for the && operator don’t
  need to boolean values, but JavaScript converts them to boolean to do
  the comparison.

  The end result of the comparisons, though, works differently than the
  || operator. If all parts of the && operator statement are true, the
  result will be the last statement. If any part of it is false, it
  returns the first statement in the list.
let result = 5 && 3; // 3
result = 0 && 4; // 0

  Also like the || operator, there is no limit to the number of statments
  you can have in your list with the && operator. You can put as many as
  needed in your list of statements.

  The last note is that && has a higher precedence than || does in
  comparisons. So, if you have a mixture of && and || statements, the &&
  statements will be evaluated first before the || statements are.

[20]The ! Operator

  The third logical operator we’ll look at is the ! operator. When using
  this operator, it effectively converts the value with which it is used
  to a boolean (if needed) and then returns the inverse value. Let’s look
  at some examples.
let result = !true; // false
result = !0; // true

  That’s pretty straight forward. But sometimes you’ll see people using
  !! in their code. The reason for that is to convert the value to its
  real boolean value. That’s kind of confusing, but the first ! converts
  the comparison to a boolean and inverses it, and then the second !
  inverses it again. So if we have a string variable and we want to know
  if it has a value, and do something if the result is true, we could use
  the !! to find out:
let result = !!`is my string there`; // true
result = !!null; // false

  So one ! gets the opposite boolean value of the comparison; two !! gets
  the same boolean value of the comparison.

  The ! operator has the highest precedence of the three logical
  operators; it evaluates first before before the && operator and the ||
  operator.

[21]Conclusion

  These three logical operators are simple but powerful. They control a
  lot of the flow of your application and what actually happens.
  Understanding all the tricks you can perform with them and, more
  importantly, making sure that you have them in order of precedence, is
  important. You can save yourself a lot of time debugging if you
  understand the order in which the comparisons will be done. I know I’ve
  spent too much time figuring out why an if statement is being hit when
  it shouldn’t be or vice versa. But the more I’ve studied and paid
  attention to these logical operators, the less I’ve run into that
  issue.

  [22]« The JavaScript this Keyword

  [23]Click here to subscribe to the newsletter and be the notified when
  a new blog post is available!

    *
    *
    *
    *
    *

  [24]Sitemap

References

  Visible links
  1. https://www.prestonlamb.com/
  2. https://www.prestonlamb.com/about
  3. https://www.prestonlamb.com/resume
  4. https://www.prestonlamb.com/blog
  5. https://www.prestonlamb.com/subscribe
  6. https://www.prestonlamb.com/tags
  7. https://www.prestonlamb.com/resources
  8. https://www.prestonlamb.com/contact
  9. https://www.prestonlamb.com/tags/#javascript
 10. https://www.prestonlamb.com/blog/javascript-variables-scope-and-hoisting
 11. https://www.prestonlamb.com/blog/javascript-variables-var-and-let-and-const
 12. https://www.prestonlamb.com/blog/theres-more-to-the-javascript-console
 13. https://www.prestonlamb.com/blog/javascript-primitive-types
 14. https://www.prestonlamb.com/blog/javascript-variables-value-and-reference
 15. https://www.prestonlamb.com/blog/javascript-this-keyword
 16. https://www.prestonlamb.com/blog/javascript-logical-operators#tldr
 17. https://www.prestonlamb.com/blog/javascript-logical-operators#logical-operators
 18. https://www.prestonlamb.com/blog/javascript-logical-operators#the-or-operator
 19. https://www.prestonlamb.com/blog/javascript-logical-operators#the-and-operator
 20. https://www.prestonlamb.com/blog/javascript-logical-operators#the-not-operator
 21. https://www.prestonlamb.com/blog/javascript-logical-operators#conclusion
 22. https://www.prestonlamb.com/blog/javascript-this-keyword
 23. javascript:;
 24. https://www.prestonlamb.com/sitemap.xml

  Hidden links:
 26. https://www.twitter.com/prestonjlamb
 27. https://www.instagram.com/prestonjlamb
 28. https://www.facebook.com/plambconsulting/
 29. https://www.linkedin.com/in/pjlamb12/
 30. https://www.github.com/pjlamb12

You are viewing proxied material from 1436.ninja. The copyright of proxied material belongs to its original authors. Any comments or complaints in relation to proxied material should be directed to the original authors of the content concerned. Please see the disclaimer for more details.