Use of Var, Let and Const Statements in JavaScript.

Need help determining which variable declaration to use while developing your billion-dollar project? Well, thank the god of the algorithm for bringing you here. This article aims to clear your doubts and educate you on the differences in which of the three different variable declarations in JavaScript you should use. Are you ready?!

Heads Up!: This article is mainly for JavaScript developers, beginners and pros alike. However, anyone can read it but to be on the safe side and so you don’t get confused, I suggest you research more materials on JavaScript. I’ll post links where you can find these resources at the bottom of the page. You’re welcome!😊

What are Variable Declarations Anyway?

Variable declarations are a very important part of JavaScript. It is JavaScript’s way of identifying a value. Just like humans identify a person by the name given to them, in JavaScript, we assign names to values using variable names for easy identification and usage.

This value could be a string, an integer, a boolean value etc. Also, a variable can be compared to a container; it stores data in it.

Here is an example of a variable declaration using the const statement.

const name = "string";
console.log (name);
//Output will be String.

Var, Let and Const Statements.

Now that we know what variable declarations are, let us talk about the let, var and const statements.

• The Var Statement.

The var variable declaration method was the original way of declaring a variable that is in the ES5 (ECMAScript 5 same thing as JavaScript) and previous versions.

The var statement can be global-scoped. That is, it can be used and accessed from anywhere in the code as it was declared outside a function or it can be function-scoped i.e. used within a function.

//Var statement within a function
function aboutMe() {
 var name = ‘John’;
console.log (name);
}

//Var statement outside a function
var number = 9;
console.log (number);

Another thing about the var statement is that it isn’t block-scoped. This can be an advantage and at the same time be a disadvantage because it can create unnecessary bugs. This is a result of a JavaScript feature called Hoisting.

Only the var statement allows variables declared with it to be hoisted.

Hoisting is simply using a variable before declaring it. Here’s an example to explain:

console.log (name);
var name = ‘John’;

//Javascript interpretes the above code as
var name; //Labels this as undefined
console.log (name); 
name = ‘John’;

Variables declared using the var statement can be re-declared and updated.

//Example of a variable being re-declared.
var name = ‘James’;
var name = ‘John’;
console.log (name); // Output will be John

//Example of a variable being updated.
var number = 9;
number = 11;
console.log (number); //Output wil be 11.

• Let Statement

Before the ES6, var was the only method of variable declaration. But by 2015, JavaScript developers came up with two new methods of declaring variables. The let statement is one of the two new methods of variable declaration.

The let variable declaration method is block-scoped. I.e. whatever value is assigned to a variable name within these ‘{}’ only executes and runs within it.

In the let statement, whatever is assigned within the blocks stays within the blocks and whatever is assigned outside the blocks can be used globally (throughout the code).

Here’s an example to explain this:

function number() {
  let x = 9; 
  console.log (x); 
 }

console.log (x); 
/* This will throw in an error message 
that x isn’t defined. */

Also, the let statement allows you to declare a variable, leave it undefined and then later assign a value to it.

let name = ‘John’;
let age; //Javascript assigns it the value undefined because its an empty variable.
console.log (name);
age = 9;

Although you cannot re-declare a variable using the let statement, you can update a variable.

//Re-declaring variables declared with let statements.
let name = ‘John’;
let name = ‘Mary’; 
console.log (name); //This will throw in an error that name has already been declared

//Updating variables declared with let statements.
let number = 4;
number = 9;
console.log (number); // This will log 9 in the console

• Const Statement

From its name, you might have an idea of what it’s all about. Values declared using the const statement within a block DON’T CHANGE and CAN’T BE RE-DECLARED or UPDATED. Why? The reason is quite simple. It’s a constant.

The Developers that designed the ES6(JavaScript) thought it wise to improve on the var feature of JavaScript and they blessed us with the let and const feature.

The const statement helps us ensure that we have bug-free code as it is very strict.

I would recommend using const to assign variables rather than let with the exception that you want to update that variable later on. Otherwise, it is advisable to use the const variable declaration method.

const number = 9; 
const number = 8; 
console.log (number); 
/* This will throw in an error because the variable name 'number' has already 
been assigned a value of 8*/

Unlike var which lets you re-declare a variable within the same scope, let and const don’t permit that. So something like this won’t display an error because the same variable name was assigned to different values in different scopes.

//Block scope

{
const number = 9;
let name = ‘John’ ;
}

//Global scope
const number = 4;
let name = ‘James’;
console.log (number, name);

In contrast, this will throw in an error:

{
const name = ‘John’;
let number = 4;

const name = ‘James’;
let number = 9;
console.log (name, number); 
}

There is an exception to const not allowing variables declared with it to be changed and this exception is only applicable in the case of objects and arrays.

Objects and arrays that have been assigned to a given variable using the const statement are mutable and it is only on this basis that variables declared with const can be changed.

Let's see an example that explains the mutability of objects declared with the const statement:

// Declare a const object
const myObject = { key: 'String' };

//Changing the content of the object
myObject.key = 'new string';
console.log(myObject); // Output: { key: 'new string' }

Arrays declared with const can be modified using the JavaScript Array push method. The following example explains the mutability of arrays declared with the const statement.

//Declare a const array
const array = [2, 4, 6];
//Updating/modifying the value of the array
array.push(8);
console.log (array); //Output will be [2, 4, 6, 8]

In summary,

• let and const are block-scoped, while var is either global-scoped or function-scoped.

• Only var allows hoisting, let and const don’t allow hoisting.

• Variables can be re-declared and updated using var, updated but not re-declared using let and can be re-declared and only updated in const in the case of objects and arrays.

As promised, here are some more links for additional information:

• Javascript basics from MDN.

• Javascript tutorial from javascript tutorial.net

• Javascript tutorial from w3schools.