The Difference Between Let, Const & Var
Before we get to differentiating these three ways of declaring variables in Javascript, let’s quickly define a variable. A variable is simply a way of temporarily storing data or information in javascript. This data could be any type — numbers, characters, booleans, strings, and lots of other things including operations. This data is later grabbed or returned by using the word (now a variable) that was used to bind the data.
Javascript is a high level language that takes normal human sentences (in English) and converts it to a syntax that the computer understands. Variables are used to store every type of information in javascript syntax so the compiler can reference the data stored in the variables.
This makes coding easier because one sentence that is repeated on a code file can just be declared and stored in a variable as a string and that variable will output the sentence every time it is called.
Here is an example below;
let age = 25;
let fullName = `Somtochukwu Onyekachukwu Uzuakpunwa`;
console.log(` ${fullName} is ${age} years old.`);
The result printed on the console will be the statement “Somtochukwu Onyekachukwu Uzuakpunwa is 25 years old.” This was previously stored in a variable called fullName using the keyword “let” and then returned to be written on the console.
Now that we have understood how variables work, let us discuss the three ways to declare a variable.
There are three ways to declare a variable:
- let
- var
- const
I will give a quick definition and differentiate these keywords with actual examples so you will understand exactly how these keywords work, when to use them and more importantly, when not to use them.
Moving forward, I’ll use words like globally, locally or within a blocked scope. Declaring a variable globally simply just means the variable is effected on every part of your code while declaring locally or within a blocked scope means its just for a block of code enclosed by braces ({}).
Here’s an example below:
- The variable firstName is a globally declared variable;
let firstName = “Somtochukwu”
console.log(firstName)
Result ==> Somtochukwu
- The variables lastName and fullName are locally declared or within a blocked scope;
let firstName = “Somtochukwu”
if (firstName = “Somtochukwu”){
let lastName = “Uzuakpunwa”, fullName = firstName + lastName;
console.log(fullName);
}
Result ==> Somtochukwu Uzuakpunwa
It is worthy to note that there are some rules to variables but these are the ones we can’t skip pertaining to the context of this article;
- Variable cannot be declared twice globally or within the same blocked scope using the same name regardless of the keyword used.
- Variables can be updated globally or within a blocked scope provided the right keyword is used.
- Variables can be declared within a blocked scope with the same name previously used to declare it globally.
Let’s discuss these keywords and how they affect our code.
LET
Let us start with the let keyword. This is often used to declare variables both within block of codes and globally. It is probably the most versatile and arguably the predominantly used way.
This is because previously the only way to declare a variable, which was with “var”, didn’t give room for declaring an already existing global variable with the same name within a block of code (also called a blocked scope) and the latter “const” released at the same time with the “let” had some restrictive rules to updating variables (globally or within a blocked scope) and to declaring a global variable with the same name used globally within a blocked code.
Let us look at the examples below using the “let” keyword:
Case 1:
let x = 0;
if (x === 0){
let x = 5;
console.log(x);
}
Result ==> 5
First, we declared a variable “x” globally with the let keyword. Then, we opened a block of code and declared the variable “x” as 5. The result when we logged “x” to the console within the block of code was 5 because the let keyword that was used to declare the variable globally lets you declare a new variable inside a code block with the same name.
Case 2:
let x = 0;
if (x === 0){
x += 5;
console.log(x);
}
Result ==> 5
In the second example above, the variable x was updated inside a code block. Updating a variable is like changing its value and in the above example, we gave x a value of “x = x + 5”. These are the major perks of using the let keyword.
It is advisable to use the “let” keyword instead of “var” and this keyword is mostly used for variables that their values change or update throughout the code.
VAR
The var keyword is the oldest of them all — if these keywords were humans, it’ll be their elderly parent struggling to keep up with technology. It only allows declaration of variables globally. What this simply means is that whatever variable is declared with this can only be updated globally — in a way that it runs or is applicable throughout the entire code.
The variable can not be declared or updated within a blocked scope. It can only be updated globally on the code.
This won’t really make much sense until we look at the some examples below using var instead of “let” :
Case 1:
var x = 0;
if (x === 0){
var x = 5;
console.log(x);
}
Result ==> Uncaught SyntaxError: Unexpected token “var”
First, we declared a variable “x” globally with the var keyword. Then, we opened a block of code and declared the variable “x” as 5. The result when we logged “x” to the console within the block of code was an error because the “var” keyword is only used to declare a variable globally and not within a code block or block of codes.
Case 2.
var x = 0;
if (x === 0){
x += 5;
console.log(x);
}
Result ==> Uncaught SyntaxError: Identifier “x” has already been declared.
In the second example above, the variable x was updated inside a code block and we got an error saying the variable “x” had already been declared globally. This is a major let down with using “var” because it restricts local declaration of variable within a code block.
Case 3:
let x = 0;
if (x === 0){
var x = 5;
console.log(x);
}
Result ==> Uncaught SyntaxError: Unexpected identifier ‘x’
Case 4:
let x = 0;
if (x === 0){
var x += 5;
console.log(x);
}
Result ==> Uncaught SyntaxError: Unexpected identifier ‘x’
The two examples above gave an error message too and this was because the “var” keyword cannot declare variables in a block of code even if it is updating a variable initially declared by the “var” keyword outside the block. It is only used to declare variables globally.
Case 5:
var firstName = “Somtochukwu”
console.log(`Hello ${firstName}`)
firstName = ‘Onyekachukwu”
console.log(`Hello, ${firstName}`)
Result ==> Hello, Somtochukwu. Hello, Onyekachukwu.
As we could see in case 5 above, the code works because the “var” keyword lets you update a variable provided it is globally, was previously declared with the “var” keyword and is NOT within a blocked scope.
CONST
The const keyword is used to declare a constant variable globally and within a blocked scope but this variable remains unchanged both globally (including the blocked scopes on your code) and within the entirety of any blocked scope it was declared in.
This means that even though the “const” keyword lets you declare variables within a blocked scope, it cannot declare a variable with the same name if that variable was previously declared anywhere on the code with the “const” (or var) keyword.
The only exception to using the “const” keyword to declare a blocked scope variable that was previously declared as a global variable is that it must have initially been declared globally using the “let’ keyword.
Let us look at the same example using “const”:
Case 1:
const x = 0;
if (x === 0){
const x = 5;
console.log(x);
}
Result ==> Uncaught SyntaxError: Identifier “x” has already been declared.
Case 2:
const x = 0;
if (x === 0){
x += 5;
console.log(x);
}
Result ==> Uncaught SyntaxError: Identifier “x” has already been declared.
The above examples in case one and two gave error messages because a constant variable can not be declared again with the same name or updated to a new value that references its previous value if the previous value was declared using “const”.
Case 3:
let x = 0;
if (x === 0){
const x = x + 5;
console.log(x);
}
Result ==> Uncaught SyntaxError: Cannot access ‘x’ before initialization
This gave an error message because the const keyword doesn’t let you update a variable previously declared with “const” or pull from an already declared variable.
Case 4:
let x = 0;
if (x === 0){
const x = 5;
console.log(x);
}
Result ==> 5
It is recommended to use the let and const keywords.
If you’ve read this far, I’d like to think that you get the general idea and can safely and easily differentiate let, var and const keywords from each other.
Thank you for reading and I’ll see you on my next article!
