Operators: Logical & Arithmetic

Open the project folder

Arithmetic operators

Along with assignment and comparison, there are also logical and arithmetic operators tht we can take advantage of in JavaScript.

Let’s begin with arithmetic operators, and some are very similar to the assignment operators we covered previously, just without the equals. Take a look at the following example:

number1 += number2; // result = 20

We already know that += will add the 2 values, and assign the result to number1. But on its own, the addition will simply add the values together:

number1 + number2;

Meaning we can output this directly in a console log, or store in a variable. Give this a try and output the result to the browser:

const result = number1 + number2;
document.getElementById('title').innerText = result;

This works for adding together anything such as numbers:

console.log(5 + 6);

Or, even adding together strings we looked at previously:

console.log(forename + ' ' + surname);

And we have the subtract operator too:

const result = number1 - number2;
document.getElementById('title').innerText = result;

Along with these we also have:

• Divide: /
• Multiply: *
• Remainder after division (modulus): %

These are very similar to the assignment operators from earlier.

There are two others though which are different, and this is increment and decrement, which will increase a value by 1, or decrease the value by 1 each time.

To see this, we need to change the result variable to use let so we can update the value:

let result = number1 * number2;
result++

This increments the result with ++, which will now add 1 to the result. This is useful for many situations, in our Speedy Chef project we use it multiple times.

Such as each time a new order is placed, we increase the order number by 1, also we have a completed pizzas variable, which we increase by 1 each time a pizza has been made, this will be displayed in the stats area.

The opposite of this is to use 2 subtract symbols, to decrement the value by 1 each time:

result--

Logical operators

Next we have logical operators. These are often used with if statements, which we will cover later in more detail, but they are also useful on their own.

If we wanted to check if multiple conditions were true, we could use the logical AND operator. As an example, if we wanted to know if both number variables were a certain value, we could do it like this:

let number1 = 16;
let number2 = 5;
let result = number1 === 16 && number2 === 5;
document.getElementById('title').innerText = result; // true

Both of these are true so we see the Boolean value of true. This would return false if we changed one of these variable values.

This of course relies on both conditions being true, but what if we wanted to know if only one of them was true?

For this we have the logical OR operator, which is the 2 pipes:

let number1 = 16;
let number2 = 5;
const result = number1 === 16 || number2 === 5;
document.getElementById('title').innerText = result;

This returns true if either one of these are conditions are true.

Finally, we have the NOT operator represented by the exclamation mark. This will do the opposite and will turn a true value into false, and false into true.

We can do the opposite of the current result by adding in an exclamation mark:

document.getElementById('title').innerText = !result;

In our project we will have a gameStarted Boolean, we use this to check if the game has not started, and then perform some actions.

Also, if you have a user variable you could check if no user exists and so much more.