Open In App

ES6 | Variables

Improve
Improve
Like Article
Like
Save
Share
Report

A variable is a named container in the memory, that stores the values. In simple words, we can say that a variable is a container for values in Javascript. The ES6 Variable names are called identifiers. 

The rules to keep in mind while naming an identifier. 

  • An identifier can contain alphabets and numbers but cannot be the keyword names
  • It cannot start with a number
  • It cannot contain spaces and special characters, except the underscore (_) and the dollar ($) symbol. 

Variable initialization: It refers to the process of storing a value in the variable. A variable initialization can be done at any time before its use. 

Valid type of Syntax:

var $variable_name1 = value
var variablename1 = value
var nam$e1 = value
var _name$ = value

The below example illustrates the ES6 Variables: 

Example: 

javascript




<!DOCTYPE html>
<html>
 
<head>
    <script>
        var name = "Geeks" // type string(Dynamic Typing)
        console.log("The variable is : " + name);
        console.log("<br>Variable Type : " + typeof(name))
    </script>
</head>
</html>


Output:

The variable is : Geeks
Variable Type : string

Dynamic Typing: JavaScript supports Dynamic Typing similar to Python, Ruby, Perl, etc. It is a feature where you don’t have to tell JavaScript what type of value the variable holds. It gets triggered and takes care of the variable automatically even if the variable value type gets changed while execution. 

Variable Scope in JavaScript ES6:

  • Global Scope: A variable that can be accessed from any part of the JavaScript code.
  • Local Scope: A variable that can be accessed within a function where it is declared.

Example: This example illustrates the Global and Local Scope: 

javascript




<!DOCTYPE html>
<html>
 
<head>
    <script>
        var $variable_name12 = 10
        // Global variable can be accessed
        // from anywhere
        function Geeks() {
 
            // This local variable gets its
            // own memory allocation even
            // though it contains the same
            // as the outer.
            var $variable_name12 = 100
            console.log("<br>Inside Geeks() = "
                       + $variable_name12)
        }
        console.log("Outside Geeks() = "
                       + $variable_name12)
        Geeks();
    </script>
</head>
</html>


Output:

Outside Geeks() = 10
Inside Geeks() = 100

The let and const:

  • const: The const declaration creates a read-only reference to a value. 

Example:

const pi = 3.14
pi = 4.15 // will result in an error!!

In the above, later on, in the code if we try to change the pi value it simply throws an error. Mainly used for mathematical constants. Constants variables are immutable.

  • let: This keyword allows the script to restrict access to the variable to the nearest enclosing block. Any variable declared using the let keyword is assigned the block scope. Block scope is a section where the let variable gets a declaration whether it is a block{}, a function{}, or global (script), that section gets restricted to access. 

Example:

let n = 100; 
let n = 300; 
console.log(n);// Throw an error: Identifier 'n' has already been declared

ES6 and Variable Hoisting: Hoisting allows, the use of the variables before their declaration. The concept of hoisting applies to the variable declaration but not variable initialization.

Example: 

javascript




<!DOCTYPE html>
<html>
 
<head>
    <script>
     
        // n gets hoisted to the global scope
        n = "Geeks";
         
        function geeks() {
 
            // x gets hoisted to the function scope.
            for (var x = 0; x < 5; x++) {
                document.write("<br>" + x);
            }
            console.log("<br>Hoisted variable(in function)"
                    + " type x : " + typeof(x));
            console.log("<br>Hoisted variable(globally)"
                    + " type n : " + typeof(n));
        }
 
        // Results undefined
        console.log("Hoisted variable(out function)"
                    + " type x : " + typeof(x));
        console.log("<br>Hoisted variable(globally)"
                    + " type n : " + typeof(n));
        geeks();
    </script>
</head>
</html>


Output:

Hoisted variable(out function) type x : undefined
Hoisted variable(globally) type n : string
0
1
2
3
4
Hoisted variable(in function) type x : number
Hoisted variable(globally) type n : string

Note: It is recommended to always declare variables at the top of their scope, to enable the code to resolve the variable’s scope.



Last Updated : 13 Apr, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads