Var, const and let in JavaScript
In this blogpost, I'll be covering the differences between var, const and let in JavaScript. You'll also gain some perspective about when to use what.
With the launch of ES2016, two new ways of defining variables were introduced to the popular language JavaScript. Before this update we could only use var to define a variable. So.... why were two new ways namely const and let added to the language?
Before we can understand the differences between var, const and let we need to understand another concept called "Scope"
Function Scope vs Block Scope
In JavaScript there are two types of scopes: Function-Scope and Block-Scope
Function-Scope
function testFn() {
var test = "This is a test Function! ";
console.log(test);
// expected output: This is a test Function!
}
console.log(test);
//expected output: ReferenceError: test is not defined
As you can see in the above lines of code var is a function-scope variable, meaning that when it is called outside of a specified function it throws a ReferenceError. Their "scope" is limited to a function.
Block-Scope
if(true) {
var testOne = "Hello World!";
let testTwo = "Hello Internet!";
const testThree = "Hello HashNode";
console.log(testOne); // expected output: Hello World!
console.log(testTwo); // expected output: Hello Internet!
console.log(testThree); // expected output: Hello HashNode!
}
console.log(testOne); // expected output: Hello World!
console.log(testTwo); // expected output: ReferenceError: testTwo is not defined
console.log(testThree); // expected output: ReferenceEroor: testThree is not defined
As you can see above testOne is not limited to the if statement block, however testTwo and testThree are limited to the if statement block
This concept of scope is the most prominent distinction between old "var" and modern "let/const".
The code between two curly brackets in JavaScript is known as a block of code
var
There are few more subtle differences between var and let/const so lets explore them using some small code snippets.
Redefining var
function testFn(){
var testOne = "Hello World!";
console.log(testOne) // expected output: Hello World!
if(true) {
var testOne = "Hello Internet!"
console.log(testOne) // expected output: Hello Internet!
}
console.log(testOne) // expected output: Hello Internet!
}
In the above lines of code you can see when variable is updated inside the if loop, the value of that variable is updated globally.
var outside of a for-loop
for (var i = 0; i < 5; i++) {
console.log(i); // expected output: 1 2 3 4 5
}
console.log(i); // expected output: 1 2 3 4 5
In the above lines of code we can see that variable "var" is accessible outside of the for loop, this is expected because the variable "var" is only inaccessible outside of the function definition.
let
The let variable defines a variable in a block scope. It has a lot of similarities to var but differentiates in some ways which gives the language a more modern feel.
function testFn(){
let testOne = "Hello World!";
console.log(testOne); // expected output: Hello World!
if(true){
let testOne = "Hello Internet!"
console.log(testOne); // expected output: Hello Internet!
}
console.log(testOne); // expected output: Hello World!
}
function testFn(){
let testOne = "Hello World!"
let testOne = "Hello Internet!" // Error Message: Uncaught SyntaxError: Identifier 'testOne' has already been declared.
console.log(testOne);
The above two snippets of code should help you understand the difference between the two, as you can see the scope of the "let" variable is only accessible to a block of code as soon as you try calling it outside of the block where it has been specified it throws a syntax error. However if you try the same snippet of code by replacing "let" with "var" it would work just fine.
const
Const statements can only be assigned once and they cannot be reassigned. The scope of const works in a similar to that of the "let" variable meaning that it has a block-scope.
function testFn (){
const testOne = "Hello World!";
console.log(testOne); // expected output: Hello World!
This is usually how the const variable works. Let's see what happens when we try reassigning it to a different value.
funtion testFn () {
const testOne = "Hello World!"
console.log(testOne); // expected output: Hello World!
const testOne = "Hello Internet!" // Uncaught TypeError: Assignment to constant variable.
console.log(testOne);