Global Scope in ECMAScript

Scopes in ECMAScript – Part 1

ECMAScript 6

Foreword: In this part of the series I make you appreciate global scope in ECMAScript.

By: Chrysanthus Date Published: 15 Jul 2016

Introduction

This is part 1 of my series, Scopes in ECMAScript. In this part of the series I make you appreciate global scope in ECMAScript. A block is a set of statements enclosed in curly braces, which are { and }. The question here is: if a variable (identifier) is declared outside a block will it be seen in the block? On the other hand, if it is declared inside the block, will it be seen outside the block? Blocks do not occur arbitrarily in code. There are certain constructs that have blocks.  The following constructs have blocks: if, for, and function. You should have seen these constructs (statements).

For the rest of this tutorial, we look at the if, for and function constructs and how variable scope is applied to them. Some code samples below, may not work; do not worry about that.

None of the variables in this part of the series is declared with var or const.

The if Construct and Variable Scope
Read and try the following code, where the extra HTML lines are just to produce a web page; they are not really part of the tutorial:

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

    <script type="text/ECMAScript">

        hisVar = "his stuff";

        if (25 == 25)
            {
                document.write(hisVar);
                herVar = "her stuff";
            }

        //document.write(herVar);

    </script>

</body>
</html>

The if condition is if 25 is equal to 25. Now this condition will always return true, and so the if block will always be executed. Outside the if-block, the variable, hisVar is declared and assigned the value, "his stuff". Inside the if-block there is a statement to write hisVar at the web page. This variable was declared outside the block; if it should be seen inside the block, it will be written (displayed). If you tried the code you would have noticed that the value of hisVar was written (seen inside the block).

Now, inside the block, a new variable, herVar is declared and has a value assigned to it. Outside the block, there is a comment. This comment is actually a statement preceded by the comment denotation, //. Because of this preceding sign, the statement is not executed. If you remove the comment and re-try the code, the following explanation will follow:

The herVar variable is declared inside the block. Now, if it should be seen outside the block, then the last statement (with the comment denotation, removed) would write its value. Remove the // symbol and try the code and note that the last write statement would work, and you would see “her stuff” written (on the same line in the web page)’

So, a variable declared outside the if-block is seen inside the if-block; a variable declared inside the if-block is also seen outside the if-block. Also note that a variable declared outside the if-block is also seen in the if-condition (parentheses).

The for Construct and Variable Scope
The following code has been written similar to the above; the variables and test (write) statements have been written in a similar way.

Read and try the code:

    <script type="text/ECMAScript">

        hisVar = "his stuff";

        for (i=0; i< 3; ++i)
            {
                document.write(hisVar);
                herVar = "her stuff";
            }

        //document.write(herVar);
        //document.write(i);

    </script>

You should have tried the code. Note that the variable declared outside the for-block is seen inside the for-block. In this case the value of the variable is written 3 times (on the same line).

Now remove the comment denotation in the last-but-one line and try the code again; the value of the variable, herVar, is written (still on the same line). This is because a variable declared inside the for-block is seen outside the for-block (and vice-versa).

Remove the comment symbol from the very last line of the above script code. If the variable, i that has been declared in the for-loop parentheses, can be seen outside the for-construct (loop), then the last statement (line) will display it. Try the code (with the last comment symbol removed) and note that the variable is seen outside the for-construct.

Remove the last-but-one comment symbol and try the code again. Now, a variable declared outside the for-block is seen inside the for-block; a variable declared inside the for-block is seen outside the for-block, as demonstrated above. A variable declared outside the for-construct is seen inside the for-loop parentheses; a variable declared inside the for-loop parentheses is seen outside the for-construct (the value of 3 is written above).

This remark is applicable to while-loops as well.

The Function Construct and Variable Scope
The following code has been written similar to the above; the variables and test (write) statements have been written in a similar way.

Read and try the code:

    <script type="text/ECMAScript">

        myVar = "my stuff";
        hisVar = "his stuff";

        function myFn(aVar=myVar)
            {
                document.write(aVar);
                document.write(hisVar);
                herVar = "her stuff";
            }

        myFn();

        //document.write(herVar);

    </script>

You should have tried the code. Note that a variable declared outside the function-block is seen inside the function-block. A variable declared outside the function construct can also be seen inside the function parentheses

Now remove the comment denotation in the last line and try the code again; notice that a variable (herVar) declared inside a function block can be seen outside the function block.

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Broad Network

Related Articles

Global Scope in ECMAScript

Scopes in ECMAScript – Part 1

ECMAScript 6

Introduction

Related Links

Comments