Effect of let in ECMAScript Scope

Scopes in ECMAScript – Part 3

ECMAScript 6

Foreword: In this part of the series I talk about the effect of let in ECMAScript Scope.

By: Chrysanthus Date Published: 15 Jul 2016

Introduction

This is part 3 of my series, Scopes in ECMAScript. In this part of the series I talk about the effect of let in ECMAScript Scope. 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.

Most of the variables in this part of the series are declared with let. The let statement declares a block scope local variable, optionally initializing it to a value. Much of this tutorial explains that.

let

The if Construct and Variable Scope
Read and try the following code:

    <script type="text/ECMAScript">

        let hisVar = "his stuff";

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

        //document.write(herVar);

    </script>

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 not work, and you would not see “her stuff” written (on the same line in the web page)’

So, a variable declared by let outside the if-block is seen inside the if-block; a variable declared by let inside the if-block is not seen outside the if-block. Also note that a variable declared by let outside the if-block is 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">

        let hisVar = "his stuff";

        for (let i=0; i< 3; ++i)
            {
                document.write(hisVar);
                let 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 with let 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 CANNOT be 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 with let, CANNOT be 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 CANNOT be seen outside the for-construct (the value of 3 is not 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">

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

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

        myFn();

        //document.write(herVar);

    </script>

Try the code and notice that it does not even work. This is because a variable cannot be declared with let in the parentheses of a function. Remove the let from the parameter list and try again.

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. Now note that a variable (herVar) declared inside a function block with let CANNOT be seen outside the function block.

Remark: Variables declared by let have as their scope the block in which they are defined, as well as in any contained sub-blocks. In this way, let works very much like var. The main difference is that the scope of a var variable is the entire enclosing function. That is, a variable declared by let inside any block, cannot be seen outside the block, while a variable declared by var inside a function block only, cannot be seen outside the function block,

Also know that a let variable inside a block overrides the same let variable outside the block.

const

An example of a const (constant) declaration is:

        const pi = 3.14;

A const declaration must have initialization. The const declaration creates a read-only reference to a value. It does not mean the value it holds is immutable, just that the variable identifier cannot be reassigned. The value of a constant cannot change through re-assignment, and it cannot be redeclared.

Constants are block-scoped, like variables defined using the let statement. A constant cannot share its name with a function or a variable in the same scope.

That is it for this part of the series.

Chrys

Broad Network

Related Articles

Effect of let in ECMAScript Scope

Scopes in ECMAScript – Part 3

ECMAScript 6

Introduction

Related Links

Comments