In JavaScript, variables can be declared using three different methods: var, let, and const. In this web development tutorial, we are going to discuss the differences between these three methods of creating variables.
Variable declaration in JavaScript
In the early days of JavaScript, there was only one way to declare variables and that was to use the var keyword. However, there were some problems with variables declared with the var keyword that required new methods for the variable declaration. With the introduction of ES6, developers can define variables according to their specific needs thanks to two new keywords: let and const.
All three of these three keywords have similarities in their syntax for declaring variables. However, they differ in their use and scope, as described in the next section.
Read: Common Causes of JavaScript Errors and How to Avoid Them
var, let and const variable declaration in JavaScript
The differences between the var, let, and const variable declaration in JavaScript include:
Variables declared with var and const are restricted to the immediate function body.
Variables declared with the keyword var are highlighted. Hoisting means that the variable can be accessed in its enclosing scope even before it is declared.
Variables declared with the let keyword have a block scope, which means that the variables have a scope for the immediately enclosing block.
Now let’s discuss in detail how these keywords can make a developer’s code more efficient, and how each keyword is used to declare variables in JavaScript programs.
How to use the var keyword in JavaScript
The var keyword has the traditional syntax for declaring variables. It is optional to initialize a variable with a value if it was declared with the keyword var. If developers don’t initialize it with a value, JavaScript automatically assigns it undefined, as shown in the following code snippet:
var i; // i is ‘undefined’ var j = ‘JavaScript’; // initialized with string
var is function-related
Variables declared with the var keyword have a functional area. Functional scope here means that they can only be accessed within the function in which they are declared, as shown in the following JavaScript code example:
Function func () {var x = 5; if (1) {var y = 10; Console.log (x); // output 5 console.log (y); // output 10}} func (); Console.log (x); //not defined. Not available outside of the console.log (y) function; //not defined. External function not available
Pulling up var in JavaScript
Variables declared with the var keyword are subject to pulling up. If we declare a variable at the end of the function (but don’t initialize it), the JavaScript runtime moves it to the beginning of its scope and therefore there is no runtime complaint if we declare that we use that variable before we use it.
Problems with var for variable declaration
One of the problems is that the variables declared with the var keyword can be re-declared or updated in the same scope. This could create a serious problem if we declare another variable with the same name in the same scope; the new value replaces the old one. See the following code snippet for an illustration:
var color = “red”; var color = “green”; console.log (“color”); // output green var color = ”Blue”; Console.log (color); // output blue
Another problem with the var keyword is that if you declare a variable without the var keyword, that variable has global scope. For a better understanding, consider the following code:
for (x = 0; x
Read: Rounds in JavaScript
The let keyword in JavaScript
let is the improved version of var. let eliminates all of the problems with var that we talked about in the previous section. let has a syntax similar to var, but has a stricter scope.
let is block scoped
The let keyword should be used in situations where you want to declare a variable that should be restricted to the block in which it is restricted. In addition, variables declared with the let keyword cannot be updated or redeclared. Here is an example of using let to declare variables in JavaScript:
Function func () {let x = 10; if (x === 10) {let y = 20; Console.log (x); // output 10 console.log (y); // output 20} console.log (x); // output 10 console.log (y); // ‘undefined’} func ();
Note that the variable y declared with the let keyword is not accessible beyond the if block in which it is declared. If we had declared it with the var keyword, it would have been available because var has global scope within a function. The following code snippet will help you understand this train of thought better:
Function func () {console.log (x); // output ‘undefined’ console.log (y); // Error – “Uncaught ReferenceError: y is not defined” var x = 10; let y = 20; } func ();
Another thing to consider is that let cannot be used before it’s declared. If you do this, it will result in a ReferenceError.
Lifting let
Variables declared with the let keyword are not subject to pulling up. This means that you can only use a variable once it has been declared and initialized.
Read: How to optimize the performance of your website
The const keyword in JavaScript
The const keyword follows the same rules as the let keyword. The only difference to const is that const is used to define only constant values in JavaScript programs.
const myVar = 1000; myVar = 2.5; // Uncaught TypeError: assignment to constant variable.
const declarations are block scoped
The scope principles of const are the same as those of the let keyword. Like let, the variables declared with the const keyword have limited the scope to the block in which they are declared.
Some important notes for const are:
const declares a variable with a constant value.
Use the const keyword when the variable you are declaring is not allowed to be reassigned in the future.
