Use Let and Const, Not Var

If you’re like me, you started out learning JavaScript using var. Var was king and I never wanted to let go of it. However, with the introduction of ES6 (JavaScript 2015) that all changed. Let and const were introduced and, in essence, have made it unnecessary to use var. Here, I will explain the difference between the three and why var can be detrimental to use.

First, I would like to define a few things that we will need to understand. One of the main differences that separates these variable declarations is Scope. In our case, we will be referencing scope as the execution context that each variable is able to be used in, but if you need a refresher go here.

Var

Var declarations are globally scoped if used in a global context and locally scoped if used within a function. When var is declared in the global scope, it is available for use in the whole window.

var greeting = "Hello Globe";

So, if we define a global variable like we did above, our output when called on the window would look like it does below.

console.log(window.greeting) // "Hello Globe"

Let

Now that let has been introduced, it has some similarities, but key differences to var. Similar to var, if let is declared in the global scope, it will retain it’s global context. Though, there is a small difference when used in this case. As we saw with var above, when defined in the global scope it’s properties will be added to the global window; if defined using let it will not. So, if we do exactly what we did above, we can expect a different output.

let greeting = "Hello Globe";
console.log(window.greeting) // undefined

After this, the majority of the difference between var and let come from what is called a Block. “The block statement is often called a compound statement in other languages. It allows you to use multiple statements where JavaScript expects only one statement. Combining statements into blocks is a common practice in JavaScript.” This MDN definition is a little confusing and may be easier to visualize.

function varAndLet() {
  var hey = "hey"; // function block
  let yo = "yo"; // function block
}

Here, var and let are identical when used within the block of function varAndLet.

However, there is a difference when used as they are below.

function letExample() {
  // *i* is not available here
  for (let i = 0; i < 5; i++) {
    // *i* is only available within the block of this for loop
    // there is a separate *i* variable for each iteration
  }
  // *i* is not available here
}

vs.

function varExample() {
  // *i* is available here
  for (var i = 0; i < 5; i++) {
    // *i* is available to the whole varExample function
  }
  // *i* is available here
}

You can see that var is accessible within the entire scope of the function varExample, whereas let is accessible only within the block of the for loop within the function letExample.

There is also one other difference and that comes when re-declaring variables. I think this is the biggest concern with var. Var will allow you to re-declare the same variable in the same scope. On the other hand, let will not.

let me = "Ryan";
let me = "Keegan"; // SyntaxError: Identifier "me" has already been declared

vs.

var me = "Ryan";
var me = "Keegan"; // "me" is replaced and now would output "Keegan" if logged

I can see this becoming a problem when jumping into a code base that you are not familiar with or even in the depths of your own code. Using var you can easily and accidentally end up redefining an important variable. If you use let you will get the advantageous SyntaxError to let you know to create a new variable name (pun intended).

Significance

Why are these differences significant? It seems as though the general purpose for the introduction of let was to free up memory. As we saw before, let is block scoped, meaning the variables are existent only where they are needed, saving memory and reducing runtime.

Const

When digging into const, I want to start by debunking a common belief. People often think that when they use const they are creating an immutable declaration. The name of the const keyword is definitely misleading. In JavaScript, a constant does NOT mean the variable is constant necessarily. It is closer to meaning “one-time assignment.” This is a subtle, but important distinction. For example, we can see that an object or arrayed defined with const can change properties.

const settings = {
  bestBlogOnTheInternet: "https://medium.com/@ryanfarney"
}
settings.bestBlogOnTheInternet: "http://highscalability.com/start-here/"

Not sure who would want to change this settings object from the initial URL… Whatever, bestBlogOnTheInternet is too long of a variable name anyways.

Queen

I digress. The above code block would work and reassign settings.bestBlogOnTheInternet to the new URL.

Similarly, we can see property changes happening in an array.

const arr = [1, 2, 3]
arr.push(4)
arr.shift()
console.log(arr) // [2, 3, 4]

However, when we are not dealing with arrays or objects, it is possible to create true constants. If a primitive value (string, number or boolean) is assigned to a constant variable, that variable will be a true constant. When we declare “PI” to be a constant variable, any attempt to assign a new value to “PI” will fail because it is a constant variable and because we cannot declare a new variable with the same identifier as an existing constant variable.

const PI = 3.141592653589793
PI = 0
PI++
let PI = "hey"
var PI = 0
const PI = "ain't nobody messing with my pi"

If you really are looking to make an object truly immutable, I would suggest looking into Object.freeze or Facebook’s Immutable.js.

Other than this notion of consistency that const provides, it works similarly to let. Both const and let declare variables with block scope rather than function scope.

Conclusion

No need to use var.

Resources

Constant Variables in JavaScript, or: When "const" Isn't Constant

https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var-to-declare-a-variable-in-jav/11444416#11444416