DEV Community

loading...

var, let & const in JavaScript

kunalt96 profile image Kunal Tiwari ・3 min read

ES2015(ES6) was released long back and one of the features that came with ES6 is the addition of let and const, another way for variable declaration. If you are still not clear about this concept, then this article is for you. We will discuss let, const and var in this blog with respect to their scope and use.

Var

var is a reserved keyword and helps to declare the variables in javascript. Assigning a value using var keyword happens as per the below code (using = operator)

// Setting name to some value 
var name = 'John Doe';

// Initalizing the name variable and set to undefined
var name;
Enter fullscreen mode Exit fullscreen mode
Scope

The scope of the var keyword is limited to the function within which it is defined. If it is defined outside any function, the scope of the var becomes global.

Have a look at the below code:

// This var keyword has a global scope, available globally 
var name = "John Doe";

function dispName() {

  //This var keyword is defined has local/functional scope, avaialble locally 
  var name = "Johny";
  console.log(name); // Johny
}
console.log(name); // John Doe
dispName();
Enter fullscreen mode Exit fullscreen mode

The above code provides a situation where the keyword 'name', is called inside and outside the function. Therefore we can conclude that var is function scoped

Let

let keyword was introduced in JavaScript ES6(ES2015). Nowadays developers prefer let keyword over var keyword, as it's an improvement over the var keyword. It helps us to assign the value or store it to some variable. Consider the below code for the same:

//Assigning value
let name = 'John Doe';
//Initializing b and set it to undefined
let name;
Enter fullscreen mode Exit fullscreen mode
Scope

Anything or any code within a {} braces is a block. Hence let is limited to the block defined by curly braces

var x = 4;
let y = 5;

if (true) {
  var x = 1;
  let y = 2;
  console.log("Block Scope", x, y); // Block Scope 1 2
}
console.log("Global Scope", x, y); // Global Scope 1 5
Enter fullscreen mode Exit fullscreen mode
  • In the above code, x acts as a global scope, hence its value gets re-assigned to 1 inside block scope and that's why it prints 1 in both console statements.
  • y acts as a block-scoped variable (defined by let keyword), therefore its value is preserved. Its value is 2 inside the block and 5 outside the block. Because of this reason, developers prefer let over var. Therefore, we can conclude that let is block scoped

Const

ES6 also introduced one more keyword known as const. Variables defined with const variable behaves like the let variables, except they cannot be reassigned

const name = "John Doe";
name = "Johny";
console.log(name);
Enter fullscreen mode Exit fullscreen mode

The above code will throw an error, something similar to this, Hence const cannot be reassigned
Alt Text

NOTE: const doesn't make the variables constant. It defines the constant reference to the value. Therefore we cannot change constant primitive values. But we can change the properties of Objects or values inside an Array. (But it cannot be reassigned to the new Object or Array)

Consider the below code:

const fullDetails = { firstName: "John", lastName: "Doe" };
fullDetails.age = 22;
console.log(fullDetails); // { firstName: 'John', lastName: 'Doe', age: 22 }

// This code will throw error, as const varaibles cannot be reassigned 
fullDetails = { firstName: "Tony", lastName: "Doe" };
console.log(fullDetails); // TypeError here
Enter fullscreen mode Exit fullscreen mode
Scope

Scope of const is same as let i.e. Block scoped (limited to the blocks defined by curly braces {}).

const name = "John";
if (true) {
  console.log(name); // John
  // Scope of age is limited to this block only
  const age = 25;
  console.log(age) // 25
}

// name will be John, but age will be not defined as it is block-scoped variable (Reference Error will occur)
console.log(name, age);
Enter fullscreen mode Exit fullscreen mode

Therefore we can conclude that const is block-scoped and const variable cannot be reassigned to a new value. But it can be mutated

Conclusion

  • var is functional scope
  • let & const are BLOCK scope
  • const is mutable but cannot be reassigned

Discussion (12)

pic
Editor guide
Collapse
lakshayne profile image
Lakshay Sharma

i just googled it and it says something like this and i am kind of confused now🤔🤔🤔

The main difference between let and var is that scope of a variable defined with let is limited to the block in which it is declared while variable declared with var has the global scope. So we can say that var is rather a keyword which defines a variable globally regardless of block scope.

Collapse
kunalt96 profile image
Kunal Tiwari Author

Yes, that what I wrote above. Yes, let has block scope and var has functional scope. You are mixing two things here and that is what confusing you. Whenever any variables declared outside function, outside blocks in globally - either be let or var, it will have full global scope

Collapse
lakshayne profile image
Lakshay Sharma

ok than you very much 👍👍

Thread Thread
kunalt96 profile image
Kunal Tiwari Author

Always welcome buddy :)

Collapse
standoge profile image
StanDoge

Good post!

Collapse
kunalt96 profile image
Kunal Tiwari Author

Glad you liked it, Please do share with your connections as well

Collapse
curlmuhi profile image
Ekta Maurya

thank you for this ,it clears my confusion as i'm a newbie.

Collapse
kunalt96 profile image
Kunal Tiwari Author

Thanks a lot. Glad you liked it. Js is all easy, you can start with some.good tutorials online, things will be good.

Collapse
ra1nbow1 profile image
Matvey Romanov

Simple and clear

Collapse
kunalt96 profile image
Kunal Tiwari Author

Glad you liked it, Please do share with your devlopers friends and community

Collapse
anirudh711 profile image
Anirudh Madhavan

Main problem with var is the concept of 'hoisting'. It is better to stick with const and let.
More on w3schools.com/js/js_hoisting.asp

Collapse
kunalt96 profile image
Kunal Tiwari Author • Edited

I really appreciate it. Hoisting is a seprate concepts in JavaScript related to the var keyword. I didn't put that in the article here. But was expecting some discussion on this :). Will definitely talk about it on next article. Glad you read it. Let and const are additions but they are the best for variables declaration in js due to these certain side effects