Skip to main content

Javascript 101 : var, let and const

Let's understand variable types "var", "let" and "const" in Javascript. 

Basically there are 3 ways to create variables in java script using 3 keywords as follows. 



There differences are as follows, 

01. The "variable01" which was created with "var" keyword, does not have a blocked scope. which means, you have to be careful when using it. A variable declared inside an "if" block can be changed outside the block. 

02. The "variable02" which was created with "let" keyword, has blocked scope. A variable with "let" keyword declared inside an "if" block is not available outside the block.

03. The "variable03" which was created with "const" keyword, is a constant. Which means you have to initialize it once you declare it, and that value cannot be modified later in the programs. There will be an error if you try to do so. 

Now lets explore the above statements with example codes. 

Say that you have declared the variable as follows. 

  • A constant value 
  • A "var" variable called "varValue" declared inside an "if" block. 
  • The "varValue" variable is incremented to 20 using a "for" loop.
  • A "let" variable inside a another "if" block. (nested "if" block). 


Note that you get an error like this if you do not initialize the "const" variable. 

You can print out the "letValue" inside the if block.


But just outside the if block, it gives an error, because "let" variables has blocked scope.



But "var" variables does not have blocked scope. So the variable "varValue" and even the variable "i" inside the for loop, is available outside the "if" block.
  


This does not mean that a "var" variable declared inside a function block is available anywhere. Let's define two functions as follows.


Note that I am trying to print out the "someValue" variable as if it is inside the "varDemo" function, assuming that because the "var" variables does not have a block scope, this will print out fine. But when I call the function, it gives this error.



So please don't confuse yourself! .... The "var" variables has function scope but not blocked scope. 

Finally if you try to change the value of the "cosnt" variable later in the program like this, 

Javascript will give you an error.


Lets hope this is clear enough. Please copy the following code and play around. Use chrome and its development tools to see the errors and "console.log()" values.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <script>

        const constValue = 'constatnt Value' ;

        if(true){
          var varValue = 10 ;

          for (var i = 1; i <= 10; i++) {
            varValue++ ;
          }

          if(varValue == 20){
            let letValue = varValue * 2 ;
            // console.log(letValue);
          }
          // console.log(letValue);
        }

        console.log(varValue); // Print out 20
        console.log(i); // Print out 10
        // varDemo() ;

        constValue = 'Changed Value' ; // Uncaught TypeError: Assignment to constant variable.

        // Conclusion
        // "var" does not have blocked scope. That is why it is available even outside the if block
        // "let" is same as "var, but has blocked scope. It is not available outside the if block
        // "const" is constant with its initial value. You cannot change it's value after initialization

        function varValue(){
          var someValue = 10 ;
        }

        function varDemo(){
          console.log(someValue) ;
        }

    </script>

    <title>Var vs Let vs const</title>
</head>
<body>

</body>
</html>



Comments

Post a Comment

Popular posts from this blog

Javascript 105 : Callbacks

Javascript is asynchronous. That means you cant guarantee that the code you write will always execute sequentially. Take the following code for example, Output When looking at the output, it is understandable that the statements has been executing sequentially.  But if I do a modification to the code like the following, the output will be different.  Output:  Don't worry about the line number 6 yet. the amendment there will just delay the the execution of the statement "console.log('statement 01')" by 100 milliseconds. Now the "statement 01" prints out at the end of the line. The change of the output can be explained as follows. the JS interpreter sees the line 6 (which is the first line of the script), and realize that it has to wait for a 100 milliseconds before executing the statement "console.log('statement 01')", but sees that other four lines has no such delay and can be executed right away. So it goes a...
Post a Comment
Read more

Javascript 102 : Understanding 'this' keyword

The keyword "this" is frequently misunderstood when coding with Javascript. It is because its behavior depends on the execution context. Now what is "execution context"? It is mainly of three types. Global Execution Cotnext (GEC), Functional Execution Cotnext (FEC) and Eval. In GEC, it is the global environment which Javascript  (JS) is running. If you are running the script in a browser and you use the "this" keyword, it will refer to the "Window" object. But if you are using NodeJS and running the script outside a browser the "this" keyword would refer to the "Process". In FEC the "this" keyword would refer to the execution context created by the code inside the function. EVAL is hen you use the "this" keyword inside an "eval" function. If this does not make sense, don't worry because we are going to understand with an example which is always the best way. Make the following HT...
Post a Comment
Read more