THE VAR, LET & CONST KEYWORDS (Definitions, differences & when to use them)

INTRODUCTION

When you first start using JavaScript, you could hear the following things about these keywords:

📌 Create variables that can have their values changed by using var and let.

📌 Const makes "constant" variables, which cannot have their values changed.

Its quite difficult to know the difference and particular when to actually use these keywords when you are new to programming or learning JavaScript. We are going to break this down simply for you to understand.

First of all we have to ask ourselves what they mean separately;

📌 VAR:

In JavaScript, the var is used to store data and can accept any type of value, such as an integer, float, or string. When the var is generated, we refer to it as a variable declaration.

Once the declaration is made, the value saved in var is empty. In JavaScript, storing any value in var is referred to as initialising the value for var.

Var in JavaScript has a syntax similar to this.

var name = value


📌 The "=" sign is used to designate values.

📌 name = The variable's given name.

📌 value is the name given to the variable, which can have any value.

NOTE: Var has no Block scope.

The var has a global scope, thus even if it is defined inside a block, it may still be accessed from outside the block.

Lets take an example;

//if a condition is accurate
if (true) {
  //Declare a variable a that stores an integer
  var a = 10
}
//let us access the value of an in the console
console.log(a) //10

The output for this would be "10".

Because the value of var may be obtained outside of the block, the outcome is precise. In JavaScript, the var is globally scoped.

📌LET:

With the release of ES6, the let keyword for Javascript was introduced. The let keyword is also used for variable definition, just like var in Javascript.

The variable declared with the "let" keyword is a local, block-scoped variable, and that is the only distinction. Let declarations make variables out of scope outside of the block in which they are made.

For example;

{
    let num=10;
    // calling the function inside block
    console.log(num)
}
// calling the function outside block throws a Error
console.log(num)

Output;

10
Uncaught ReferenceError: num is not defined

The num variable in this instance is block scoped, which means that it is not accessible from outside the block. A reference error is thrown if we attempt to access the variable outside of the block.

📌CONST

The const keyword was added in ES6 and is used in JavaScript to define a new variable. Typically, a JavaScript variable is declared using the var keyword. Const is a different keyword you can use to declare a variable if you don't want to change its value during the entire programme.

For example;

<script>  
     const x = 16;  
     document.write("The value of const variable x = " + x);  
</script> 

Output;
The value of const variable x = 16

The characteristics of a const variable are as follows:

✔ Const variables cannot have their values modified or assigned to new variables.

✔ Const variables must be initialised with the variable name at the time of declaration, for example, const x=6.

✔ You cannot assign a value to a const variable after it has been declared.

✔ The const variable's value cannot be altered.

✔ The block scope of the const variable. As a result, a const variable can have a different value in a separate block while yet being assigned the same name inside the same programme.

✔ A variable defined or initialised using the var keyword cannot be reassigned using the const keyword because a const variable cannot be hoisted.

DIFFERENCE BETWEEN THE VAR, CONST AND LET KEYWORDS IN JAVASCRIPT

✔ While let and const are block scoped, var declarations are either globally scoped or function scoped.

✔ Let variables can be updated but not re-declared, const variables cannot be updated or re-declared, and var variables can both be updated and re-declared inside their scope.

✔ Each of them is raised to the very peak of their scope. However, let and const variables are not initialised, whereas var variables are initialised with undefined.

✔ Contrary to const, which needs to be initialised upon declaration, var and let can be declared without being initialised.

WHEN TO USE THEM

Const declarations for variables are best practise; if you later realise that the value of the variable needs to change, go back and update it to let.

When a variable's value is anticipated to change, use let.
For every other variable, use const.
Never use var.

I hope this better helps you to understand the differences and uses of var, const and let keywords in JavaScript. Happy coding! And thanks for reading :).