DEV Community

loading...
Cover image for Let vs Var vs Const

Let vs Var vs Const

Sankalp Swami
Self Learnt Node JS Developer from India.
Updated on ・3 min read

JAVASCRIPT is the new Boss in the Industry. Javascript says nothing is impossible.
Javascript is having many frameworks like Vue, Angular and libraries like React for frontend Development and at the same time it can even tackle Backend Development using Node JS. And recently there is also a new buzz for Machine Learning with Javascript.
Watching someone writing Javascript is as soothing as watching these two -
chandler & joe hug

LET

Let statement is block-scoped and not a Global scope local variable used for initializing a statement. This statement can be used in function as it is function-scoped and one of the main character of let statement is that it can be reassigned.

let name = "Sankalp";
name = "Sankee";
console.log(name); // will print: Sankee
Enter fullscreen mode Exit fullscreen mode

VAR

Var statement is also used for variable declaration and it is Global scoped variable. Variable declared with var is defined throughout the program.Var is defined throughout the function but not if its declared in a block as it is not block-scoped.

if (true) {
var firstName = 'Sankalp'
let age = 18
}
console.log(firstName) // Will print: Sankalp
console.log(age) // Will print: ReferenceError
Enter fullscreen mode Exit fullscreen mode

Var statement can be reassigned.

var name = 'Sankalp'
name = 'sankee'
console.log(name) // will print: sankee
Enter fullscreen mode Exit fullscreen mode

CONST

When we declare a variable with let, we can reassign its value later on. Thats great but what if we dont want to reassign its value, for those, we have const. Const is function-scoped and block-scoped and it is not defined throughout the program as it is not global-scoped. If you try to reassign const variable it will throw a type error.

const name = 'Sankalp';
name = 'Sankee'
console.log(name) // will print: TypeError
Enter fullscreen mode Exit fullscreen mode

const variables in objects and arrays.
You cannot overwrite an object but yes you can change its properties.

const person = {
  name: "Sankalp",
  age: 18,
};

person = {
  name: "Sankee", //  this will throw TypeError
};
Enter fullscreen mode Exit fullscreen mode

reassigning a value of keys is possible as mentioned

const person = {
  name: "Sankalp",
  age: 18,
};

person.name = "Sankee";
console.log(person.name); // will print: Sankee
Enter fullscreen mode Exit fullscreen mode

In arrays, you cannot assign an array to a const variable.

const list = [];

list = ["abc"]; // will throw TypeError
Enter fullscreen mode Exit fullscreen mode

But you can push items to the array.

const list = [];

list.push("ABC");
console.log(list); // will print: ['ABC]
Enter fullscreen mode Exit fullscreen mode

Hoisting

Variables declared with var can be accessed even before they are declared. The reason for this behaviour is that they are hoisted up to the top of the scope. When you declare some variable without any statement it gets declared as var automatically.

name = "sankee" // defaults to var
console.log(name) // Will print: sankee
Enter fullscreen mode Exit fullscreen mode

Final Verdict

Var variable is something I will not recommend to use as it is not used in the Industry. Let and Const are the one which you will be using. choosing them is easy as if you want to reassign its value use let and if you are then got for const variable.

🙌SUPPORT

Buy Me A Coffee

CONNECT WITH ME

Getting strong with the fundamentals is the only path to Glory.
Wish you very all the Best, Keep Practicing, Peace..
Joey & Chandler

Discussion (9)

Collapse
dshenderson profile image
Derek S. Henderson

I'm sorry, but this is just wrong. var is function-scoped, not global. In fact, that's the whole point of using var, to avoid assignment to the global object. let and const are both block-scoped, not function-scoped. And with const, it's the binding that can't be changed, not the value, an important distinction: if you bind a primitive type, you cannot change the value, but if you bind a non-primitive type to const you can still change its value.

Collapse
sankalpswami1122 profile image
Sankalp Swami Author

Thanks sir for the response but its not the correct way in case of var. yep, var is function-scoped but only when they are declared in a function, if not, then they are global-scoped.

if (true) {
   var age = 20;
}
console.log(age); // will print: 20
Enter fullscreen mode Exit fullscreen mode

In the above example, var is defined inside a block but still returns when called outside the block because as var is function-scoped and as it is not declared in a function so it is instead defined at global-scope.

let func = function () {
  const age = 18;
  if (true) {
    console.log(age); // will print: 18
  }
};
Enter fullscreen mode Exit fullscreen mode

This shows that const is function-scoped as it is defined throughout the function.
And thanks sir for the const in case of non-primitive type,
thats correct, we cannot overwrite objects and we cannot assign an array to the variable but yes we can change the values of an object and can push items to the array.

Collapse
dshenderson profile image
Derek S. Henderson

From MDN:

The scope of a variable declared with var is its current execution context and closures thereof, which is either the enclosing function and functions declared within it, or, for variables declared outside any function, global. Duplicate variable declarations using var will not trigger an error, even in strict mode, and the variable will not lose its value, unless another assignment is performed.

And:

Variables declared by let have their scope in the block for which they are declared, as well as in any contained sub-blocks. In this way, let works very much like var. The main difference is that the scope of a var variable is the entire enclosing function

Look, a lot of people are seeing your post, so it is important to get this right.

Yes, if you declare var without a containing function, even if you wrap it in a block, it gets assigned to a property on the global window object. In other words, var foo outside of a containing function is the same as window.foo. But within a function or a block inside that function, it is scoped to the function, not globally. Thus, var is scoped primarily to a function except in the absence of a containing function, when it is assigned to the global object.

But const and let are only ever block-scoped. If the containing block happens to be a function, that is still a block, so it is still block-scoped, not function-scoped. If there is no containing block, the scope might seem global, because it is available to the invisible block that contains all the scripts running in that instance, but it does not get a property on the global object.

There is a lot available online regarding var, let, const, and scope, so there shouldn't be any confusion about this.

Collapse
thomasbnt profile image
Thomas Bnt • Edited

Great! Don't hesitate to put

\`\`\`js
console.log("your code here")
\`\`\`
Enter fullscreen mode Exit fullscreen mode
Collapse
sankalpswami1122 profile image
Sankalp Swami Author

Thank you so much.

Collapse
cainenielsen profile image
Caine J Nielsen

Wait, what is this? I've never seen this syntax before.

Collapse
thomasbnt profile image
Thomas Bnt

It's markdown syntax for codes blocs

Collapse
oskarcodes profile image
Oskar Codes

When it comes to hoisting, you’ve got it a bit wrong.
What’s happening isn’t really hoisting like it works with function hoisting, but instead a default behaviour that happens when declaring variables without a specific declarator, that automatically uses var.

name = "sankee"; // defaults to use var even though it isn’t specified
console.log(name); // Will print: sankee

// this line is useless
// var name;
Enter fullscreen mode Exit fullscreen mode
Collapse
sankalpswami1122 profile image
Sankalp Swami Author

Thank you so much this is very useful.