Since its debut in 2015, ES6 has provided an expanded selection of tools for improving the accuracy of functions and minimizing the fallout of user error. It's also introduced a few game-changing operators that allow us to write less code, which makes it easier to parse what's happening in the code we do write. In this article, we'll explore three basic, yet key quality-of-life improvements new with ES6.

Quick example of what we're contending with

Default Values for Function Parameters

Prior to the advent of ES6, failure to pass one or more expected arguments to a function meant the function would always interpret them as undefined. This resulted in some less-than-ideal behavior, such as:

function multiplyNums(a, b, c) {
  return a * b * c;
}
console.log(multiplyNums(2, 3)) // prints => NaN

Because no value was passed in for c, the function returned an unintended result. Thus, the ability to specify a default value can help sidestep a lot of errors (or lack thereof--thanks a lot, JavaScript). Observe how the same function will work as intended, as long as a sensible default value is provided for c:

function multiplyNums(a, b, c = 1) {
  return a * b * c;
}
console.log(multiplyNums(2, 3)) // prints => 6

Rest Operator

Beginning a parameter name with the rest operator will pass the remainder of the arguments as a single array.

function allTheRest(a, ...b) {
  return [a, b];
}
console.log(allTheRest(1, 2, 3, 'a')) // prints => [1, [2, 3, 'a']

This way, a function can accept an indeterminate number of arguments. Functions set up in this manner are referred to as variadic functions.

But why pass arguments as an array? Why not just pass them all in as separate values? Doing so allows us to manipulate the passed-in data more effectively with the use of array methods. For example, if we know the value of the given arguments will always resolve to an array, we can choose to ignore certain elements using Array.prototype.slice().

The rest operator also helps avoid confusion when JavaScript fails to throw an error, as in the following shameful debacle:

function addNums(a, b) {
  return a + b;
}
console.log(addNums(2, 2, 2, 2, 2)) prints => 4

Spread Operator

Although both are defined using ..., the spread operator accomplishes the opposite task relative to the rest operator. Instead of compressing values into an array, the spread operator spreads arrays and objects out. That means it can be used to extract values from their containers, like so:

let phrase = ['Time', 'to', 'form', 'a', 'sentence'];
console.log(...phrase) prints => Time to form a sentence

As well as spread arrays into each other:

let nums = [1, 2, 3, 4, 5];
let moreNums = [6, 7, 8, 9, 10];
let allNums = [...nums, ...moreNums];
console.log(allNums) prints =>
[1, 2, 3, 4, 5,
6, 7, 8, 9, 10]

The spread operator also works when used on objects:

let squirrel = {
  eyes: 'bright',
  tail: 'bushy'
}

let raccoon = {
  eyes: 'masked',
  animal: true
}

let hybrid = {...squirrel, ...raccoon};

console.log(hybrid) prints =>
{
  eyes: 'masked',
  tail: 'bushy',
  animal: true
}

Note that overlapping properties, if they exist, will be overwritten by their values from the most recent passed-in object--so use with caution to avoid any unpleasant surprises. Although writing JavaScript can sometimes feel like navigating a minefield of potential errors-that-aren't-even-errors, the spread operator, along with the rest operator and default parameters, have helped make its landscape much more navigable.

References

• React ES6 Spread Operator
• JavaScript Rest vs Spread Operator
• An overview of what's new in ES6
• What are Default Parameters in JavaScript?
• What is the Rest Operator in JavaScript?
• Minefield!
• Classic JavaScript logic