DEV Community

hrishikesh1990
hrishikesh1990

Posted on • Originally published at flexiple.com

JavaScript Let - How to declare block-scoped values?

In this short tutorial, we look at how to declare block-scoped values using JavaScript let. We also look at how the let keyword is different from the others.

This tutorial is a part of our initiative at Flexiple, to write short curated tutorials around often used or interesting concepts.

Table of Contents - JavaScript startsWith():

JavaScript let:

Until ES5, JavaScript variables had either global or local scope. Only after ES6 was block scope introduced in JavaScript. Scope denotes which variables we have access to in our program.

You may have come across functional scope variables, these variables are only accessible inside a function. You could receive an error in case you tried to print it outside the function. Apart from these, there are global variables. These variables can be accessed anywhere in the program and are declared using the var keyword.

Similarly, variables that are block-scoped are only accessible inside a particular block of code. These variables are declared using JavaScript let and these blocks are enclosed within { } brackets.

Code and Explanation:

Let us look at a code snippet explaining the same.

var num = 1;
console.log(num);
// Output: 1

{
  let num = 2;

  console.log(num);
  // Output: 2
}

console.log(num);
// Output: 1
Enter fullscreen mode Exit fullscreen mode

In the code snippet, we initially declared a variable ‘num’ using the var keyword. We printed the value and the output was 1
We printed the value and the output was 1
We later open a block and use the let keyword to declare the value as 2. Now the value of ‘num’ inside the block is 2
Lastly, we print the variable after the block is closed, here the variable takes the values set using the var keyword
The above steps are an example of how the let method can be used.

Redeclaring variables:

While using the JavaScript let, the variable cannot be redeclared within the same block. Attempting to do so would raise an error as shown below:

{
  let num = 2;
  let num = 4; //Error: Identifier 'num' has already been declared
}
Enter fullscreen mode Exit fullscreen mode

This is a common problem while using a switch case, this can be solved by using new blocks for each case. However, this is not a problem while using the var keyword. The below code snippet should give an idea of the case:

{
  let num = 2; 
  console.log(num) // 2
}
{
  let num = 4; 
  console.log(num)// 4
}
Enter fullscreen mode Exit fullscreen mode

As aforementioned, a similar syntax can be used while using the let method in switch cases as the variable has to be redeclared.

Closing thoughts:

In this article, although we discuss in detail about the JavaScript let methods we have not explained in detail about scope. I would recommend you spend some quality reading about the various types of scopes and their uses.

Discussion (0)