Let and Const

There are now two new ways to declare variables in JavaScript:let and const.

Up until now, the only way to declare a variable in JavaScript was to use the keywordvar. To understand whyletandconstwere added, it’s probably best to look at an example of when usingvarcan get us into trouble.

Take a look at the following code. What do you expect to be the output from running getClothing(false)?

function getClothing(isCold) {
  if (isCold) {
    var freezing = 'Grab a jacket!';
  } else {
    var hot = 'It’s a shorts kind of day.';
    console.log(freezing); // undefined
  }
}

Hoisting

Hoisting is a result of how JavaScript is interpreted by your browser. Essentially, before any JavaScript code is executed, all variables are "hoisted", which means they're raised to the top of the function scope. So at run-time, thegetClothing()function actually looks more like this…

function getClothing(isCold) {
  var freezing, hot;
  if (isCold) {
    freezing = 'Grab a jacket!';
  } else {
    hot = 'It’s a shorts kind of day.';
    console.log(freezing);
  }
}

let and const

Variables declared withletandconsteliminate this specific issue of hoisting because they’re scopedto the block, not to the function. Previously, when you usedvar, variables were either scoped_globally_or_locally_to an entire function scope.

If a variable is declared usingletorconstinside a block of code (denoted by curly braces{ }), then the variable is stuck in what is known as the temporal dead zone until the variable’s declaration is processed. This behavior prevents variables from being accessed only until after they’ve been declared.

What do you expect to be the output from running getClothing(false) ?

function getClothing(isCold) {
  if (isCold) {
    const freezing = 'Grab a jacket!';
  } else {
    const hot = 'It’s a shorts kind of day.';
    console.log(freezing); // ReferenceError: freezing is not defined
  }
}

Rules for using let and const

letandconstalso have some other interesting properties.

Variables declared with let can be reassigned, but can’t be redeclared in the same scope.
Variables declared with const must be assigned an initial value, but can’t be redeclared in the same scope, and can’t be reassigned.

let instructor = 'James';
instructor = 'Richard';
console.log(instructor); // Richard

Use cases

The big question is when should you useletandconst? The general rule of thumb is as follows:

use let when you plan to reassign new values to a variable, and
use const when you don’t plan on reassigning new values to a variable.

Sinceconstis the strictest way to declare a variable, we suggest that you always declare variables withconstbecause it'll make your code easier to reason about since you know the identifiers won't change throughout the lifetime of your program. If you find that you need to update a variable or change it, then go back and switch it fromconsttolet.

That’s pretty straightforward, right? But what aboutvar?

What about var?

Is there any reason to usevaranymore?Not really.

There are some arguments that can be made for usingvarin situations where you want to globally define variables, but this is often considered bad practice and should be avoided. From now on, we suggest ditchingvarin place of usingletandconst.

2 Let and Const