var, let and const

var, let and const are keywords used in JavaScript for the declaration of variables.
Now before we take a look at these keywords and what makes each of them unique in JavaScript, we will have to explain two JavaScript concepts which I believe will be necessary in order to follow along with this article. These concepts are:

Variables
Scope

Now we will be looking at these two concepts in more detail;

Variables: A variable is a container used for storing values in JavaScript. This values could be data types such as strings, numbers, arrays, objects etc. When variables are declared they must be assigned a value or the variable will be automatically assigned a value of “undefined”. Take the code as an example below;

var a; // a has been declared with var but no value was assigned to the variable identifier “a”; 
console.log(a);  // this will print a value of undefined to the console
var b = 40; // 40 has been assigned to the variable b
console.log(b); //this will print 40 to the console as 40 has been assigned to the variable b

.
“in the variable above a is called the identifier and = to here is called an assignment operator”.

Scope: This is an area in a JavaScript which a variable can be accessed. We have three types of scope in JavaScript which include:
Block Scope: This is a type of scope in which variables can only be accessed within a block ({}). Here variables declared within this block cannot be accessed from outside the block, even if the block is within a function block scoped variables still have no access to the function.
Function scope: Function scoped variables are accessed from only within a function and can’t be accessed outside the function. They are also known as local scope.
Global scope: Variables that are globally scoped can be accessed from anywhere within a JavaScript code even from within a function or block. Here there is no restriction on where or where not to use a variable as the values in a variable can be accessed from anywhere.
Now that we are done explaining these two concepts let’s move unto the next phase which is explaining what var, let and const are by taking a look at their characteristics under scopes, re-assignment and re-declaration.
```
              var
```
var is the oldest keyword for declaring variables and has been around for as long as JavaScript itself.
Scope
Variables declared with var are function scoped meaning once declared in a function they can be accessed from anywhere within a function and cannot be accessed outside the function.
For example;

function example1 () {
var a = 10
console.log(a); 
}
 example1() // when the function is called here the console will print 10
console.log(a); // the console here will print “a is not defined” as it can’t access the variable (var a) within the function

Because var is function scoped even variables declared with var inside a block within a function can still be accessed by the function outside the block.
For example

function example2 (){ 
{  var b = 12; }
console.log(a);
}
  example2() // the function prints 12 to the console as it can still access the variable (var b) within the block

       Re-declaration and Re-assignment

Variables declared with var can be re-declared and re-assigned in a JavaScript program.
For example in the program below the variable ( var a) is re-declared,

var a = 30; 
var a = 40; // here the variable a is re-declared and assigned a new value of 40
console.log(a); // this will print 40 to the console

Variables declared with var can also be re-assigned “that is to chnge the value of a variable”.

var a = 40;
a =60; // here instead of the variable a been re-declared with the var keyword it is given a new value 
console.log(a) // this will print the new value of 60 to the console

Note: Although var allows re-declaration of variables it is not a good practice

let

let is a keyword for declaring variables in JavaScript, it was introduced in ES6 along with const. Unlike var which is as old as JavaScript itself, let and const were introduced in 2015.
Scope
Variables declared using the let keyword are block scoped, once variables are declared in a block using the let keyword they cannot be accessed outside the block.
For example

{ let a = 10
console.log(a); //the console will print 10
}
console.log(a); // here the console prints “a is not defined”
as it can’t access the variable ( let a) within the block

Even a function can’t access a let variable outside the block but only from within the block

function name () {
{ let a = 40;
console.log(a) // this will print 40 to the console as the function can only access the variable here
};
console.log(a) ;// this will print an error of undefined as the function cannot access the variable here

}

Re-declaration and Re-assignment
Variables declared with let cannot be re-declared,
For example

Let a = 10;
Let a = 20;
Console.log(a); // this is going to give an error (Identifier 'a' has already been declared) to the console

This doesn’t apply if the variables are declared in different scopes.

let a = 10; // at the global scope

console.log(a) //this will print 10 to the console
function name () {
    let a = 20; // at the function scope
    console.log(a) // this prints 20 to the console when the function is called
    {let a = 30; // at the block scope
    console.log(a) // this prints 30 to the console when the function is callled
}

}

name()

Variables declared with let can be re-assigned a value even within the same block and it won’t cause any issues

let a = 10
a = 20
console.log(a) // the new value of 20 assigned to a will print to the console without any issues

                  const

Variables declared with const are a constant reference to a variable.
const was introduced to JavaScript in 2015 along with let, although they are similar in some areas they have differences, we will see what is similar and what is different as we go through its characteristics.

Scope
Since const and let have the same scope (block scope) I don’t think I will need to cover it again in order not to waste much of your time.
Re-declaration and Re-assignment
Variables declared with let are similar to variables declared with const as they don’t allow re-declaration of variables.

const a = 40;
const a = 50;
console.log(a); // this will print (Identifier 'a' has already been declared) to the console

Variables declared with const do not allow re-assignment
For example

const a = 40;
a = 50;
console.log(a) // this will print the error (Assignment to constant variable.) to the console

But this doesn’t mean the values of an array or an object can’t be changed added, deleted or re-assigned when they are assigned to a variable declared with const.

const fruits = ["watermelon", "carrots", "apple", "kiwi"];
console.log(fruits) // here the full fruits array is printed to the console
fruits.pop(); // this removes the last element in the array which is "kiwi" in this case  
console.log(fruits) //here the fruits arrays printed in the console is ["watermelon", "carrots", "apple"]
 fruits.push("banana") // this adds banana to the end of the array so the console prints ["watermelon", "carrots", "apple", "banana"]
 console.log(fruits);
 // the array values can also be re-assigned
 fruits[0] = "tomato" // this replaces "watermelon" with "tomato" in the array
 console.log(fruits); // this prints ['tomato', 'carrots', 'apple', 'banana'] to the console

Object values can be manipulated and added.
For example;

const person = {
    name: "Joe",
    Age: 24
}
console.log(person) // as you can see ( {name: 'Joe', Age: 24} ) is printed to the console
person.height = "6.5ft" // this adds a height property to the person object and assigns a value of 6.5ft to it
console.log(person) // the console now prints ({name: 'Joe', Age: 24, height: '6.5ft'});
person.name = "John" // this takes the name property that is assigned a value of Joe in the person object and re-assigns john to it
console.log(person) // this prints ({name: 'John', Age: 24, height: '6.5ft'}) to the console

Now that we have come to the end of the article I want to advise developers new to JavaScript to avoid the usage of var as it causes many problems while running code, let should be used for values that can change in the program while const should be used when you are very sure that the value of the variable cannot be changed.