Modern JavaScript for React: Variables and Block Scope – Part 1

React Developers love JavaScript. If you want to be an expert React Developer than you need to have good knowledge of Modern JavaScript. ECMAScript is an official specification for JavaScript. It is improved lot in the past several years.

ECMA TC39 is an official community for ECMAScript which makes yearly releases and modern browsers followed that shortly. This has started with ECMAScript 2015 or ES6, since then we have yearly releases with ES + Current year. Some of them are big changes and some of them are small.

JavaScript language now has continuous updates and phases out the problems it had over the years.

React uses modern JavaScript and React Developers need to have some basic knowledge of Modern Javascript’s main features. So in the Modern javascript tutorial, we will look at some Javascript features which every React developer should know.

Let’s start with Part 1 of this Modern Javascript Tutorial.

Variables and Block Scope

Block scope and variable declaration is an important part of modern JavaScript. This is how we define block scope in JavaScript. See below snap.

  
 {
    //Block Scope
 }
  
 

Below is Block scope for if condition.

   
  if(true)
  {
        //Block Scope
  }
 

Let’s see a Function scope. It is a bit different from Block scope.

 
  function Add(a, b)
  {
      //Function Scope
      var result = a + b;
  }
 

The difference is, in the above example, result variable you can’t access outside function block.

But, if you define this variable result inside Block scope than you can access it outside that Block scope. For example, if block or for block or blank blocks.

This is a bit a problem in old JavaScript and it has been resolved in modern JavaScript by using let keyword. Let’s see by an example.

Example of var keyword

 
  if (true)
  {
      //Block Scope
      var result = 10 + 2;
  }

  var display = result;
 

In the above code, you can see that result variable is accessible outside if Block scope. This code will not throw an error.

Example of let keyword

   
  if (true)
  {
      //Block Scope
      let result = 10 + 2;
  }
  
  var display = result;
  

In the above code, you can see that result type is let. We are trying to use result outside if Block Scope. This code will throw below error.

Nested Block Scope

Block can be nested also. With each nested scope variables can be protected as long as you are using let keyword. Below is the Example of nested Block scope.

  
{
    //Block Scope
    {
         //Nested Block Scope
    }
}
 
 

Use of Const keyword

When you have fixed reference or value use Const keyword to store it. In the case of reference like object or array, Const guaranty that referenced object doesn’t change but that doesn’t mean values inside object or array can’t be changed. Object or Array is still mutable if you even use Const.

 
 const result = "Tutorial Funda";
 

If variable defined with Const is a scalar value like string or integer than they are immutable. They cannot be changed. Const guaranty that scalar values don’t change. In the above example, you cannot change the value of result variable.

When to Use let and const

Variables defined with const are much better than let for scalar values. Because const can guaranty that values would not accidentally be changed.

Use let when you need scalar value which keeps changing like integer count.

We hope, you understand the use of Scope and Variables in modern JavaScript. In the next part, we will look at Arrow Functions in JavaScript.