While declaring variables you might get confused between the choice of two keywords in JavaScript: let and var. They might look similar at first, but both of them are different in terms of scope and behavior. In this article, we will explore the differences between let and var keywords in JavaScript, along with many examples.<\/p>\n\n\n\n
Before moving forward, let’s revise both of them first!<\/p>\n\n\n\n
When we create a variable using the var keyword in JavaScript, it makes the variable to be function-scoped, i.e. the variable can be accessed throughout the entire function in which it was declared. Earlier the var keyword was the primary way of declaring variables. <\/p>\n\n\n\n
Let\u2019s see how we can use the var keyword:<\/p>\n\n\n\n
function example() {\n var x = 5;\n console.log(x);\n}<\/pre><\/div>\n\n\n\nOutput:<\/strong><\/p>\n\n\n\n5<\/code><\/pre>\n\n\n\nIn the example above, the variable x is declared using var within the example function. Since var is function-scoped, we can access it anywhere inside the function.<\/p>\n\n\n\n
Additionally, variables declared with var can also be redeclared within the same scope. This can result in potential issues and bugs.<\/p>\n\n\n\n
What is the let keyword?<\/strong><\/h2>\n\n\n\nWhen we use the let keyword to declare a variable in JavaScript, it makes the variable block-scoped, i.e. it can be accessed only within the block of code in which they are declared.<\/p>\n\n\n\n
The let keyword was introduced in JavaScri[t ES6 in 2015. It can be seen as a more modern alternative to var. <\/p>\n\n\n\n
Let\u2019s see how we can use the let keyword:<\/p>\n\n\n\n
function example() {\n let message = "Hello, world!";\n console.log(message); \n if (true) {\n let message = "Goodbye, world!";\n console.log(message); \n }\n console.log(message);\n}<\/pre><\/div>\n\n\n\nOutput:<\/strong><\/p>\n\n\n\nHello, world!\nGoodbye, world!\nHello, world!\n<\/code><\/pre>\n\n\n\nIn the above example, we declared the variable message with let within the example function. The first console.log statement within the if block will output “Goodbye, world!”, as the message is block-scoped and limited to the block in which it is declared.<\/p>\n\n\n\n
Difference between let and var in JavaScript<\/strong><\/h2>\n\n\n\nNow that you have a basic idea about both of them, let’s discuss the key differences between let and var in JavaScript:<\/p>\n\n\n\n
1) Scope<\/strong><\/h3>\n\n\n\nThe main difference between let and var in JavaScript lies in their scope. The variables declared with var are function-scoped, while the let variables are block-scoped.\u00a0<\/strong><\/p>\n\n\n\nThis means that when we declare the variable using var, they can be accessed throughout the entire function in which they are declared, as well as any nested functions. On the other hand, we can only access the let variables within the block of code in which they are declared.<\/p>\n\n\n\n
Let\u2019s see an example to compare them.<\/p>\n\n\n\n
Variables using var:<\/strong><\/p>\n\n\n\nfunction example() {\n var x = 5;\n if (true) {\n var x = 10;\n console.log(x);\n }\n console.log(x);\n}<\/pre><\/div>\n\n\n\nOutput:<\/strong><\/p>\n\n\n\n10\n10\n<\/code><\/pre>\n\n\n\nVariables using let:<\/strong><\/p>\n\n\n\nfunction example() {\n let y = 5;\n if (true) {\n let y = 10;\n console.log(y);\n }\n console.log(y);\n}<\/pre><\/div>\n\n\n\nOutput:<\/strong><\/p>\n\n\n\n10\n5\n<\/code><\/pre>\n\n\n\nIn the first example, the var variable x is accessible both inside and outside the if block, leading to a change in its value. However, in the second example, the let variable y is block-scoped, so the value inside the if block does not affect the value outside of it.<\/p>\n\n\n\n
2) Redeclaration<\/strong><\/h3>\n\n\n\nAnother important difference lies in their behavior to redeclaration. We can redeclare a variable declared using var within the same scope which can cause unexpected results and bugs.\u00a0For example:<\/p>\n\n\n\n
var a = 5;\nvar a = 10;\nconsole.log(a);<\/pre><\/div>\n\n\n\nOutput:<\/strong><\/p>\n\n\n\n10<\/code><\/pre>\n\n\n\nIn the example above, we initially declared the var variable a with a value of 5. However, we have redeclared it with a value of 10 within the same scope, resulting in a final output of 10.<\/p>\n\n\n\n
On the other hand, we can not redeclare the variable using let within the same scope. If we attempt to redeclare a let variable, we will encounter an error. For example:<\/p>\n\n\n\n
let b = 5;\nlet b = 10; <\/pre><\/div>\n\n\n\nOutput:<\/strong><\/p>\n\n\n\nError: Identifier 'b' has already been declared<\/code><\/pre>\n\n\n\nIn this example, when we tried to redeclare the variable b again with value 10, it showed the error that \u2018b\u2019 has already been declared.<\/p>\n\n\n\n
3) Hoisting<\/strong><\/h3>\n\n\n\nHoisting is a JavaScript behavior in which variable and function declarations are moved to the top of their respective scopes during the compilation phase.\u00a0<\/p>\n\n\n\n
There is a difference in hoisting behavior between the variables declared using let and var. The variables declared using var are hoisted to the top of their scope, which allows us to access and use a variable before it is declared.<\/strong><\/p>\n\n\n\nFor example,If we try to access the variable a before it is declared, it will print undefined which is the initial value of it:<\/p>\n\n\n\n
console.log(a);\nvar a = 5;\nconsole.log(a);<\/pre><\/div>\n\n\n\nOutput:<\/strong><\/p>\n\n\n\nundefined \n5\n<\/code><\/pre>\n\n\n\nWhile, when we try to access the let variables, it will result in a ReferenceError as they are not hoisted. Let\u2019s see it with another example:<\/p>\n\n\n\n
console.log(b); \nlet b = 5;\nconsole.log(b); <\/pre><\/div>\n\n\n\nOutput: <\/strong><\/p>\n\n\n\nReferenceError: Cannot access 'b' before initialization\n5<\/code><\/pre>\n\n\n\nIn this example, the let variable b is not hoisted, and trying to access it before initialization leads to a ReferenceError.<\/p>\n\n\n\n
Key Differences Between var and let Keywords<\/strong><\/h2>\n\n\n\nLet’s now summarize the key differences:<\/p>\n\n\n\n