Let/Var/Const + Hoisting

So far in my process of applying and interviewing for software development positions, some of the most common JS questions have included differentiating between let, var, and const. In the same vein, many interviews include some form of “describe hoisting”. So in this post, I will cover let/var/const as well as hoisting since they tend to go hand-in-hand.

What exactly are let, var, and const?

let, var, and constare all different ways to declare a variable in JavaScript. let and const were introduced with ES6 and previously, var was the only option. One of the largest differences between the three are their respective scopes. Scope — where the variable is accessible in your code — can be local or global. All three can be declared globally (when declared outside of a function), but var also has function scope (declared within a function).

In this example, the variable is defined within the function and calling test within a console.log outside of the function returns an error as it is outside the function scope

Additionally, var variables can be re-declared or are considered mutable. So a var declaration earlier on in the code can be reassigned a different value to the same variable.

In the above example, a variable declared with var is both re-declared and updated

Similar to var, let variables are also mutable and can have it’s value changed but re-declared only outside its scope. You cannot use let to re-declare a variable within the same scope or you will get an error that it has already been declared. If the declarations are in separate scopes though, you can use the same let variables since they will be treated as different variables due to the different scope instances.

In this first code snippet, you can see how trying to re-declare returns an error but updating the value is acceptable with let

Unlike how var is function scoped, let is block scoped. Instead of being contained within the function, let variables are accessible within the bounds of a set of curly braces.

The variable name ‘sample’ can be used in two different instances since one is within global scope and the other is confined to the block scope within the function

const is very similar to let as it is block scoped, but const is immutable. A variable declared with const cannot be changed or updated. A declared const object can have its properties changed though — it just cannot be re-declared.

Here you can see both attempting to re-declare or update the value for the declared variables result in errors

So what about hoisting?

In JavaScript, all variable and function declarations are “hoisted” — or theoretically moved to the top — of their scope prior to execution. The initialization is only hoisted for var though, and this presents another difference between var and let/const. var declarations that are hoisted are initialized with a value of undefined whereas let/const variables will not be initialized when hoisted and will therefore return a Reference Error.

In the above example using var, the first console.log returns undefined and the value of ‘hello!’ for the second. This is due to the aforementioned hoisting of the var hello declaration. The declaration is hoisted to the top of the function (due to var function scope), the console.log returns undefined as it has not been initialized, the variable is initialized, and then finally returned with the second console.log.

Below is the same example but with let instead of var. Unlike var which is default initialized with undefined as it is hoisted, let returns a Reference Error clarifying that the requested variable has not yet been defined.

Function hoisting is a bit different than variable hoisting because it hoists the whole function definition. Functions declared via an expression like var/let/const are not hoisted though. In this case, as with variables the declaration itself is hoisted but not the function definition. Trying to call a function expression will result in a Type Error since it’s trying to utilize a function without a definition.

So what’s the TL:DR?

• Scope: var declarations are function scoped, let/const are block scoped
• Re-declaration: var can be updated and re-declared, let can be updated but not re-declared, const cannot be updated or re-declared.
• Hoisting: var is hoisted and initialized as undefined, let/const are hoisted without initialization and return a Reference Error.

Hopefully this quick run-down of the basics and differences between the types of JS declaration methods and hoisting will help you with understanding these common concepts. It’s worth noting that some of the personal feedback I have received is to keep your answers as concise as possible. Try to have a brief definition of the topic plus a short example of application. Good luck and happy coding!