Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

JavaScript Basics

Well done!

You have completed JavaScript Basics!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Boolean Values

7:32 with Guil Hernandez

Every condition evaluates to either true or false. True and false have a specific meaning in JavaScript, they're called "Booleans," and along with strings and numbers, they represent a third type of value (or data type) in JavaScript.

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
correctGuess 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 guess 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 correctGuess 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 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 guess 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 teacher's 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 variable 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 correctGuess 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