2. Write Boolean Expressions
Here's the problem:
JavaScript Boolean logic puzzle: Write out a list of 7 to15 Boolean expressions using numbers, Booleans, falsy, truthy, etc., and then explain them. You can use the following as an example: http://dorey.github.io/JavaScript-Equality-Table/.
Background on This Topic
This problem might be a bit confusing if it was for other languages, but it makes sense for JavaScript.
JavaScript has a lot of "gotchas," one of which is implicit type conversion when comparing values, or when doing things like adding a number to a string when not using strict mode in your application.
For example, let's say you were to do the following in JavaScript without strict mode:
console.log(5 + "15");
You might think this would result in an error, but instead JavaScript will convert the number value to a string, resulting in "515".
Let's take a look at another example:
console.log(5 * "2");
You might be thinking that there's no way JavaScript would be able to render this into a string (and you would be right!). However, what happens instead is the implicit conversion of the string to a number, resulting in 10.
There are other examples of this in JavaScript, but to account for this implicit type conversion, you can place use strict at the top of the code, and then use === for comparisons.
Truthy versus Falsy
The concept of truthy versus falsy requires a long explanation, so here's an article that sums it up well: https://www.sitepoint.com/javascript-truthy-falsy/.
Now that we understand the concept of implicit type conversions, how to prevent them, and truthy vs. falsy, let's try to answer the interview question using some equality operators, referring to the table as an example.
Let's bring Jonathan back in for the interview.
Define the Problem
The problem is a bit vague, so Jonathan will try to clarify and define it. As always, Jonathan will first test his assumptions.
Jonathan: I understand that JavaScript has implicit type conversions when not using strict and when using the double equality operator for comparison instead of triple. Furthermore, the double equality operator only checks for value and not type. Based on the table, I notice that there are values of green for what seem like truthy values and a lack of color for falsy values. Therefore, I'll be creating several equality statements to show what can happen when using just the double equality operator in JavaScript.
Interviewer: Okay.
Think
Jonathan thinks about the problem for a bit. He's already starting to come up with some solutions and writes out some of his thoughts on the board. Here's his pseudocode:
// All comparison operators will be "=="
// Compare String with number to same number, but with type of number.
// Compare True with the String of "1"
// Compare True with the Number of 1
// Compare [1] with True
// Use if statement to check truthy and falsy values
// Compare False with Number of 0
// Compare True with the String of 0
// Compare Undefined with Null
// Compare [] with True
// Compare "" with True
// Compare NaN with NaN
// Use Number.isNaN(NaN)
// Note that Infinity, -Infinity, "true" (string form), and "false" (string form) will all only equal themselves.
Write Code and Syntax
Now that the hard part is done, Jonathan just needs to write out the syntax to fill in the pseudocode. As Jonathan writes out the code, he explains the syntax.
// All comparison operators will be "=="
// Compare String with number to same number, but with type of number.
"45" == 45; // Returns true.
// Compare True with the String of "1"
true == "1"; // Returns true.
// Compare True with the Number of 1
true == 1; //Returns true.
// Compare [1] with true
true == [1]; // Returns true.
Jonathan: I start with some statements that are going to be true if using the double equality operator, but would otherwise be false. The first example shows true, because the value for both are the same, even if the type is different. The second example shows a non-empty string, making it true. The third example shows a value greater than 0, making the number true.
// Use if statement to check truthy and falsy values
if (!false) { console.log("I'm falsy") }
if (!0) { console.log("I'm falsy") }
if (!'' || !"") { console.log("I'm falsy") }
if (!null) { console.log("I'm falsy") }
if (!undefined) { console.log("I'm falsy") }
if (!NaN) { console.log("I'm falsy") }
/* Everything else if truthy, including:
1) '0' (a string containing a single zero)
2) 'false' (a string containing the text “false”)
3) [] (an empty array)
4) {} (an empty object)
5) function(){} (an “empty” function)
*/
Jonathan: I have now showed all of the falsy values. Besides having a data type, every value has an inherent Boolean value of truthy or falsy. I've listed all of the falsy values and mentioned that all other values are truthy. Falsy values can be determined by checking them in an if statement. That is, if the value is falsy, the if statement won't run. Therefore, I set everything that is falsy to be not true, and then displayed a log if the false values would pass.
// Compare False with Number of 0
false == 0; // returns true;
// Compare False with the String of 0
false == "0"; // returns true
// Compare Undefined with Null
undefined == null; // returns true
// Compare [] with false
[] == false; // returns true
// Compare "" with false
"" == false; // returns true
// Compare NaN with NaN
NaN == NaN; // returns false.
// Use Number.isNaN(NaN)
Number.isNaN(NaN) // returns true.
// Note that Infinity, -Infinity, "true" (string form), and "false" (string form) will all only equal themselves.
Jonathan: Next, I have some values that are generally considered to be false if using the == operator, like 0, "0", an empty array, and an empty string. We also have a few other values that are unique and only equal one other value or themselves, such as null and undefined. We then have NaN , which isn't equal to itself nor anything else. However, one method to determine if something is NaN is to use the number object's method, isNaN. Finally, we have Infinity, -Infinity, "true", and "false", which will only equal themselves when using the == operator.
Interviewer: Alright, that was comprehensive.