ES6 | Variables

The ES6 Variable names are called identifiers. The rules to keep in mind while naming an identifier. It can contain alphabets and numbers but cannot be the keyword names, cannot start with a number and 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

Below example illustrates the ES6 Variables:

Example:



filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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 illustrate the Global and Local Scope:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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
                document.write("<br>Inside Geeks() = "
                           + $variable_name12)
            }
            document.write("Outside Geeks() = " 
                           + $variable_name12)
            Geeks();
        </script>
    </head>
      
    </html>

    chevron_right

    
    

    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 variable 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 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, using the variables before its declaration. The concept of hoisting applies to variable declaration but not variable initialization.

  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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);
                }
                document.write("<br>Hoisted variable(in function)"
                        + " type x : " + typeof(x));
                document.write("<br>Hoisted variable(globally)"
                        + " type n : " + typeof(n));
            }
      
            // Results undefined
            document.write("Hoisted variable(out function)"
                        + " type x : " + typeof(x));
            document.write("<br>Hoisted variable(globally)"
                        + " type n : " + typeof(n));
            geeks();
        </script>
    </head>
      
    </html>    

    chevron_right

    
    

  • 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 resolve the variable’s scope.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.