Data Types: Boolean, Null & Undefined

Open the project folder

The console.log

We are now going to look at some more primitive data types available in JavaScript. When playing around with code like this, we have something available for testing called the console log.

We briefly worked in the browsers console earlier and the log will allow us to output things to this console, like this:

Here we are using the greater than operator to check if 10 is greater than 5. Just like earlier, in the browser right click > inspect > console tab, and you will see the output of true.

Boolean data type

The true and false values are the data type of Boolean, true and false are the only 2 outcomes so it is really useful for checking things. For example, in our project, we will have a game started variable, set to the Boolean value of false. Then when we start the game, this is re-assigned to be true. This allows us to only have certain features available if the game has started.

And we can see this Boolean using typeof. Add the following code between the <script> tags inside the index.html file:

let gameStarted = false
console.log(typeof gameStarted)

Using a boolean with if statements

But how can we use this in a real situation? Well, boolean values are often used together with a if statement:

let gameStarted = false
if (gameStarted) {
  console.log('game started')
}

With an if statement, the code inside of the curly braces will only run if the condition is true, so if gameStarted is set to false, we should not see this ‘game started’ message in the console.

Give this a try and switch between true and false values. We will cover if statements in more detail soon, but this is how they work with Booleans.

Using a string with if statements

But, what about if the if statement never contained a Boolean. What about another primitive value such as a string? To see this, we can create a playerName variable:

let playerName = 'Chris';
let gameStarted = false;
if (gameStarted) {
  console.log('game started');
}

Then change our if statement to check playerName:

let playerName = "Chris";
let gameStarted = false;
if (playerName) {
  console.log("username is set");
}

The playerName variable is not set to true or false, so what can we expect?

The condition is determined to be true, and the console log will run. This is because Booleans are generally true if a value exists, and we have a name set in the variable.

However, updating the variable to have an empty value:

let playerName = ''

Will result in a false value and the console.log will not run. Having an empty value like this should not be confused with not having a value at all.

Undefined

A variable without a value is another primitive type called undefined. If we have no value at all assigned to the variable like this:

let playerName;

A console.log will show the value of undefined. This is similar to earlier when we worked in the console using $0. $0 referred to an element we selected on the page. Ig we refreshed the page, and lost the element we selected, typing $0 will return the value of undefined.

Null

Another primative value which indicates something is missing is null:

let playerName = null
console.log(playerName)

Null is related to objects and indicates an empty object. Often when working with databases or backend services, a common example of this is when requesting user data.

If the user is logged in, we will get back an object containing all of the users information, if they are not logged in, we will often see null since the result object will be empty.