Collectively, all values that convert to true are referred to as truthy values, and all values that convert to false are referred to as falsy values. For example the number 5 is truthy, and an empty string is falsy.
Note that the rules for truthy and falsy depend on the type. The number 0 is falsy because it equals zero, but a string with the content "0" is truthy, because it is not an empty string.
Logical operators
There are some operators that are especially useful to use with booleans.
Not
You can invert a boolean - making it turn from true to false or vice versa - with the not operator !, which must go before the boolean, e.g. !b.
let b = true;
console.log(!b); // false
OR/AND
Suppose you want to know if either of two conditions are true, or if both are true. The logical operators OR || and AND && can identify this.
For example a < b || a < c will return true if a is less than b or if a is less than c; otherwise it returns false. Similarly a < b && a < c will return true if a is less than b and if a is less than c; otherwise it returns false.
You can use the console to test all combinations of comparisons with the logical operators:
// Try entering in to the console:
false || false // false
false || true // true
true || false // true
true || true // true
false && false // false
false && true // false
true && false // false
true && true // true
These operators also work with any truthy or falsy values, and the result will also be truthy or falsy the same way it works with true and false. For example 0 || 5 returns 5 (the truthy value), and "Hello" && "" returns "" (the falsy value). This might seem odd, but it does come in useful when using things like 'if' statements later on.
Conditional ?: operator
The only ternary operator - an operator that involves three values - in Javascript is the conditional ?: operator. This takes the form comparison ? valueIfTruthy : valueIfFalsy. For example the following code snippet will log Nice score! because the score variable of 120 is greater than or equal to 100.
let score = 120;
console.log(score >= 100 ? "Nice score!" : "Try again!");
Try changing score to initialise to 50. Notice the text logged to the console changes to Try again!, because the condition score >= 100 has become false, so the last value is returned.
JavaScript often accepts any kind of truthy or falsy value where a comparison is made, and this applies here as well. The first comparison value can be a different type like a number or a string, and it will test whether the value is truthy or falsy.
// Try entering in to the console:
0 ? "truthy" : "falsy" // "falsy"
1 ? "truthy" : "falsy" // "truthy"
"" ? "truthy" : "falsy" // "falsy"
"Hello!" ? "truthy" : "falsy" // "truthy"
Once again, this will come in useful when we come to use 'if' statements.
Conclusion
In this part we've covered:
- The mathematical operators
% and **
- Additional assignment operators like
+= and *=
- Increment and decrement operators
++ and --
- Building strings with both
+ and template literals
- Converting between types, including between numbers and strings, as well as to booleans and the concept of truthy and falsy values
- Comparison operators like
< and ===
- Logical operators
!, ||, &&
- The conditional
?: operator
In the next part we'll begin to use control flow, such as the 'if' statement we've alluded to a couple of times by now. This is where you can start to write programs that change what they do depending on conditions - such as a "guess the number" game!
Learn more
If you want to dig deeper, you can learn more about the features mentioned in this guide at the following MDN Web Docs links:
- Operators Remainder (%), Exponentiation (**)
- Assignment operators +=, -=, *=, /=, %=, **=
- Increment (++) and Decrement (--)
- Template literals
- Number() and String()
- Comparison operators <, <=, >, >=, ==, ===, !=, !==
- Truthy and Falsy
- Operators Logical NOT (!), Logical AND (&&), Logical OR (||)
- Conditional (ternary) operator
Part 4
When you're ready to continue, head on to the next part at Learn JavaScript in Construct, part 4: control flow!