Commonly used Operators in ECMAScript 2015

ECMAScript Basics - Part 7

ECMAScript 6

Foreword: In this part of the series, I talk about some common ECMAScript Operators.

By: Chrysanthus Date Published: 12 May 2016

Introduction

This is part 7 of my series, ECMAScript Basics. In this part of the series, I talk about some common ECMAScript Operators. You should have read the previous parts of the series before coming here, as this is a continuation.

Operand
An Operand is an identifier or a literal (value) associated with an operator. Consider,

myVar = 30;

myVar is a left operand and 30 is a right operand. = is the assignment operator, not the equal operator. The equal operator is, == and is used only in conditions.

Consider:

myVar && hisVar && herVar

There are three operands in this expression. So, you can talk of the first, second and third operand.

Equality Operators
The equality operators I talk about in this section are the ones that test if the left and right operands are equal or not equal.

The Equal Operator
You should have seen this before. It is ==, typed as a double assignment operator. The equal operator returns true if operands are equal, otherwise it returns false. You should have seen examples of this, if you have been reading this tutorial series in the order given. Do not confuse between the assignment operation and the equal operator by trying to make direct analogy with what is found in mathematics.

The Does-not-equals Operator
The Does-not-equals operator is the opposite of the Equal Operator. The Does-not-equals operator is, != . It returns true if the operands are not equal, otherwise it returns false. I now present some examples.

Try the following code (include the HTML components first):

<script type="text/ECMAScript">
myVar = 25;
hisVar = 30;
if (myVar != hisVar)
    {
        alert('The values of the two identifiers are not equal.');
    }
</script>

myVar is 25, hisVar is 30. We have not used the var reserved word this time. The condition is read like this: If myVar is not equal to hisVar, then the if-block will be executed. Since the values of the identifiers are not equal,  (myVar != hisVar) returns true.

In the following code, the values of the two identifiers are equal, so the condition returns false and the if-block is not executed.

<script type="text/ECMAScript">
myVar = 50;
hisVar = 50;
if (myVar != hisVar)
    {
        alert('The values of the two identifiers are not equal.');
    }
</script>

Relational Operators
A relational operator compares the operands on its sides and returns a logical value (true or false) depending on whether the comparison is correct or wrong. If the comparison is correct a logical value of true is returned. If it is wrong, a logical value of false is returned. Another name for Boolean Value is Logical Value, which is either true or false.

The Greater-Than Operator
The Greater-Than operator is, > . It returns true if the left operand is greater than the right operand. In the following example, the left operand is greater than the right operand. So the if-block is executed:

<script type="text/ECMAScript">
variab1 = 60;
variab2 = 70;
if (variab2 > variab1)
    {
        alert('The value of variab2 is greater than the value of variab1.');
    }
</script>

Read and try the above code, if you have not done so.

The Greater-than-or-equal Operator
The Greater-than-or-equal operator is, >= (it is the math greater than sign followed by the math equal sign). It returns true if the left operand is greater than or equal to the right operand.

The Less-than Operator
The Less Than Operator is < .It returns true if the left operand is less than the right operand.

The Less Than or Equal - Operator
The Less than or Equal operator is, <= . It returns true if the left operand is less than or equal to the right operand.

Arithmetic Operators
Arithmetic operators are the additive operators and the multiplicative operators. The additive operators are + and -. The multiplicative operators are *, / and % (see details below). These operators are used as in arithmetic (mathematics).

Additive Operators

Addition Operator
The addition operator adds two numbers or the values of two identifiers.
Code example:

<script type="text/ECMAScript">
    var1 = 20;
    var2 = 30;

    var3 = var2 + var1;
    alert(var3);
</script>

Note: var1, var2 or var3 is different from var. var is a reserved word that you do not use arbitrarily. var1, var2 or var3 is an identifier of your choice.

Subtraction Operator
The Subtraction operator subtracts one number from another or the value of one identifier from the value of another.
Code example:

<script type="text/ECMAScript">
    var1 = 20;
    var2 = 30;

    var3 = var2 - var1;
    alert(var3);
</script>

Multiplicative Operators

Multiplication Operator
The multiplication operator multiplies two values together or the values of two identifiers.
Code example:

<script type="text/ECMAScript">
    var1 = 20;
    var2 = 30;

    var3 = var2 * var1;
    alert(var3);
</script>

Note that the multiplication operator is * and not X.

Division Operator
The division operator divides one value by another or divides the value of one identifier by the value of another identifier.
Code example:

<script type="text/ECMAScript">
    var1 = 20;
    var2 = 30;

    var3 = var2 / var1;
    alert(var3);
</script>

Note that the division operator is, / .

Modulus Operator
The modulus operator divides the first identifier (value) by the second identifier (value) and returns the remainder. Read and try the following code:

<script type="text/ECMAScript">
    var1 = 17;
    var2 = 12;

    var3 = var1 / var2;
    alert(var3);
</script>

Increment Operator
The Increment Operator is, ++. It works with one operand (identifier), not two as the others. The operand has to be a number. When it is placed in front (prefix) of the operand, it behaves in one way. When it is placed after (postfix) the operand it behaves in another way.

Prefix: When it is prefix, it adds 1 to the operand and returns the incremented operand. Read and try the following code:

<script type="text/ECMAScript">
    var1 = 10.5;

    var2 = ++var1;
    alert(var2);
</script>

In the code, initially, 10.5 is assigned to var1. Then we have a statement. In the statement you have a new identifier, var2, the assignment operator and then �++var1�. What interest us is �++var1�, where the increment operator is in front of the identifier. The value the increment operator returns is assigned to var2. If you have tried the code, you would have noticed that the value of var2 is 11.5. This means, if used prefix, it increments the operand and then returns the incremented operand.

Postfix: When it is postfix, it returns the operand before adding 1 to it. The returned value is the original value of the operand. The increased value is the new value of the operand, which is not returned. Read and try the following code. There are two alert boxes: when the first one is displayed, click its OK button and the next one will be displayed.

<script type="text/ECMAScript">
    var1 = 10.5;

    var2 = var1++;
    alert(var2);
    alert(var1);
</script>

If you have tried the code, you would have noticed that the value for var2 is 10.5 and the final value for var1 is 11.5, confirming that the incrementing took place after the value was returned.

Decrement Operator
The Decrement operator, -- , behaves like the increment operator with the only difference that it subtracts 1 instead of adding.

We have come to the end of this part of the series. Rendezvous in the next part.

Chrys

Broad Network

Related Articles

Commonly used Operators in ECMAScript 2015

ECMAScript Basics - Part 7

ECMAScript 6

Introduction

Related Links

Comments