Variable scope. JavaScript code examples

The scope is the part of the program where the variable and constant can act:

Variables and constants in JS. Code example

July 23, 2022

Web5

Global visibility zone

Constants and variables that are called outside the function body will have a global scope:

    var a = 1;//global visibility area
    let b = 2;//global visibility area
    const c = 3;//global visibility area
    function Sum() {

        var d = a + b + c;//local visibility zone, because the change in is called in the function
        return d;
    }
    Sum(); //6

Undeclared variables

You can use undeclared variables to create a global variable in the function body. To create an undeclared variable, you don’t need to use the let, var, const keyword.

Let’s create an undeclared variable:

    function number() {
        num = "5";
    }
    number();
    console.log(num);   //5

Local visibility zone

Curly brackets {} are used to specify the local scope. This block of code may be unnamed, may be named, such as a function, or may represent a conditional or looping construct. For example, defining variables in an unnamed block of code:

    {
        var a = 5;
        let b = 8;
        const c = 9;
    }

However, in this case, the behavior of the variable depends on how it is defined (via var or via let) and on the type of block.

var – defines function-level local variables
let and const – defines block-level local variables

Var

A variable declared with var, unlike let, can be used outside of a block:

    //unnamed block
    {
        var a = 5;
    }
    console.log("a =", a);  // a = 5

    //conditional construct
    if (true) {
        var b = 6;
    }
    console.log("b =", b);  // b = 6

    //loop
    for (var i = 0; i < 5; i++) {
        var c = 7;
    }
    console.log("c =", c);  // c = 7    
</script>

let и conts

In similar situations, the error “// Uncaught ReferenceError: let is not defined” will be issued with var let and conts:

    {
        const b = 5;
        let c = 5
    }
    console.log("b =", b);  // Uncaught ReferenceError: b is not defined
    console.log("c =", c);  // Uncaught ReferenceError: c is not defined

Hiding variables

What if we have two variables – one global and one local – that have the same name:

    var z = 5;
    function print() {

        var z = 10;
        console.log(z); //10
    }
    print(); //10 - the variable allocated in the function itself will be used

Features of the function level var variable:

    function display() {

        var z = 20;//create a variable using the var keyword

        {
            var z = 30; //Does not define a new variable, but changes the value of the function level variable z
            console.log(z);//30
        }
        console.log(z);//30
    }
    displayZ();

Hiding the let variable:

    let z = 10;
    function display() {

        let z = 20;

        {
            let z = 30;
            console.log(z);//30
        }

        console.log(z);//20
    }

    display();
    console.log(z);//10

Strict mode

Defining global variables in functions can lead to potential bugs. To avoid them, strict mode or strict mode:

    "use strict";//set strict mode
    function number() {
        num = "5";     // Uncaught ReferenceError: foo is not defined
    }

    number();
    console.log(num);

In this case, we will get a SyntaxError: Unexpected identifier error, which means that the variable foo is not
defined.

There are two ways to set strict mode:

Add the “use strict” statement to the beginning of the JavaScript code, then strict mode will be applied to all code.

Add the statement “use strict” to the beginning of the body of the function, then strict mode will be applied only to this function.

Function level usage example:

    function number() {

        "use strict";
        num = "5";

    }