What is the difference between var, let and const in JavaScript?
In ES6, we use var, let and const for variable declaration.
var name;let email;const age = “”;
In this article, we’ll try to identify the differences between var, let and const.
Var
The scope of a var variable is global which means the variables that are declared with var keyword outside a function block are available for use in the whole window.
var variables declared within a function are only available and can be accessed within that function.
Ex –
var greeting = “good morning”;function newGreeting() {var hello = “Hello”;console.log(hello);}console.log(greeting); //good morningnewGreeting(); //helloconsole.log(hello); //hello is not defined
var variables can be redeclared and updated.
Ex –
var greeting = “good morning”;console.log(greeting); //good morningvar greeting = “Hello”;console.log(greeting); //Hellogreeting = “Good Evening”;console.log(greeting); //Good Evening
Let
let comes with improvements to var declaration. It solves the problem with var which is enabling the re-declaration of the same variable. This can be a problem if you do not realize that a variable has already been defined before with the same name.
Ex –
var greeting = “Good morning”;var time = 14;if (time > 12) {var greeting = “Good afternoon”;}console.log(greeting); // Good afternoon
let is block-scoped, which is bounded by curly braces. The variable declared in a block with let keyword is only available within that block.
Ex –
let greeting = “Good morning”;let time = 14;if (time > 12) {let newGreeting = “Good afternoon”;console.log(newGreeting); //Good afternoon}console.log(newGreeting); //newGreeting is not defined
let can be updated but not re-declared. The let variables can be updated within its scope but they can not be re-declared within its scope.
Ex –
let greeting = “Good morning”; //Syntax errorgreeting = “Good evening”;let greeting = “Good night”; //Syntax error
If the same variable is defined in different scopes using let, there will be no errors because both instances are treated as different variables as they have different scopes.
Ex –
let greeting = “Good morning”;if (true) {let greeting = “Hello”;console.log(greeting); //Hello}console.log(greeting); //Good morning
Const
Variables declared with const keyword maintain constant values which can not be updated or re-declared later.
Const declarations are block-scoped. They can only be accessed within the block where they were declared. The value of a const variable remains the same within its scope.
Ex –
const greeting = “Hello”;greeting = “Good morning”; //invalid assignment to const ‘greeting’const greeting = “Hello”; //SyntaxErrorconst greeting = “Good Morning”; //SyntaxError
Not only const variables but there are also objects declared with const too. The const object cannot be updated but the properties of the const object can be updated.
Ex –
const greeting = {name: “Alex”,message: “Hello”,};greeting.name = “Smith”;console.log(greeting.name); //Smith
While var and let can be declared without being initialized, const must be initialized during declaration.
I hope you’ve learned something new from this article. Got any questions or additions? Please let me know. Thank you for reading.