In this JavaScript tutorial, we will learn all about the assignment and arithmetic operators that we can use when programming with JavaScript.
In short, with the arithmetic operators, we can perform arithmetic operations like addition, subtraction, multiplication, division, remainder, and exponentiation.
We use the assignment operators to assign values to variables.
Great documentations about JavaScript operators can be found here and here.
This is part of our Learn JavaScript series:
- JavaScript Intro – How to See Your Code Output?
- JavaScript Syntax, Statements, Variables, and Comments
- JavaScript Assignment and Arithmetic Operators
Arithmetic Operators
We will start with the arithmetic operators. As stated in the introduction, these operators are used to perform arithmetic operations.
We create two initial variables and give each a numerical value:
let x = 2; let y = 7;
So, x
has the value 2 and y
has the value 7. We will work with these values throughout this section.
We also create the variable z
which is supposed to hold the resulting values:
let z;
We only need to declare the variables once with the keyword let
. For the following examples, we can just reassign them to other values.
Now, we can perform the actual operations. We start with addition:
Addition Operator
z = x + y;
We assign the variable z
the addition of x
and y
. x
and y
are the operands and +
is the operator.
We will now output z
to see what value it has:
console.log(z); // 9
As we can see, we successfully added x
and y
since 2+7 is indeed 9.
Likewise, we can perform the other arithmetic operations like
Subtraction Operator
z = y - x; console.log(z); // 5
Multiplication Operator
z = y * x; console.log(z); // 14
Division Operator
z = y / x; console.log(z); // 3.5
So, the difference between these statements is the arithmetic operator. In addition, we use +
, in subtraction, we use -
, in multiplication, we use *
, and in division, we use /
.
There are two remaining arithmetic operators: exponentiation and remainder.
Exponentiation Operator
The exponentiation operator raises the first operand to the power of the second one:
z = y ** x; console.log(z); // 49
So, we calculate 72 which is 49.
Remainder Operator
The last operator, the remainder operator, returns this value:
z = y % x; console.log(z); // 1
This operator is used to calculate the remaining value after a division.
The example says the following: 7 / 2 = 3
and the remainder is 1. So, the 2 fits into the 7 three whole times and there is 1 remaining. The remainder operation only outputs the remainder itself.
Maybe you have come across the remainder operator under its other term “modulo“. Β
Increment and Decrement
For incrementing and decrementing, JavaScript provides us with the operators of the same name. But there is a difference between using them as prefixes or postfixes.
Let’s create a new variable x
:
let x = 5;
Now, we perform a postfix incrementation of x
and assign this value to a newly created variable y
:
let y = x++;
Let’s see what value y
has:
console.log(y); // 5
x
has the following value:
console.log(x); // 6
So, with the postfix incrementation, y
was not affected, but x
was incremented by one.
Let’s do the same again, but this time with prefix incrementation:
x = 5; y = ++x;
We set x
back to 5 and we perform a prefix incrementation of x
and assign this value to y
.
y
now has this value:
console.log(y); // 6
And x
has this value:
console.log(x); // 6
As we can see, y
was also affected by the incrementation because with prefix incrementation the values for both x
and y
were incremented by 1.
Postfix Decrementation Operator
The same applies to decrementing. We start with postfix decrementation:
x = 5; y = x--;
We set x
back to 5 and we perform a postfix decrementation that we assign to y
.
y
has this value:
console.log(y); // 5
And x
has this value:
console.log(x); // 4
So, y
was not affected.
Prefix Decrementation Operator
Whereas, with the prefix decrementation, it looks like this:
x = 5; y = --x;
x
is again set back to 5 and we perform a prefix decrementation that we set to y
.
y
has this value:
console.log(y); // 4
And x
has this value:
console.log(x); // 4
Thus, y
is also affected by the prefix decrementation as was the case with prefix incrementation.
Assignment operators
We use assignment operators to assign values to variables.
Simple Assignment Operator
The equal sign =
is known as the assignment operator:
let a = 4;
Here, we create the variable a
, and we assign it the numeric value 4.
Addition Assignment Operator
We can also use the assignment operator to add a value to a variable:
a += 1;
Here, we assign the variable a
the new value which is the initial value plus 1. Let’s check what value a
now has:
console.log(a); // 5
a
has the value 5 because it was initially 4 and we added 1 to it.
The statement
a += 1;
is the same as
a = a + 1;
because we set the variable equal to the initial variable’s value and add 1.
Subtraction Assignment Operator
With subtraction, it looks like similar:
a = 4; a -= 1; console.log(a); // 3
First, we set a
back to 4. Then we subtract 1 from a
and assign the new value to a
. Then we output the value of a
which is 3. And as with addition, the statement
a -= 1;
is the same as
a = a - 1;
Multiplication Assignment Operator
Multiplication looks like this:
a = 4; a *= 2; console.log(a); // 8
Again, we set a
back to the value 4. Then, we multiply a
by 2 and add the new value to a
. Next, we output the new value of a
and we can see that it is now 8.
Division Assignment Operator
Division also works like this:
a = 4; a /= 2; console.log(a); // 2
After setting a back to 4, we divide it by 2 and assign the new value to a
. The output shows that we did this successfully as we get 2 as the output which is the result of dividing 4 by 2.
Remainder Assignment Operator
We do the same with the remainder:
a = 4; a %= 2; console.log(a); // 0
We set a back to 4 and then we calculate the remainder of dividing 4 by 2 and set this value to a
.
Since 2 fits into 4 two times and there is no remaining value, a
has the value 0 which is confirmed by outputting a.
Exponentiation Assignment Operator
The exponentiation assignment works the same way:
a = 4; a **= 3; console.log(a); // 64
a
is set back to 4. Afterward, we calculate 4 to the power of 3 and assign the new value to the variable a
. The output is 64 because 43 equals 64.
The remaining assignment operators are a bit different from the ones we have seen by now.
Left-Shift Assignment Operator
We will start with the left shift assignment:
a = 5; a <<= 2; console.log(a); // 20
So, what is happening here? We set the variable a
that we already declared to the value 5. Then we perform the left shift. In this case, we move the bits 2 to the left and assign the new value to our variable a
.
The 2-bit representation of the number 5 is 00101 because 1*22 + 1*20 = 5.
And we shift these bits 2 to the left, so now we have got this 2-bit number: 10100 which is 1*24 + 1*22 = 20.
Right-Shift Assignment Operator
Similarly, we can perform a right shift assignment:
a = 9; a >>= 2; console.log(a); // 2
We set a
to 9. Then, we perform the right shift assignment where we shift the bits 2 to the right. The 2-bit representation of 9 is: 01001.
When we shift the bits 2 to the right, we get 00010 which is 2. The other 1 is outside the scope and is therefore not taken into account.
The remaining assignment operators are bitwise assignment operators.
Bitwise AND Assignment Operator
The first one is the bitwise AND assignment operator:
a = 5; a &= 2; console.log(a); // 0
a
is set to 5. Then we perform a bitwise and operation of 5 and 2 and the result is then set as the new value for a
. The output value of a
is 0.
The 2-bit representation of 5 is 00101 and the 2-bit representation of 2 is 00010. When we put these 2-bit numbers above each other and perform a bitwise and operation, we get 00000 which is 0.
Bitwise OR Assignment Operator
Likewise, we do the same for the bitwise OR assignment operation.
a = 5; a |= 4; console.log(a); // 5
We set a
back to 5 again and then we perform a bitwise or operation of 5 and 4 and the result is assigned to a
. The result is 5.
The 2-bit representation of 5 is 00101 and the 2-bit representation of 4 is 00100. When we put these 2-bit numbers above each other and perform a bitwise OR operation, we get 00101 which is 5.
Bitwise XOR Assignment Operator
There is also a bitwise XOR assignment operation:
a = 5; a ^= 4; console.log(a); // 1
a
is set back to 5 again. Then we perform the bitwise XOR operation of 5 and 4 and we assign the result to a
.
The result of a bitwise xor operation of 5 and 4 is binary 00001 which is decimal 1.
Summary
In this tutorial, we learned all about JavaScript’s assignment and arithmetic operators. We learned how to perform different kinds of arithmetic operations, and how to assign values in different ways.
If you wish to learn more about JavaScript, stay tuned for the other tutorials that are being released to Finxter.
And for more tutorials about other computer and data science-related topics, check out the Finxter email academy!
Happy Coding!