Comparison and Arithmetic Operators in ECMAScript

ECMAScript Basics - Part 7

Forward: In this part of the series, we talk about some common ECMAScript Operators.

By: Chrysanthus Date Published: 25 Jul 2012

Introduction

This is part 7 of my series, ECMAScript Basics. In this part of the series, we talk about some common ECMAScript Operators. We have seen the logical operators. We have also seen the assignment and equal operators. In this part we look at comparison and arithmetic operators.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

Operand
An Operand is a variable 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 the above expression. So, you can talk of the first, second and third operand.

Comparison Operators
A comparison operator compares the operands on its sides and returns a logical value 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 Equal Operator
We 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. We have seen many examples of this.

The Not Equal Operator
The Not Equal operator is the opposite of the Equal Operator. The Not Equal operator is, != . It returns true if the operands are not equal, otherwise it returns false. Let us look at 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 variables 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 variables are not equal,  (myVar != hisVar) returns true.

In the following code, the values of the two variables 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 variables are not equal.');
    }
</script>

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.

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
An Arithmetic operator takes one or two numbers as operands (either literals or variables) and returns the answer, similar to what happens in arithmetic.

The standard arithmetic operators are addition (+), subtraction (-), multiplication (*), and division (/). To save time explaining these four operators, just read and try the following examples:

Addition Operator
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 a variable name you choose.

Subtraction Operator
Code example:

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

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

Multiplication Operator
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
Code example:

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

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

Note that the division operator is, / .

Other operators are the Modulus (%), Increment (++), Decrement (--), and the Unary Negation operators. You have to learn the particular way in which each of these operators behaves.

Modulus Operator
The modulus operator divides the first operand by the second operand 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, 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 variable, var2, the assignment operator and then �++var1�. What interest us is �++var1�, where the increment operator is in front of the variable. 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 above 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.

Unary Negation Operator
This operator is the negative sign, - . It can take two operands on its sides or one operand on its right. Any of its operand must be a number. When it works with two operands it is the subtraction operator. When it works with one operand (on its right), it negates the operand just like in math. Read and try the following:

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

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

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

Chrys

Broad Network

Comparison and Arithmetic Operators in ECMAScript

ECMAScript Basics - Part 7

Introduction

Related Links

Comments