There are three ways to declare variables in JavaScript, but what are the real differences?

Javascript was created with a single keyword to define a variable, this reserved word is var. but since version 6 (ECMAScript 2015) of the language specification, two new keywords have appeared: let and const.

If we had to summarize the definition of these two new ways of declaring variables, we could say that:

• let is used to define a local variable

• const is used to declare a constant reference

Be careful, a constant reference doesn't mean the value behind a reference is "immutable", but that the reference itself is immutable.

But let's see exactly how the operation of the variables var, let, and const are different in practice:

Stored as a whole?

• var: yes
• let: no
• const: no

When var is used to declare a variable outside of a function, then this variable will necessarily be referenced in the global object of the script.

In browser, this variable is called window and in a NodeJS environment it's called global.

Is it limited to the scope of a function?

• var: yes
• let: yes
• const: yes

The scope of a function is the only one that puts all variables on the same footing and declaring a variable inside a function will logically not affect the rest of the codes.

Is it limited to the reach of a block?

• var: no
• let: yes
• const: yes

For those wondering what a block is, it's simply the set of statements enclosed between two braces "{...}" except for when those braces delimit a function or a JSON object.

A statement block is often found after an if, else, for, while, etc. So remember that a variable declared with the keyword "var" in a for will automatically be global.

Unless the for is contained in a function, of course.

Can be reassigned?

• var: yes
• let: yes
• const: no

Reassigning means that we will either modify the value of the variable when playing with primitive types or that we will modify the reference of the variable when using a complex type.

Note that if const is used to reference an object, the content of that object can still be modified.

Can be redeclared?

• var: yes
• let: no
• const: no

Redeclaring a variable (except when its scope allows) isn't possible unless it's with var, but this is not a good practice and it's advisable to avoid doing so.

Is affected by hoisting?

• var: yes
• let: no
• const: no

Hoisting is a more complex notion that occurs when interpreting Javascript code, if you're not familiar with this concept I advise you to read this article

Conclusion

When declaring a new variable, remember to prioritize const first, then let, and lastly var as a last resort, but you shouldn't need it anymore.

Be careful, however, let and const are only supported by browsers that are compatible with ES6, so you will have to use a transpiler to support all environments.

And that's it. You're done.

Follow Cedrick Lupembe for more web-related content.

If you decide to try some of these tips or need any help, send me a message on Twitter or comment on the link to your website. I'd love to check it out!