Welcome back to my weekly Airbnb JavaScript style guide explainer. Airbnb, the online marketplace for housing rentals, has a high quality and ‘mostly reasonable’ style guide for JavaScript, a programming language that adds dynamic behaviors to web browsers. Some of the topics in the guide are a bit advanced for beginners. This “Explain Like I’m 50” (ELI50) series will act as a plain English companion-guide to the Airbnb style guide, because good design principles shouldn’t be out of anyone’s reach.

This post will cover section 2 on references, or why to avoid using var.


Section 2: References

2.1: Use const for all of your references; avoid using var.

There are three reserved words you can use to create variables with JavaScript. They are var, const, and let. When you are defining a variable that won’t change, like Pi, use const which stands for constant.

const pi = 3.1415926535;

This practice helps prevent bugs and makes your intent clearer, increasing readability.

What the heck is a reserved word?

Reserved words are the words of power that make up JavaScript like if, new, and for. These words have fixed meanings and aren’t allowed to be redefined by the programmer (which means you can’t make a variable called ‘if’, for instance.) The three reserved words we’re talking about in this post are let, const, and var.

2.2: If you must reassign references, use let instead of var.

Using const for variables that won’t change makes sense, but why use let over var? At the risk of oversimplifying, let can be used for almost everything that var can, while also avoiding unintentional bizarre behavior as described in this article from Vegibit.

2.3: Note that both let and const are block-scoped.

This is one of the most important differences between the preferred reserved words, let and const, and the less preferred reserved word, var. Scope refers to what something can see. If I define a variable with let outside a function and then define a variable with the same name inside the function the variable outside the function won’t change because it can’t see it.

let myName = 'John'; // => 'John'
function() {
  let myName = 'Khanthulhu'; // => 'Khanthulhu'
}
myName; // => 'John'

The first myName is outside of the function’s scope and the function doesn’t see it. The function can only see the myName variable inside itself. This means we’re working with two different variables which happen to have the same name but are in different scopes. However, if we changed let to var then myName can be changed from inside the function. This is because var creates the variables in the global scope.

var myName = 'John'; // => 'John'
function() {
  var myName = 'Khanthulhu'; // => 'Khanthulhu'
}
myName; // => 'Khanthulhu'

Although there are other reasons to avoid var, how it handles scope is probably the biggest one.


Why Should I Care?

The changes recommended in this section are easy to implement, especially with the use of a linter, makes your code more expressive, and can save you loads of headaches in the future.


Next Up: Objects

Next Saturday I’ll explain what objects are, how you should be making them, and how you should be working with them.

If you learned something from this post, have some constructive criticism or just want to say hi, leave a comment below.