Var, Let, Const, Variable declarations with ES6

Source {Medium: Maya Shavin}

When it comes to declaring variables with JavasScript, there are three main options, ‘var’, ‘let’, and ‘const’. Each of these variable declarations carry with them different scope, use, and hoisting. The question of “What is the difference between var and let?”, or “What is the difference between let and const?”, are ones that are often asked to gauge ones knowledge of fundamental JavaScript. As such, one must fully understand these terms and their differences. I will begin by describing scope and hoisting, as these are key principles of these variable declarations.

Scope

Scope can be defined as a value that determines the accessibility of variables. Variables are defined within a function have what is called ‘local’ scope, and are only accessible within that function (in between the curly braces {}). A variable defined outside of a function is know to have ‘global’ scope. In declaring a variable outside of a function, on a global level, all functions and scripts within your JavaScript file can access it.

LOCAL
function myFunction() {
  let food = pizza;
  // the food variable is accessible within this function
}
// outside of the function, 'food' will not be accessible
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
GLOBAL
let food = donuts;
// here, the 'food' variable is declared outside of the function
function mySecondFunction() {
  food = sushi;
  // as 'food' was declared globally in this case, it can be     accessed from within the function
}

Hoisting

Hoisting is JavaScript’s default behavior of moving all declarations to the top of the current scope, in doing so, “hoisting” them.

console.log(city);
var city = "New York City";
// Output: Undefined

The issue with hoisting is that only the variable declarations are hoisted, and not the actual values that have been assigned. Your script will recognize that the variable exists, but will not have a value for it. This can lead to some pesky, sometimes hard to fix bugs in your code. You may see that the value is undefined, and be expecting another type of error, or vice versa, as a result of hoisting. (If the variable was declared with ‘let’ instead, you would receive a ‘ReferenceError’ as opposed to ‘undefined’, which would be a much more digestible error message, more to be discussed in the ‘let’ section)

var, let, const

After understanding the concepts of scope and hoisting, it will be much easier to differentiate between the types of variable declarations.

‘var’: The oldest of these declarations is ‘var’. Prior to ES6, var was the only way to declare variables. Variables declared with the var keyword can be mutated, or reassigned values, and can be accessed in scopes outside of the one it was assigned. In doing so, ‘var’ is uniquely hoisted in this way, causing the errors described above with hoisting.

‘let’: The declaration that is closest to the older ‘var’ is ‘let’. Variables declared with ‘let’ can also be reassigned, the key difference being that variables declared with ‘let’ have block scope, as in, they can only be accessed within a block of code(in between the {}s), and inner blocks, that it was declared. Variables declared with ‘let’ have a strictly local, block scope, and prevent the issues of hoisting that may arise with the use of ‘var’.

let dog = "Spot";
dog = "Fido";
console.log(dog) // "Fido"

‘const’: The final type of variable declaration is ‘const’. This type of declaration is one that shares many similarities with ‘let’, the only difference being that once a variable is assigned a value with ‘const’, that value cannot be reassigned. This type of declaration is best used in cases that a value should never be reassigned, or is unchanging throughout your application. (One workaround of this is that objects declared with ‘const’ can have their properties updated)

const city = "New York City"
city = "San Francisco" // error : Assignment to constant variable.

In conclusion, it is best to stick with the newer declarations of ‘let’ and ‘const’, depending on the application, so as to avoid hoisting issues and the intrinsic downfalls of having a globally accessible variable. As long as scope is kept in mind, using ‘let’ and ‘const’ are perfect ways to declare variables.