Boolean Values

A condition in a conditional statement is really just a question with a yes or 0:00 no answer. 0:04 In JavaScript, we say that the condition evaluates to either true or false. 0:05 True and False have a specific meaning in JavaScript, they're called Booleans. 0:11 And along with strings and 0:15 numbers, they represent a third type of value or data type in JavaScript. 0:17 Though they have an unusual name, Booleans are simple. 0:21 Remember, a Boolean value can be only one of two possible values, 0:24 true or false, that's it. 0:29 There will be times where you'll want to ask your program yes/no questions, 0:31 then run different code based on those answers. 0:35 Let's have a look at some examples. 0:38 This time open the booleans.js inside your js folder and 0:41 update the script tag in index.html so that it points to booleans.js. 0:45 In JavaScript programming, the two possible Boolean values are represented by 0:56 the keywords, true and false. 1:00 Because all conditions return a true or false value, 1:02 you can see how these two keywords work by using them in this if/else statement. 1:05 If I type true inside the condition and refresh the browser, 1:10 The condition is true displays in the console. 1:15 Now, if I type false inside the condition, 1:19 The condition is false appears. 1:24 Notice that there are no quotation marks around the words true or false. 1:29 They're not strings, they each represent a specific type of value, a Boolean value, 1:34 so quotes should not go around them. 1:39 You can assign a Boolean value to a variable, 1:41 just like you can assign a string or a number to a variable. 1:43 This is a common way to keep track of a certain condition throughout a program. 1:46 For example, let's see how we can use a Boolean value in a number guessing game. 1:50 First, declare a new variable using the let keyword named 1:56 correctGuess, and set it to the Boolean value false. 2:01 When the number guessing game begins, the player hasn't yet guessed anything, so 2:06 we'll say that the guess is false. 2:11 The value of this variable will only change if the player gets the correct 2:13 answer. 2:17 And notice how we're using the let keyword here because we expect the value of 2:18 correct guests to change. 2:22 Next, declare a variable named number to store the number two guess. 2:24 You can set it to any number between 1 and 10, I'll set it to 6. 2:30 Then let's declare one more variable named guess. 2:35 To store the answer, the user types into a prompt dialogue, 2:39 which will instruct the user to guess a number between 1 and 10. 2:43 Next, below the guests variable, 2:55 let's write a conditional statement that changes the correct guess 2:58 variable from false to true if the user guessed the correct number. 3:02 Type, if guess === number, 3:07 run the code inside these curly braces or code block. 3:11 If the number the user typed into the prompt dialog exactly 3:18 matches the number stored in the number variable, 3:22 we're going to change the value of the correct guess variable from false to true. 3:25 If the player guesses wrong, the variable isn't changed, it remains false. 3:32 Now, there's one detail we need to address in the condition. 3:38 You learned that the value returned by the prompt method is a string. 3:41 So notice how in the condition, 3:46 we're comparing a number value with a string value. 3:48 For example, even if the user types 6, the program will compare 3:51 the number 6 inside quotes with the actual number value 6. 3:55 And this is always going to return false, because we're using the strict equality 3:59 operator, and the game will not work as expected. 4:04 So for the sake of this example, 4:07 we need to convert the string value returned by prompt to a number of value. 4:09 The quickest way to do this is by adding a plus symbol or 4:13 the unary plus operator just before the guests variable like this, 4:16 make sure that there is no space between the plus and the variable. 4:20 So now, this ensures that we're comparing two number values. 4:23 It may seem a little strange, but 4:27 don't worry too much about this operator for now. 4:29 You're going to learn a whole lot more about converting strings to numbers and 4:31 working with number values in a later course. 4:35 For now, I've posted more information about the unary plus operator and 4:37 the teachers notes with this video. 4:41 Finally, let's update the conditional statements below to check the current 4:43 value of the correctGuess variable and put a message that matches the condition. 4:47 First, the if statement will check if the value of correctGuess is true. 4:53 If it's true, then log the message, You guessed the number. 5:00 Else, if the value is false, 5:10 then print a different message that reveals the random number. 5:12 I'll use a template literal to insert the value 5:17 of the number variable Into the message, Sorry, 5:23 the number was ${number} and that's it. 5:28 Before running it, let's step through this code line by line. 5:34 First, we declare a variable with the Boolean value false. 5:38 Next, we store the number to guess in a variable named number. 5:43 We then open a dialog box and ask the user to supply a number, 5:47 which we store in the variable guess. 5:52 Then the program tests the user's response. 5:54 If the user supplied the same number stored in guess, 5:58 then the correct guest variable changes to true. 6:02 If the player didn't however, then the variable stays the same, it's false. 6:05 Then we have a second conditional statement that says, 6:11 if the value in correctGuess is true, then print a winning message to the console. 6:15 However, if the value is false, then reveal the number. 6:20 All right, let's see it in action. 6:24 I'll save the file, refresh the browser. 6:26 If I type, say, 8 into the prompt dialog, 6:30 the console displays, Sorry, the number was 6. 6:34 Refresh the page to try again, this time I'll type 6 and 6:38 see the message, You guessed the number, good. 6:42 You can also simplify the code in this if/else statement. 6:45 Remember that all conditions are either true or false, 6:49 that is, the test condition produces a Boolean value. 6:53 Since we're already storing either true or false in the correctGuess variable, 6:56 we don't need to use the strict equality operator at all. 7:01 In other words, this is the same as this. 7:04 And as you can see, 7:11 the number guessing game still works in the same way as before. 7:12 There are other ways you might write this number guessing game, 7:20 without having to use two separate conditional statements. 7:23 I use this approach to teach you how Booleans get evaluated and 7:25 change the flow of a program when used in conditional statements. 7:28