Beginners often times get confused about the variable declaration types in Javascript, when and how to use them. This article gives a straightforward perspective on the use of var, let and const.

The keywords var, let and const define variables in Javascript. Before 2015, var was the only way to declare a variable. let and const are new features of the 2015 EMCAScript 6 (ES6). First, I will briefly describe these concepts:

1. Function scope

A variable is defined inside the function locally, therefore that variable cannot be assessed outside of the function.

2. Block scope

A variable is only scoped inside of the curly braces i.e. {} and cannot be assessed anywhere out of the braces.

3. Global scope

A variable is defined and assessed outside of the function or block.

Difference between var, let and const

var

var is limited to the function which defines it. var reflects in a lot of ways as variables declared under var can be scoped globally and locally, or the term "function scope" .

function greetings() {
var sentence = 'Good day!' 
console.log(sentence) 
}

greetings() // 'Good day!'

console.log(sentence) // ReferenceError: sentence is not defined

var is not block scoped.

if (true) {
var sentence = 'Good day!'
}
console.log(sentence) // 'Good day!'

var variables can be re-declared; leading to errors if the programmer makes the mistake of re-declaring same variable names in the code.

var firstName = 'John'
var firstName = 'Peter' 
console.log(firstName) // 'Peter'

let

let is limited to the block defined by curly braces {}, let is block-scoped. If the variable is called outside of the block, it will give an error.

if (true) {
let sentence = 'Good day!'
console.log(sentence) // 'Good day!'
}
console.log(sentence) // ReferenceError: sentence is not defined

let can be updated but cannot be redeclared. This is a useful feature that prevents overriding of codes.

let firstName = 'John'
let firstName = 'Peter'
console.log(firstName) // SyntaxError: Identifier 'firstName' has already been declared 

let nickname = 'Bee' 
nickname = 'Bug'
console.log(nickname) // 'Bug'

const

Just like let, const is block-scoped and cannot be redeclared. However, a big difference is unlike let, const cannot be re-assigned. const is a constant!

const firstName = 'John' 
firstName = 'Peter'
console.log(firstName) // TypeError: Assignment to constant variable

To prevent avoidable bugs in Javascript, we use block-scoped variables instead of function-scoped variables. Hence, let and const are more applicable in the real world.

Happy coding!