Understanding JS under the hood: var, let and const 🦾

Javascript is one of the top programming languages in this 2021 and I really love it, that’s why today we’re gonna talk about a topic that sometimes is very complex for beginners. To create truly powerfull and great apps, we need to understant how JS manage the variables, functions, call’s, etc. So, let’s talk about variables declaratations and how we have to be carefull in some cases.

JS is so awesome

¿Javascript or ECMAScript?, ¿are they the same?

As we know JS is a programming language whose in the beginning just had the chance to be used in the web browser. ECMAScript is the specification it’s based on. By reading the ECMAScript specification, you learn how to create a scripting language. By reading the JavaScript documentation, you learn how to use a scripting language.
Browsers offers limitations between the standart (JS engines, they interprete the code), every browser has a different JS engine, it’s like the specific kind of languaje that many parts of a country develop throughout time: english is not the same in Texas or New York. Or the latin spanish in “tepito” or Monterrey.

So, an engine can interprete a specific version of ECMAScript. When dev’s are asking for the ECMAScript version that a browser supports, they really are asking about the engine. Here’s a list that could help to understant better this concept:

Engines and ECMAScript versions with browsers

Concluding this part, it’s important to know some limitations that a browser can have when yo’re writting code, well … you can use many tools (babel)to transform your code and forgot about this but that is another topic.

Important concepts

1. Scope: It’s where these variables are available for use. This could be the entire context like all the windows or file about your writting code or the context inside a function.
2. Hoisting: Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution. That’s why you can call a function before to be declared. No matters where you write that declaration, js move it to the top of file or context, also we have to remember that js just move the declaration not the assignments.

ES5

var

Some years ago before ES6, using var was the most common and ruled way declaration. With var we have two scopes:

• Global scope: Available in the entire window or file.
• Function scope: Available locally inside the function block.

Using var

As you can see in the image above, “name1” can be used inside the function but when we try to show “name2”, we’ll se a reference error because “name2” lives only in myFunction.

Characteristics of var

var variables can be redeclared and reassigned, for example:

This code won´t show error

Problem with var

Imagine your code has a lot of lines and you declared an initial state or variable. Then you declared a variable with the same name inside a function, js won’t warn yout about this action and the system or app can crash or do a different behavior.

Hoisting var

We have to be awared that js engine moves the declaration of var variables to top but also initialize these variables to undefined.

Hoisting var

Special case: If we don’t declared a variable but we assign a value to it, it does not exist until code assigning it is executed. Therefore, this behavior creates a global variable when the assignment is executed. We most know that undeclared variables are global variables.

Undeclared variables are global variables

ES6

let

Some of the problems of var came to be solved with ES6, today let is the ruled of preferred variable declaration. It solves the main problem with var.

• Block scope: A block is considered as a piece of code bounded by curly braces {}.

Block scope

So, in the example above we see that “name2" no exists after the curly braces that bounded the if statement. To be sure, let’s se other example:

This code won’t show errors

With var, this piece of code could be read as redeclare “car” but that would be a mistake. Every variable in this example lives in it’s own scope, that’s why we see in the last line the value of the first assignment, we’re not changin the value of car, just declarating car in two scopes.

Characteristics of let

Unlike var, let could be reassigned but we cannot redeclare it in the same scope. If we do this, gonna get an error:

Solves the problem with var

Hoisting let

As we remember, js moves the var declaration assigning undefined on the top. In this case, the hoisting is almost the same but not assigning any value to the variable and showing reference error.

Hoisting let

const

Using const variables is recomended if you want to maintain the value assigned to a variable in all the context. We have here the same similarities like using let. Also const is block scoped.

Characteristics of const

After the assigment with const, we cannot update the value. So, we cannot reassign or redeclare a variable.

With const, it’s not possible to redeclared or reassign a value

Hoisting const: Just like let these declarations are hoisted but not assigned. Also we cannot just declare a const variable, we most initialized it.

After all this explanation, I hope your js knowledge will be better and more strong. Some times we talk about JS without understanding it under the hood, but when you cross the line you become a ninja ❤.