JavaScript #12 — Boolean Variables

These JavaScript articles are written for people who are interested in coding and are meant to provide an introduction to the programming world.

You are going to learn what is a boolean variable and how to work with it in this article.

Boolean variables

Boolean variables can be assigned only one of these two values: true or false.

<script>
  let amIAmazing = true
  console.log(amIAmazing)
  let isThisFailing = false
  console.log(isThisFailing)
</script>

Evaluating values

The logic of a program is often driven by a comparison of a value to another value and then deciding what to do in case the result is true or false.

For example, let’s evaluate if a user is old enough to watch a movie. First, the program is going to ask for age. Then, we compare the age against the movie age limit (if age is greater than 6). As the program output, it prints out a boolean value if the user is or is not old enough.

<script>
  let input = prompt("How old are you?")
  let age = Number(input)
  let isOldEnough = age > 6
  
  console.log(isOldEnough)
</script>

Comparison types

It is possible to assert if a numeric value is:

• greater — using > symbol, for example, age > 6
• greater or equal — using >= symbols, for example, age >= 6
• equal — using === symbols, for example , age === 6
• not-equal — using !== symbols, for example , age !== 6
• lesser — using < symbols, for example , age < 6
• lesser or equal — using <= symbols, for example , age <= 6

The non-numeric values can be asserted using:

• equal — using === symbols, for example, name === "Jimmy"
• not-equal — using !== symbols, for example, name !== "Jimmy"

Here is a code sample demonstrating all the comparison types. It is a lot to handle, take some time and study how it behaves.

Open VS Code, create a new file, and execute the code. Try to run it couple of times and put there a different value every time. Observe whether the results make sense to you.

<script>
  let input = prompt("How old are you?")
  let age = Number(input)
  console.log("Age: ", age)
  let greaterThan6 = age > 6 
  let greaterThanOrEqual6 = age >= 6 
  let equal6 = age === 6 
  let notEqual6 = age !== 6 
  let lessThan6 = age < 6 
  let lessThanOrEqual6 = age <= 6 
  console.log("greaterThan6", greaterThan6)
  console.log("greaterThanOrEqual6", greaterThanOrEqual6)
  console.log("equal6", equal6)
  console.log("notEqual6", notEqual6)
  console.log("lessThan6", lessThan6)
  console.log("lessThanOrEqual6", lessThanOrEqual6)
  let name = prompt("What's your name?")
  console.log("Name: ", name)
  let equalToJimmy = name === "Jimmy"
  let notEqualToJimmy = name !== "Jimmy"
  console.log("equalToJimmy", equalToJimmy)
  console.log("notEqualToJimmy", notEqualToJimmy)
</script>

Logic operator: AND

The keyword (symbol) for AND logical operator is && in JavaScript. The AND logical operator takes two values as an input and returns a single value as an output.

The AND operator has the following rules:

• true AND true is evaluated as true
• true AND false is evaluated as false
• false AND true is evaluated as false
• false AND false is evaluated as false

Let’s experiment with && logical operator. Open the VS Code, create a new HTML file and run the code. Try to change the values of value1 and value2 to true or false and observe if it corresponds with the rules mentioned above.

<script>
  let value1 = true
  let value2 = false
  let result = value1 && value2
  
  console.log(`${value1} AND ${value2} = ${result}`)
</script>

Logic operator: OR

The keyword (symbol) for OR logical operator is || in Javascript. The OR logical operator takes two values as an input and returns a single value as an output.

The OR operator has the following rules:

• true OR true is evaluated as true
• true OR false is evaluated as true
• false OR true is evaluated as true
• false OR false is evaluated as false

Let’s experiment with || logical operator. Open the VS Code, create a new HTML file and run the code. Try to change the values of value1 and value2 to true or false and observe if it corresponds with the rules mentioned above.

<script>
  let value1 = true
  let value2 = false
let result = value1 && value2
  
  console.log(`${value1} AND ${value2} = ${result}`)
</script>

Negation

Negation is done using ! in JavaScript. Negation always flips the boolean variable to the other value. If the value is true, negation flips it to false. If the value is false , negation flips it to true.

For example, if a value of a variable is true, then putting ! in front of it, !true, will turn it into false.

Open VS Code, create a new file and try using the negation out.

<script>
  let isValid = true
  console.log(isValid)
  let isInvalid = !isValid
  console.log(isInvalid)
</script>

Final words

The boolean variables are going to be used in the next step, which is going to be about building a logic using conditional statements if and else. Make sure you really understand everything in this article before moving to the next step.

Next Step

JavaScript #13 — Conditional: If/else