New operators and keywords in ES6 JavaScript

1) Let Keyword

Previously, using the var keyword in JavaScript caused problems in some cases. JavaScript by default moves all var declarations to the top of the scope, a process called hoisting.

Introducing let prevents hoisting and keeps the variable declaration to the nearest block.

Below is one issue:

function displayNames() {
  var name = "Joe";
  
  if(name.length > 0) {
    var name = "Sam";
    console.log(name); // output will be Sam
  }
  console.log(name); // output will be Sam. This is the same variable before if statement.
}

displayNames();


function displayNames() {
  let name = "Joe";
  
  if(name.length > 0) {
    let name = "Sam";
    console.log(name); // output will be Sam
  }
  console.log(name); // output will be Joe. This is a different variable than before if statement
}

displayNames();


2) Const Keyword

The const keyword is aligned with other programming languages, where we need to assign a constant value to a variable. We do this to get rid of magic numbers which are meaningless on their own.

Once declared, a const variable in JavaScript can't be reassigned a new value. Hence, const variables need to be initialised with a value.

The const keyword is scoped to the nearest block used.

const ALLOW_EDIT = false;
ALLOW_EDIT = true; // this throws an error

function getProducts(products) {
  if(ALLOW_EDIT) {
    ...
  }
}

3) Default parameter values

By assigning default parameter values to the function signature, we set a default value to the parameter and prevent undefined return types.

We can set a default parameter values with the following syntax:

function getProducts(products = []) {
  ...
}

So when we call getProducts(products) or getProducts(), both will return a number where the latter will return 0.

4) Named Option Parameters

Although adding an option parameter is a good pattern to add property based parameters to a function, it makes the function signature unclear; we just don't know how many arguments the option parameter contain.

Using named option parameters decreases the method signature ambiguity.

function displayProduct(product, { color, expiryDate }) {
  ...
  console.log("Color is: " + color);
  setExpiryDate(expiryDate);
  ...
}

We can also assign default parameters to the named option parameters to get the benefit of both them.

function displayProduct(product, { color, expiryDate } = {}) {
  ...
  console.log("Color is: " + color);
  setExpiryDate(expiryDate);
  ...
}

5) Rest Parameters

Variadic functions in JavaScript allows great flexibility in function calls. An example is:

displayProducts(shoe, jacket, pant);
displayProducts(shoe, jacket);
displayProducts(shoe);

We would then parse the parameters by using the arguments keyword.

function displayProducts() {
  for(let product in arguments) {
    _displayProduct(products[product]);
  }
}

The problem with the above is that it is unclear how many parameters the arguments contain, and if we add another argument to the method it will break the loop.

function displayProducts(targetDisplayElement) {
  ...
  for(let product in arguments) {
    _displayProduct(arguments[product]);
  }
}

A solution would be to use rest parameters which allows us to change the method signature and add more arguments as an array.

The format of the rest parameter is adding three colons front of the array-based argument's name:
...argument

function displayProducts(targetDisplayElement, ...products) {
  ...
  for(let product in products) {
    _displayProduct(products[product]);
  }
}
6) Spread Operators

So how can we change an Array object to a rest parameter, so that we can use it as a parameter inside a function?

An example is the code below:

var products = [product1, product2, product3, product4];

displayProducts(products); 
// here we want products to be a rest parameter not an Array

To solve this issue we can use the spread operator. It has the same format of the rest parameter, thus ...arguments.

var products = [product1, product2, product3, product4];

displayProducts(...products); 
// here we want products to be a rest parameter not an Array

By using the spread operator the Array will split into different elements.

Note that the rest and spread operators have the same syntax. However they serve different cases. Rest operator is used when we want to define a function. Spread operator is used when we want to invoke that function.

Show Comments