ES6 new additions- let and const, Template Literal

The new changes brought to the JavaScript programming language.

Syntax

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 keyword var. To understand why let and const were added, it’s probably best to look at an example of when using var can get us into trouble.

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

Hoisting

Hoisting is a result of how JavaScript is interpreted by your browser. Essentially, before any JavaScript code is executed, all variables declared with var are "hoisted", which means they're raised to the top of the function scope.

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

let and const

Variables declared with let and const eliminate this specific issue of hoisting because they’re scoped to the block, not to the function. Previously, when you used var, variables were either scoped globally or locally to an entire function scope. If a variable is declared using let or const inside 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.

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

Rules for using let and const

let and const also 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.

Use cases

The big question is when should you use let and const? 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.

Since const is the strictest way to declare a variable, we suggest that you always declare variables with const because 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 from const to let.

What about var? Is there any reason to use var anymore? Not really. There are some arguments that can be made for using var in situations where you want to globally define variables, but this is often considered bad practice and should be avoided. From now on, we suggest ditching var in place of using let and const.

Prior to ES6, the old way to concatenate strings together was by using the string concatenation operator (+).

const student = {
  name: 'Richard',
  guardian: 'Mr. Kelvin'
};

const teacher = {
  name: 'Mrs. Mathur',
  room: 'N231'
}

let message = student.name + ' please see ' + teacher.name + ' in ' + teacher.room + ' to pick up your report card.';
Returns: Richard please see Mrs. Mathur in N231 to pick up your report card.

This works alright, but it gets more complicated when you need to build multi-line strings.

let note = teacher.name + ',\n\n' +
  'Please excuse ' + student.name + '.\n' +
  'He is recovering from the flu.\n\n' +
  'Thank you,\n' +
  student.guardian;

Returns:
Mrs. Mathur,

Please excuse Richard.
He is recovering from the flu.

Thank you,
Mr. Kelvin

However, that’s changed with the introduction of template literals (previously referred to as "template strings" in development releases of ES6).

NOTE: As an alternative to using the string concatenation operator ( + ), you can use the String's concat() method, but both options are rather clunky for simulating true string interpolation

Template Literals Template literals are essentially string literals that include embedded expressions. Denoted with backticks ( ) instead of single quotes ( '' ) or double quotes ( "" ), template literals can contain placeholders which are represented using ${expression}. This makes it much easier to build strings.

let message = `${student.name} please see ${teacher.name} in ${teacher.room} to pick up your report card.`;
Returns: Richard please see Mrs. Mathur in N231 to pick up your report card.