ECMAScript6 Tutorial

Introduction of ES6 Features of ECMAScript 6 ECMAScript 6 Syntax Spread Operator in ECMAScript 6 Variables in ECMAScript 6 Decision Making in ECMAScript 6 Function in ECMAScript 6 Generator in ECMAScript 6 Immediately Invoked Function Expression Loops in ECMAScript 6 Loop Control Statement in ECMAScript 6 Operator in ECMAScript 6 Arrow Functions in ECMAScript 6 Array in ECMAScript 6 Array Methods in ES6 Array Destructuring in ES6 Map in ES6 Sets in ES6 Class in ES6 Types of Inheritance in ES6 Object in ES6 Object Destructuring in ES6 Strings in ES6 Template Literals in ES6 Event in ES6 Dialog box in ES6 Cookie in ES6 Number in ES6 Page Redirect in ES6 Boolean in ES6 Validation in ES6 Void Keyword in ES6 Animation in ES6 Promises in ES6

Variables in ES6 | ECMAScript 6
2020-04-17 10:06:25

Variables in ES6 | ECMAScript 6

Variables in ECMAScript 6

A Variable is a place in memory used to store a value. There are some rules for declaration of the variable-

Variable Initialization

Initialization is a process of locating and storing the initial value in the variable. We can assign the value to the variable at its declaration time or before the declaration.

In ECMAScript 6, the var keyword helps usto declare the variable. Here is an example of declaring the variable in ECMAScript 5.

Valid Syntax for Variable Declaration

Here, some examples are given below to show the valid syntax for variable declaration using var keyword-

In ECMAScript 6, we can declare the variables by using the following keywords-

  • The Const
  • The Let

The Const

The const keyword helps us to declare a constant variable. The const keyword is also used as let keyword, but the const keyword builds the blocked-scope variables. The values of the blocked-scope variable cannot be assigned.

There are some points of the Const which are given following-

  • We cannot re-declare the Constant variables.
  •  The Constant variable is immutable.
  • We cannot reassign the value of a constant variable.
  • The Constant variable should only be initialized at the declaration time.

For Example

In the above-given code, a is a constant variable. We assign values (10 and 20) to variable a. An error occurred here because constant variables are immutable; we cannot restore the value in it.

The Let

The let keyword helps us to declare the variables that are declared in the block scope. The Block scope is an area where we declare the let variable.

Difference between let and var keyword

The let and var keywords are used to declare a variable. The main difference between let and var is that the var keyword is a function scoped variable, and the let keyword is a block-scoped variable.

Example

Here, we will discuss an example of a variable declaration using let and var.

By using the let keyword

Output

The output of the above given-example is a syntax error because we cannot reassign the value to the variable ‘a.’

By using the var keyword

The above code is executed, and we got the following output.

Variable Scope in JavaScript

The term scope refers to the visibility of the variable. It means which part of our source code it uses. In other words, the variable scope is the current context of the source code.

There are two types of the variable scope defined in JavaScript.

  • Global Variable
  • Local Variable

Global Variable

If the variable has a global scope, then the developer can easily access the variable from each part of the program. If we declared a variable outside the function, then it becomes a global variable.

For Example

We will understand the global variable with an example given below-

After successful execution of the code, we got the following output-

Output

Local Variable

If the variable has a local scope, then the developer can access it within the specific function where the variable is declared. It means the developer cannot access the local variable from anywhere, like a global variable.

For Example

We will understand the local variable with an example given below-

After execution of the code, we got the following output-

Output

Dynamic Typing in JavaScript

The term 'Dynamic type' can be defined as that language in which the interpreter allot the type to the variable at run time, according to the stored value. The JavaScript provides a dynamic typing feature. It means there is no need to define the type of value stored in a variable.

If the type of the value stored in the variable has been modified during the execution of code, then the dynamic typing starts automatically. Similar to JavaScript, many languages support dynamic typing. For example, Ruby, Pearl, and Python, etc.

Variable hoisting and ECMAScript 6

The term Hoisting can be defined as the default nature of any programming language that is used to shift all types of the declaration to the top of function, script, and scope. The variable hoisting provides us the facility to use the variable before the declaration. JavaScript programming language only supports the hoisting of variable declaration, not variable initialization.

For Example

We will try to understand it better with the help of an example-

The execution of the source code will be successful and does not return the declaration error because of the variable hoisting.

If we want to execute the same code in the compiling phase, then the output will be-

In compiling phase

In the compiling phase, the hoisting feature moves the declared variable at the top of the program.

Output

In Variable Initialization, Hoisting is not supportable 

We can perform variable hoisting only on the declaration of the variable, not on the variable initialization.

Variable initialization before using

In Compiling Phase

Output

We will get the following output after the execution of the code.

Variable initialization after using

In Compiling Phase

Output

We will get the following output after the execution of the code.