Var Vs Let Javascript
cos |
JavaScript |
sep |
sin
Michael Zippo
04.11.2021
New features have been added to the JavaScript language with the release of ECMAScript6 (ES6). One of these characteristics affects the way we declare variables. With the addition of let and const, there were all kinds of questions about when to use each of the variable declarations.
In this article, we talk about each of the options, regarding their definition and use in the JavaScript environment.
Pre-ES6: Var
Prior to the release of ES6, the keyword used for variables was declaration of var .
Variables can also be redeclared and updated without errors
The first problem with var is obvious: redeclarations can cause bugs in your code if a variable has already been given the same name. There can be unintended consequences if something is declared again and you did not realize that the variable name has already been used in the codebase. Along with this, other peculiarities also arise regarding the scope and lifting.
Scope
The scope tells us what variables are available for us to use - we have variables that can be globally or locally scoped. What if we have the same variable declaration, but is global and the other is local?
When our var is declared outside the function, it is globally available to us globally. When "hello" is declared in the function, it is available only for the function - with functional or local scope
When we have a variable declaration which is the same, but the scope is different, the var in the function does not change the assignment of the global var, even with the invocation of helloWorld () . Since the var is declared in the function with the name "hello", it does not appear to be within the global reach of the alternate definition.
Hoist
When a variable is hoisted in JavaScript, the declaration of functions and variables is moved to the start of their scope before code execution. The variable is declared but not initialized, so the initial value of the variable is undefined.
Here, "hello" is hoisted and declared at the top of your reach. So basically the computer interprets the code like this:
The JavaScript engine sees that hello exists but does not know how hello is defined until the next step.
Eventually the developers who helped create the ECMAScript standard realized that there were some minor issues with var that could cost them time and money. So they decided to create more stringent keywords. This led to the creation of "leave" and "cost" in ES6
ES6:. Let
The let keyword is very similar to the var keyword in many ways. The main differences are the way errors are returned and the scope of each keyword is defined.
Variables declared and initialized with let keyword can be reassigned, but they cannot be redeclared
When you run the above code in a JavaScript console, the last line returns an error:
SyntaxError: The identifier ’hello’ has already been declared
Unlike var, declaring variables using let will not allow a declaration to the same. Variable name. You can, however, reassign if you wish, as shown in the example above.
Scope
Champ-wise, let is very similar to var. In addition to the rules that the global or local scope gives us, there is an additional constraint with let. Variables declared in a code block are only available for that code block. This is similar to functional scope, as functions are blocks of code that can be carried even further by having separate blocks within that function.
There are no errors in this code because the two instances of hello are treated as separate variables because they have different scopes.
Hoisting
Hoisting is another area where the let and var declarations are similar. "Var", when raised, is initialized as undefined. However, "leave" generates a reference error if you try to use it before it is initialized.
Note that the let keyword is the best choice in terms of syntax. This is because errors are generated when you can try to redeclare a variable or use it before the initialization process.
ES6: Const
The const keyword has more stringent guide lines than the let keyword < / em>. With const, variables cannot be declared or reassigned. A TypeError is generated if you try to reassign to a const.
That said, when working with objects or arrays, the properties of the object or array may be updated. As long as the basic structure of the object or table does not change, you can always update it.
As the example shows, reassigning the task to a new set of properties results in a TypeError: Assignment to constant variable. error. Const cannot be reassigned or redeclared, except in cases where you update the unique property in an object
