Operators: Assignment & Comparison

Open the project folder

Operators

Operators are something we use all the time in JavaScript and we have already used some of them already. We have already looked at the assignment operator when assigning a value to a variable using equals. Along with the addition operator which is the plus symbol.

In the starter folder, there are some variables set up that use this assignment operator:

// ASSIGNMENT OPERATORS
// =, +=, -+, *=, /=, %=

const forename = "Homer";
const surname = "Simpson";
let number1 = 15;
let number2 = 5;

Addition assignment

But, there are other assignment operators that you can see here in the comments. First is the += operator, this is for addition assignment.

Let’s say we wanted to add number1 and number2 together, and store the value into a variable. We could do it like this:

let newNumber = number1 + number2;

And output the new number:

let newNumber = number1 + number2;
document.getElementById('title').innerText = newNumber;  // 20

JavaScript also provides us with some shorter ways of doing this. Rather than adding number 1 and number 2 together, then assigning to a variable, we can do this:

// let newNumber = number1 + number2
number1 += number2;

This will add the 2 variable values together and assign the value to the variable on the left (number1). We can check by outputting number1 below:

document.getElementById('title').innerText = number1; // 20

Another use case we will use in the project is to add a new class to a HTML element, without overriding the existing classes. Using the forename and surname variables, if we wanted to display the full name combined on the screen, we might come up with something like this:

document.getElementById('title').innerText = forename;
document.getElementById('title').innerText = surname;

This approach will not work because the surname replaces or overrides the forename since it appears last in our code. Again, we can make use of += to add this to our element, rather than replace:

document.getElementById('title').innerText = forename
document.getElementById('title').innerText += surname

And we can add a space between then names by adding an empty space as a string:

document.getElementById('title').innerText += ‘ ‘ + surname

Subtraction, division, and modulus (remainder)

This is adding values and re-assigning the value, but we can also do the opposite with subtraction:

number1 -= number2
document.getElementById('title').innerText = number1; //10

In addition to this, we also have multiply:

number1 *= number2

Divide:

number1 /= number2

Modulus (remainder after division):

number1 %= number2

For the modulus, our variables of number1 and number2 will result in 15/5. 5 divides into 15 3 times, therefore there is no remainder in our example.

Comparison

Another type of operator is comparison. This provides us with some ways to compare values rather than re-assign.

As we already know, a single equals will assign the value on the right to the value on the left. To see this, clean up the existing code to look like this:

let number1 = 0;
let number2 = 5;
number1 = number2;
document.getElementById('title').innerText = number1;

Leaving number1 to be the value of 5. This can be confusing because this can look like we are checking to see if number1 is equal to number2.

This is not the case but there is a way to do this, and this is with double equals. First, change the variables to be the same value:

let number1 = 5;
let number2 = 5;

Then we can check if they are equal with the double equals:

let number1 = 0;
let number2 = 5;
number1 == number2;

The result is a Boolean value of either true or false, and we can also store this into a variable:

const result = number1 == number2;

document.getElementById('title').innerText = result; // true

We can do the opposite of this by adding an exclamation mark, to check if the values are not equal:

const result = number1 != number2;

When using == or != there is something to be aware of,this will only compares the values, and not the data types.

If we were to change one of them to be a string:

let number1 ="5";
let number2 = 5;

We would see the same result of true, number1 and number2 are considered equal values, even though one is a string and one a number.

Strict equality

There is a way to check strict equality, so both the value and data type must be equal, and this is with an extra equals symbol:

let number1 ="5";
let number2 = 5;
const result = number1 === number2

The above would result in false since the data types are not equal. Again, we can add an exclamation mark at the beginning to do the opposite:

const result = number1 !== number2

Comparison like this is often combined with if statements which we briefly covered earlier.

Less than and greater than

Some other comparison operators include less than and greater than symbols which are the left and right arrows. To see this, I am going to make these values different again:

let number1 = 10;
let number2 = 5;

And we can check if number1 is a greater value than number2:

const result = number1 > number2;

Which is true, and this can be switched around with less than (<). And we can also combine these with an equal’s symbol to also check if the value is less than or equal, or more than or equal:

const result = number1 <= number2
const result = number1 >= number2

These types of operators are useful for things such as games where we can check if a player’s health is zero or less to end the game.