Introduce
Javascript 2015 (ES6) comes with a lot of features to help us write code in a cleaner, cleaner, and easier to read way. Some typical functions such as let , const , arrow function , promises , … In this article we will learn about let and const serve in declaring data in JS. Difference of let , const and var .
Difference
Hoisting
First we will find out what hoisting is before distinguishing let , const and var . To explain in an easy way, hoisting is the move of declarations to the top to execute JS code. So how are let , const , var hoisting? Consider the following example:
1 2 3 4 5 6 7 8 9 10 | // index.js console.log(foo); console.log(bar); console.log(mickey); var foo = 'Hi'; let bar = 'Hello'; const mickey = 'kimsohyun'; |
In the index.js file we proceed to log the value of the variable foo, bar, mickey before they are declared. When we run the index.js file, we will get the following result.
On the first run after compiled we see an undefined terminal and a ReferenceError: bar is not defined error. After that, I delete the line console.log(bar) to run again, and the terminal continues to print undefined and the core ReferenceError: mickey is not defined . Through the example we can easily see that var has hoisting , let , const has no hoisting , but the truth is not. All declarations (function, let, const, var) in Javascript are hoisted . The difference is that var when hoisting is initialized as undefined and const and let are not.
We have after hoisting the var will look like this.
1 2 3 4 5 6 | var foo; console.log(foo); foo = 'Hi'; |
Scope
Scope is simply the scope of use of a variable. Consider the following example:
1 2 3 4 5 6 7 8 9 10 11 12 | if (true) { var foo = "foo!"; } console.log(foo); (function() { var bar = "bar!"; })(); console.log(bar); |
The output will look like this:
As we can see when compiled , the foo variable is declared in if and the bar variable is included in a function. We have the result to print the variable foo but to the bar returns a ReferenceError . Thus, the variable var when declared in the if clause (block scope) will have a global scope, so we can access that variable outside of the if clause, but when used in the function (function), there will be a scope. function sopce/local scope so when accessing that variable outside will error we can only access that variable in that scope . Variable let , const when doing the same as the other example, we have results in both cases with errors. Thus, we continue to conclude that the let variable, const will be the block scope when we conduct acess on the variable outside the scope, it will not be used.
1 2 3 4 5 6 7 8 | if (true) { let foo = "foo!"; if (true) { let foo = "foo! scoped"; console.log(foo); } } |
Output:
1 2 | foo! scoped |
When the variable is declared in a different scope , it is possible to have the same name when using it, giving priority to the variable in the closest scope . Above we can do the same with const .
Assignment
We consider an example
1 2 3 4 5 6 7 8 | var foo = 'Hi'; let bar = 'Hello'; const mickey = 'kimsohyun'; var foo = 'Hi 2'; let bar = 'Hello 2'; const mickey = 'kimsohyun 2'; |
Output:
Through the above example, we can see that var can be re-declared, but for let and const we cannot re-declare.
Considering the example:
1 2 3 4 | var foo; let bar; console.log(foo, bar); |
Output:
1 2 | undefined undefined |
We see that for var , let we can perform the declaration without assigning a value. But what if we declare the variable const without assigning a value to it? After testing, we have the results it will report an error SyntaxError: Missing initializer in const declaration => When declaring with const we must assign a value to it.
In addition, when considering the variable const we can understand it as a constant. So when we intentionally change the bién declared with the keyword const , we will get an error TypeError: Assigment to constant varibale . We cannot use the assignment operator ( = ) to the second time with the const variable, and for let and var we can freely use it. You can check with the example below by changing const -> var or let
1 2 3 4 5 6 | const foo = 123; foo = 321; console.log(foo); |
There is a case where people often make the following mistakes on const :
1 2 3 4 5 6 7 | const obj = { name: 'foo' }; obj.name = 'bar'; console.log(obj.name); |
When running the code, we can see the log output to the word bar, but many people often mistake it as an error because of the 2nd assignment to the variable const . We cannot use the second assignment operator with the variable const here we reassign only one property of obj , we do not reassign obj .
summary
After looking at the examples, we will summarize the differences of the three variables let, const, var a bit as follows:
To understand it more carefully, you should carefully study the examples that you give to better understand let, const, var . This is the first article in the series to learn about ECMAScript – ES6, I hope you will support.