DEV Community

Runo-saduwa
Runo-saduwa

Posted on

let, const & Block scoping

#javascript #es6

What is block scoping?!

Quite simply, this means a new scope is created between a pair of {}. Unlike the var keyword, the variables declared with let and const can only exist within the innermost block that surrounds them.

In the following example, what do you think will be printed to the console when the code is executed.

    let name = 'Runo';
    {
     let name = 'Tega';
    }
   console.log(name)
Enter fullscreen mode Exit fullscreen mode

The value Runo is printed to the console because the second variable name is not visible outside the block, it simply doesn't exist outside the block.

let & const: Similarities

In this section, we'll look at the similarities between the let and const keywords in different use cases:

Block Scoping

We know that the var keyword is bound to function scope, whereas let and const are
block scoped which means that if you have a set of curly braces {} you have a block scope.

One declaration per scope

This means that let and const can be used to declare a particular variable only once within its scope, lets see an example to level our understanding:

    let name = "Runo";
    let name = "Tega";
    console.log(name); //error
Enter fullscreen mode Exit fullscreen mode

Same goes for const

   const name = "Runo";
   const name = "Tega";
   console.log(name); //error
Enter fullscreen mode Exit fullscreen mode

Note: the var keyword acts differently, it allows a variable to be declared twice and then it takes the value of the most recent declaration, see the code snippet below:

   var name = "Runo";
   var name = "Tega";
   console.log(name) // Tega
Enter fullscreen mode Exit fullscreen mode

Let & const: Differences

In this section we'll look at the differences between let and const and when to use them.

Variable initialization

const variables must be initialized with a value, but let variables don't always require an intialization variable.


  const a; //Syntax error

  let a;
Enter fullscreen mode Exit fullscreen mode

Variable reassignment

let variables can be reassigned to another value, whereas const variables cannot. See the following:

   let name = "Runo";
       name = "Tega";
       console.log(name) // Tega
Enter fullscreen mode Exit fullscreen mode

const variables cannot be reassigned, see below:

      const pi = 3.142;
            pi = 3.14; //uncaught typeError
Enter fullscreen mode Exit fullscreen mode

const should be used to hold variables whose values remain constant throughout the program. It can be used to create variables that hold references to the DOM.

Summary

The const and let keywords support block scoping (lexical binding) and the const key word is used to declare variables with constant values, whereas the let keyword is used to declare variables whose values can change in the course of programming. The let keyword is a good replacement for legacy ES5 var keyword.

Top comments (0)