Logical Operators in ECMAScript 2015

ECMAScript Operators – Part 4

ECMAScript 6

Foreword: In this part of the series, we look at logical operators in ECMAScript.

By: Chrysanthus Date Published: 13 May 2016

Introduction

This is part 4 of my series, ECMAScript Operators. Logical operators are the operators for the Boolean AND, Boolean OR and Boolean NOT. In this part of the series, we look at logical operators in ECMAScript. I use the if-condition to explain logical operators. If you are new to programming, then you should have read the previous part of the series before reaching here.

Single Condition Expression Example
Consider the following code:

<script type="text/ECMAScript">

        //tall means 20
        me = 20;

        if (me == 20)
         {
                alert("I am tall");
         }

</script>

In the condition, (parentheses of if) there is only one expression, which is, (me == 20). If this expression results in true, the if-block will be executed. If it results in false, the if-block will not be executed.

The above if-construct is equivalent to

        if (true)
         {
                alert("I am tall");
         }

For the if-construct to be executed, you do not need the expression of the identifier with its equality operator. The expression in the if-condition, no matter how complex, will always result in a single true or a single false.

In the following code, which you should read and try, the condition results in false.

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

    <script type="text/ECMAScript">

        //short means 10
        me = 10;

        if (me == 20)
            {
                alert("I am tall");
            }

    </script>

</body>
</html>

The extra HTML code is to produce a web page.
The if-block (curly braces) in the above code has not been executed, because the condition results in false, since the value of the identifier, me, is 10 for “short” and not 20 for “tall”. The above if-construct is equivalent to:

if (false)
    {
        alert("I am tall");
    }

An if-block can only be executed if the condition is true. In this case it is not executed, because the condition is false.

More than One Expression in Condition
You can have more than one expression in a condition. In this part of the series, I consider a maximum of two expressions in a condition. Each of the expressions results in true or false. The expressions are combined with the AND, OR or NOT operators. The AND operator is typed as, &&. The OR operator is typed as, || . The NOT Operator is typed as ! . && and || , and ! are called logical operators. There are variations to these (see below). With logical operators, the rules (truth tables) for AND, OR and NOT can be written as:

AND
(false) && (false) = false
(false) && (true) = false
(true) && (false) = false
(true) && (true) = true

OR
(false) || (false) = false
(false) || (true) = true
(true) || (false) = true
(true) || (true) = true

NOT
!(false) = true
!(true) = false

Double-Expression Examples
The if-block will not be executed in the following code because the condition results in false:

<script type="text/ECMAScript">

        if ((false)&&(true))
         {
                alert("We are tall");
         }

</script>

A practical example for the above code is:

    <script type="text/ECMAScript">

        //Tall means 20 and short means 10
        you = 20;
        me = 20;

        if ((you == 10)&&(me == 20))
         {
                alert("We are tall");
         }

    </script>

20 is assigned to the identifier, you, and also to the identifier, me. The first expression in the condition results in false and the second one results in true. (false)&&(true) gives false as the effective Boolean value for the condition. So the block is not executed.

The if-block will be executed in the following code:

<script type="text/ECMAScript">

        if ((false)||(true))
         {
                alert("We are tall");
         }

</script>

A practical example for the above code is:

    <script type="text/ECMAScript">

        //Tall means 20 and short means 10
        you = 20;
        me = 20;

        if ((you == 10)||(me == 20))
         {
                alert( "We are tall");
         }

    </script>

Read the above code and try it. The first expression results in false; the second one results in true. The effective condition is true, since (false)||(true) gives true.

NOT Examples
The if-block will be executed in the following code:

<script type="text/ECMAScript">

        if (!(false))
         {
                alert("I am tall");
         }

</script>

The if-block is executed, if the condition is true. !(false) gives true.

A practical example for the above code is:

    <script type="text/ECMAScript">

        //Let tall mean 20 and short mean 10
        me = 20;

        if (!(me == 10))
         {
                alert("I am tall");
         }

    </script>

Time to take a break. We stop here and continue in the next part of the series.

Chrys

Broad Network

Related Articles

Logical Operators in ECMAScript 2015

ECMAScript Operators – Part 4

ECMAScript 6

Introduction

Related Links

Comments