Difference Between var, let, and const in JavaScript

Variables 

Similar to Java, Python, and any other language, JavaScript also possesses variables for declaring and storing values. Variables are the storage elements or containers where you can store any type of data. A value can be assigned to a variable and can be used and reused several times. But before you assign a value to a variable, you must declare it in JavaScript. 

How to declare a variable in JavaScript

In JavaScript, variables are declared with the keyword “var”. We can assign single or multiple variables by using the keyword “var” at a time. 

For example,

var name;
var age;
var rollNo;

This is an example of declaring separate variables using multiple uses of the keyword var. The variables name, age, and rollNo are declared as variables using the keyword var. 

Let us see the use of the “var” keyword where you can use the single-use “var” keyword for declaring multiple variables at a time. 

var name, age, rollNo;

Variable initialization: 

Variable initialization in JavaScript can be done at the time of declaration or any part of the code. 

var name;
name = "John"; 
var age= 20;
var roll;

In JavaScript, the same variable can not be redeclared multiple times. The variables are declared with keywords, “var”, “let”, and “const” for any data type. That means, apart from other programming languages, we don’t need to declare the variable as an int, float, or string, so generally, JavaScript is considered an untyped language. 

[Also Read, JavaScript In Detail]

The naming of variables in JavaScript:

All the variables in JavaScript are given unique names. These unique names are said to be identifiers. The naming of identifiers follows some rules:

  1. Variable names can contain digits, letters, underscores, and dollar symbols. 
  2. Variable names must begin with a letter.
  3. Variable names can also begin with an underscore (‘_’) or dollar symbol (‘$’) but not with the digits. For example, 123SpaceLink is an invalid variable name. But _123SpaceLink or $123SpaceLink is a valid variable name.
  4. In Javascript, all the variables that are defined are considered to be case-sensitive. So the variable names “age” and “Age” are different.
  5. Keywords or reserved words are not used as variable names.
  6. Variable names can be short words or they can be descriptive words. An example of a short name is A, a. An example of a descriptive name is age, name, RollNo, etc. 

Variables Types

Javascript is made up of two major types of variables, namely “local variables” and “global variables”.

Local Variables:

Local variables are the variables that are defined within the functions or blocks. So the scope of these variables is only confined to that particular block. Since the variable scope is block scope, the same name of the variable can be used in different functions.

Global Variables:

Global variables are declared outside functions; that is, they can be used in any function without passing them as function parameters. The scope of the global variables is the global scope and can be used anywhere in the code. So the same name can not be given to the local variables, as it takes global variables’ values by default. 

Problems raised with the use of global variables:

It seems pretty easy to access global variables without actually passing parameters in a function, and this access to the global variables can cause a lot of debugging problems. When one function uses and modifies the global variable value, then the global variable is updated with the new value. As a result, a debugging issue will develop when numerous functions access the same variable while the code is being debugged. Local variables are preferred over global variables because they allow several variables with the same name to be created and accessed in various functions or blocks without causing debugging issues.

[Also Read, JavaScript Coding Interview Questions and Answers]

Let’s get to learn about “var”, “let”, and “const”

Scope and use of the “var” variable:

var name = 'naveen kumar'

Variable naming in JavaScript is done with the addition of the keyword ‘var’. So whenever the variable is declared with the keyword var, it is considered a global variable or a local variable. The variable will be a global variable when it is declared outside the function or block with the keyword “var”. So the scope of this variable is global, which means you can use it anywhere in the program. If the same variable is declared within the function or block, then it is considered a functional variable or local variable, which has local scope. When we declare the global and local variables with the same variable name, then there might be a problem with the use of “var”. The problem with var is that, in some cases, the local variable can be redefined by functions. The value of the variable defined with the keyword “var” will be updated with the corrections made by the previous function when it is used in subsequent functions or globally. In these circumstances, the value of the global variable will also be modified.

Hoisting of the ‘var’ variable:

JavaScript uses a hoisting mechanism while executing the code. The interpreter appears to relocate the declarations of functions, variables, and classes to the top of their scope; this practice is known as “hoisting.”

The hoisting of “var” gives an “undefined” when the variables are initialised at the top of the scope.

console.log(user); // undefined
var user = 'naveen kumar'

scope and use of the “let” variable:

Unlike the keyword “var”, the keyword “let” is block scoped. So the use of “let” is confined to the block itself. So even in the critical cases, the function update or correction of the local variable values won’t affect the global variable value, which is defined under the same variable name. So we can strictly say that “let” is block-scoped, and corrections of local variables won’t affect global variables. The let variables can be updated with new values but can not be redefined within the same scope.

let user = 'naveen kumar'

Hoisting of the “let” variable:

Unlike the hoisting of “var”, “let” hoisting throws a reference error. So when you intend to use the “let” variable even before its declaration, we get a “reference error” because the “let” is not initialised like var. 

console.log(user); // Uncaught ReferenceError: Cannot access 'user' before initialization

let user = 'naveen kumar'

Scope and use of the “const” variable:

Variables that are defined with const have constant values. As a result, these “const” variables cannot be updated or redefined. They have the local scope or block scope when declared in a block.

const user = 'naveen kumar'

Hoisting of the “const” variable:

The “const” is hoisted at the top and not initialised. 

console.log(user); // Uncaught ReferenceError: Cannot access 'user' before initialization

const user = 'naveen kumar'

A short summary

  • Block declarations like “let” and “const” are block-scoped, whereas “var” declarations are global or function-scoped.
  • Within the scope, var variables can be modified and re-declared; “let” variables can be updated but not re-declared, and “const” variables cannot.
  • “var,” “let,” and “const” has been elevated to the top of their respective scopes. “Let” and “const” variables, unlike “var” variables, are not initialised. Undefined values are thrown by “var,” and reference errors are thrown by “let” and “const”.
0 Shares:
You May Also Like