Adding some more JavaScript operators - AT THE GATES OF ENLIGHTENMENT - JavaScript in Plain Language (2015)

JavaScript in Plain Language (2015)

PART I: AT THE GATES OF ENLIGHTENMENT

1.7 Adding some more JavaScript operators

+, -, +=, -=, /, /=, %, *, *=

+ If both operands are numbers, it adds the left operand to the right operand.
If one or both operands are strings, it concatenates the two words or characters.


- Subtracts the right numeric operand from left numeric operand.

+= Adds left to right and automatically assigns to the left**.

-= Subtracts right from left and automatically assigns to the left**.

/ Divides the left operand by the right operand.

/= Divides the left operand by the right operand and automatically assigns the quotient to the left operand**.

% modulu ( fetches the remainder of the left operand divided by the right operand).

* Multiplies the left operand by the right operand.

*= Multiplies the left operand by the right operand and automatically assigns the product to the left operand**.

** Notice: Because +=. -=, /= and *= are assignment operators, the left operand must be a variable, it cannot be a direct number.

We will expand these concepts as we code along.

The + plus operator

The + sign has a dual function depending on the type of data JavaScript is processing.

In a string type, the + operator concatenates words like in the following examples:

"Hello" + "World!";

JavaScript puts them together as "HelloWorld!"

If you really want to space out the words there are three possible ways to accomplish the task:

(1)
"Hello" + " " + "World!";

(2)
"Hello " + "World!";

(3)
"Hello" + " World!";

On the first example I’ve added an independent blank space by wrapping it in quotes.

On the second example I’ve placed a space after Hello and before the closing quotation mark.

On the third example I’ve added a trailing space on the word World!

The first example is useful when we add two variables together because we cannot combine leading or trailing spaces with variables due to lack of quotation marks.

Here’s what I mean:

var x = "Hello";

var y = "World!";

Now I concatenate both variables together and assign them to some other variable:

var z = x + y;

The result for z is "HelloWorld!". The only way to add a space between x and y is to use the first technique:
var z = x + " " + y;

Now z contains "Hello World!".

Using the + plus operator to add two numbers

When it comes to numbers, the + operator adds the operands like shown on the following example:

3 + 4 + 5;

That expression will result in 12.

var a = 6;

var b = 10;

var c = a + b;

Variable c is assigned to 16 which is the sum of a and b.

Using the += assignment operator

The += is very useful. Suppose variable i has the value of 3, and you want to add 7 to it, I mean 3 + 7:

var i = 3;

We could do it this way:

i = i + 7;

That will assign variable i to 10.

However, this operation is so common (as you will see ahead), that programmers created a shortcut operator, the += (call it plus equals and never write equals plus because it will not work):

i += 3;

Whenever you see += it means to take the value of the left operand and add the right operand to it.

So now i which was 10 is now 13. What happens if I do it again?

i += 1;

Now i is 14.

What about this one:

i += i; <-- that’s i not 1.

The above example is the same as 14 + 14, which results in 28.

The += operator can also be used in strings to add more characters to the right side of the original value:

var n = "T";

n += "o"; <-- results in "To"

n += "n"; <-- results in "Ton"

n += "y"; <-- results in "Tony"

This can be very useful in loops in order to automatically construct a phrase or a list of names as we will see later.

The ++ (double plus) incrementing operator

Many times we want to increment the value by just 1 unit. This is a very common technique in programming.

We could do it in three ways:

Assuming var x = 5;

x = x + 1; <-- now x is 6

x += 1; <-- now x is 7

x++; <-- now x is 8

x++; <-- now x is 9

This last way of incrementing is limited to the value of 1 at a time. The other ways are more versatile since we can increment by as much at a time as we wish. However, the ++ operator is extremely popular in loops because loops normally (but not always) increment in single steps. We will come back to it when we get to loop around a bit.

The –, -- and -= subtraction operators

The subtraction operator is only used in numbers. It cannot be used to subtract characters from a string.

5 – 2; <-- The result is 3

Examples:

var x = 100;

x - 5; <-- The result is 95, but x is still 100 because it was not re-assigned.

x = x – 5; <-- Now x is 95.

var y = x – 100; <-- The result for y is -5, because x is 95

We can also use the subtraction unary operator if we want to subtract by 1:

y--; <-- now y is -6

This operator -- is the same as y = y -1 or y -= 1;

Read the -= as “minus equals” (never as equals minus ).

The Division / or /= Operators

To divide two numbers we use the forward slash:

8 / 4; <-- It results in 2

Examples:

var x = 12;

var y = 3;

var z = x / y;

Variable z gets assigned the division of 12 by 3, resulting in 4.

We could also assign the result of a division back to the original variable:

x = x / 3;

or as a shortcut:

x /= 3;

The “divide/equals” is not used as much as += or -= but it is good to know it exists.

The Modulus % Operator

Sometimes we don’t want the result of a division, I mean its quotient. We may be looking for the remainder or the modulus of the division. This is very common in programming so please make sure to understand it.

When I divide 14 by 3, I get a result of 4 and also a remainder of 2. If my intention is only to get the remainder I can ask JavaScript to get the remainder with the modulus % operator:

14 % 3;

JavaScript divides the two numbers and displays the remainder of the division which is 2.

The modulus becomes very handy for things like figuring out odd and even numbers.

In 12 % 2, the result is zero which tells me that 12 is an even number.

In 13 % 2, the result is 1 which tells me that 13 is an odd number.

in 2014 % 4, the result is 2 which tells me that 2014 is not a leap year since leap years are divisible by 4.

In 2016 % 4, the result is zero, which tells me that 2016 will is a leap year.

There are many applications for the modulus operator and we will play with it on some exercises throughout the book.

The Multiplication Operator *

To multiply numbers or numeric variables we use the asterisk because we can’t use the x symbol. x is normally used as a variable name. So in computer science we use the asterisk to represent multiplication:

3 * 6; <-- results in 18

var x = 7;

var y = 5;

var z = x * y; <-- results in 35

When it comes to assigning the result back to the original variable we can do it in two different ways:

x = x * 2; <-- x is now 14

or

x *= 2; <-- x is now 14