Chapter 3: Javascript Variables and Data Types

3.4 Operators

We’ve covered quite a bit in the previous sections. In this section, let’s look at some of the operators that we can use on variables.

3.4.1 The Assignment Operator

We’ve seen previously that we can assign values to variables using the = sign.

The = sign in programming has a different meaning from the = sign we learned in Math. In programming, the = sign is known as an assignment operator. It means we are assigning the value on the right side of the = sign to the variable on the left. A good way to understand a statement like userAge = 23 is to think of it as userAge <- 23.

The statements x = y and y = x have very different meanings in programming.

Let’s look at an example.

Type the following code into chap3.js and save it.

var x = 5, y = 10;

We first declare two variables x and y and assign them values 5 and 10 respectively.

Next, let’s assign y to x. It is all right for us to assign the value of one variable to another variable. To do that, we write

x = y;

Next, we display the new values of x and y by writing

console.log("x = " + x + ", y = " + y);

Refresh your browser. You’ll get

x = 10, y = 10

As you can see, x becomes 10 while y remains unchanged. This is because we assigned the value of y to x when we write x = y (think of it as x <- y).

Now, change the line x = y to y = x. Mathematically, x = y and y = x mean the same thing. This is not so in programming.

Save chap3.js and refresh the browser. You’ll get

x = 5, y = 5

You can see that in this example, the x value remains as 5, but the value of y is changed to 5. This is because the statement y = x assigns the value of x to y (think of it as y <- x).

3.4.2 Mathematical Operators

Javascript OperatorsBesides assigning values to variables, we can also perform mathematical operators on them. Basic operators in Javascript include +, , *, /, % and ** which represent addition, subtraction, multiplication, division, remainder and exponent respectively.

Add the following code to chap3.js to see the result of each operator.

var p = 5, q = 2;

//Addition
console.log(p+q);
//You’ll get 7 as the output

//Subtraction
console.log(p-q);
//You’ll get 3 as the output

//Multiplication
console.log(p*q);
//You’ll get 10 as the output

//Division
console.log(p/q);
//You’ll get 2.5 as the output

//Remainder: gives the remainder when p is divided by q
console.log(p%q);
//You’ll get 1 as the output because 5 divided by 2 gives a remainder of 1

//Exponent: gives the value of p raised to the power of q
console.log(p**q);
//You’ll get 25 as the output because 5 to the power of 2 is 25

3.4.3 More Assignment Operators

Finally, there are a few more operators in Javascript (and most programming languages) that perform mathematical operations on variables AND assign the result back to the original variable. These include operators like +=, -= and *=.

Suppose we have the variable x, with an initial value of 10. If we want to increment x by 2, we can write

x = x + 2;

The program will first evaluate the expression on the right (x + 2) and assign the answer to the left. So eventually the value of x becomes 12.

Instead of writing x = x + 2, we can also write x += 2 to express the same meaning. The += sign is actually a shorthand that combines the assignment and addition operators. Hence, x += 2 simply means x = x + 2.

Similarly, if we want to do a subtraction, we can write x = x – 2 or x -= 2. The same works for all the 6 operators mentioned in the section above.

Most programming languages also have the ++ and operators. The ++ operator is used when you want to increase the value of a variable by 1. For instance, suppose

var x = 2;

If you write

x++;

the value of x becomes 3.

There is no need to use = when you use the ++ operator. The statement x++; is equivalent to

x = x + 1;

In addition to the ++ operator, we also have the operator (two minus signs). This operator decreases the value of the variable by 1.