3 Ways ES6 Helped Improve Function Performance
Published: 2023-03-10 14:38:05

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.

![Another example of "classic JavaScript logic"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/97kbjik1qxk61kidrlmd.jpg)
_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
}
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ize8b9l09fs1vuiqkrbn.jpg)

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](https://w3schools.com/react/react_es6_spread.asp)
- [JavaScript Rest vs Spread Operator](https://www.freecodecamp.org/news/javascript-rest-vs-spread-operators/)
- [An overview of what's new in ES6](https://exploringjs.com/es6/ch_overviews.html#overview-entry-parameter-handling)
- [What are Default Parameters in JavaScript?](https://www.scaler.com/topics/default-parameters-javascript/)
- [What is the Rest Operator in JavaScript?
](https://www.scaler.com/topics/rest-operator-in-javascript/)
- [Minefield!](https://www.dosgames.com/game/minefield/)
- [Classic JavaScript logic](https://www.reddit.com/r/ProgrammerHumor/comments/2iyrvx/classic_javascript_logic/)