Saturday, 31 August, 2019 UTC
Summary
In this article, we’ll cover the differences between
var, let, and const. You’ll also learn some prescriptive rules to know when to choose one over the other.With ES2016, two new ways to define variables were introduced with
let and const. Before that you could only use var to define variables. So… what’s the big idea? Why are three different ways to define variables?Before we can understand how
Function-scope vs Block-scope var and let/const differ we need to understand a computer science-y concept called scope.In JavaScript there’s two kinds of scope: function-scope and block-scope.
Function-scope
function myFn() { var foo = 'peekaboo!'; console.log(foo); // 'peekaboo!' } console.log(foo); // ReferenceError: foo is not defined Using
var, variables are function-scoped because their visibility is limited to the function. When you try to use it outside of the function, you’ll get an error. ⓘ About this sponsored banner
Block-scope
if (true) { var foo = 'peekaboo!'; let bar = 'i see u'; const baz = 'baby blue!'; console.log(foo); // 'peekaboo!'; console.log(bar); // 'i see u'; console.log(baz); // 'baby blue!'; } console.log(foo); // 'peekaboo!'; console.log(bar); // ReferenceError: bar is not defined console.log(baz); // ReferenceError: baz is not defined Notice the visibility of
foo isn’t limited by the if-statement block. However, both bar and baz are limited in visibility to the block of code.This concept of scope is the most prominent distinction between the old-fashioned
var and modern let/const. A block of code is the code between curly braces in JavaScript.
var There’s other nuances between
var and let/const so let’s explore a few code snippets to understand them better.var outside of a for-loop
// for-loop for (var i = 0; i < 3; i++) { console.log(i); } console.log(i); What do you think the output of this code is?
// 0
// 1
// 2
// 3
// 1
// 2
// 3
The variable
i is accessible outside of the for-loop. This is expected since variables defined with var are only inaccessible outside of a function definition.Redefining var
Using
var you can reassign it with a new value.function myFn() { var foo = 1; foo = 30; var foo = 101; console.log(foo); } myFn(); What’s the output of
myFn()? // 101
let In many ways
let is like a cousin of var. It has a lot of similarities but differentiates in ways that makes ES2016 a more modern-feeling language.let outside of a for-loop
// for-loop for (let i = 0; i < 3; i++) { console.log(i); } console.log(i); What do you think is the output?
// 0
// 1
// 2
// ReferenceError: i is not defined
// 1
// 2
// ReferenceError: i is not defined
Redefining let
Using
let you can reassign variables, but its syntax is more strict than var.function myFn() { let foo = 1; foo = 30; // let foo = 101; // 🙅♀️ can't use "let" keyword again foo = 101; console.log(foo); } myFn(); console.log(foo); What’s the output of
myFn()? // 101
// ReferenceError: foo is not defined
// ReferenceError: foo is not defined
const The keyword
const is an abbreviation for constant. Similar to let, it’s block-scoped, however, you can’t reassigned it.What do you think is the output of this code?
const myBoolean = true; if (myBoolean) { const turtles = [ 'leonardo', 'donatello', 'michaelangelo', 'raphael' ]; // turtles = turtles.concat('Shredder'); // 🙅♀️ this would throw an error console.log(turtles); } console.log(turtles); // ['leonardo', 'donatello', 'michaelangelo', 'raphael']
// ReferenceError: turtles is not defined
// ReferenceError: turtles is not defined
Items can still be added to a
Review const variable that points to an array or an object, because the const is not being reassigned in such case. You can learn more about that in this short post about let and const.See the table below for a breakdown.
| Keyword | Function vs Block-scope | Redefinable? |
|---|---|---|
var | function-scope | ✅ |
let | block-scope | ✅ |
const | block-scope | 🚫 |
In summary, it’s generally advisable to avoid using
var because function-scope isn’t as obvious as block-scope. It certainly seems that the intention of ES2016-2019 is to replace var with let/const since they encourage better coding practices.Generally, if you need to create a variable, use
const. However, if you know or think that you’ll need to reassign it (for-loops, switch statements, algorithm swapping) use let.