Best of Modern JavaScript — Parameters and Spread
Tags: javascript, webdev
Published: 2020-07-30 00:08:04

---
title: Best of Modern JavaScript — Parameters and Spread
published: true
date: 2020-07-25 00:34:59 UTC
tags: javascript,webdev
canonical_url: https://thewebdev.info/2020/07/25/best-of-modern-javascript%e2%80%8a-%e2%80%8aparameters-and-spread/?utm_source=rss&utm_medium=rss&utm_campaign=best-of-modern-javascript%25e2%2580%258a-%25e2%2580%258aparameters-and-spread
---

Since 2015, JavaScript has improved immensely.

It’s much more pleasant to use it now than ever.

In this article, we’ll look at working with objects and array parameter destructuring and the spread operator.

### Optional Parameters

We can create optional parameter by setting the parameter to `undefined` to indicate that it’s optional.

For example, we can write:

```
function foo(x, optional = undefined) {
  //···
}

```

We set `optional` to `undefined` to indicate that it’s optional.

### Required Parameters

If we have required parameters, there’s no good way to ensure that they’re sweet with ES5.

For instance, we may have to do something like:

```
function foo(required) {
  if (required === undefined) {
    throw new Error();
  }
  //···
}

```

or we can write:

```
function foo(required) {
  if (arguments.length < 1) {
    throw new Error();
  }
  //···
}

```

They aren’t very elegant.

However, we can improve this by writing with ES6:

```
function checkRequired() {
  throw new Error();
}

function foo(required = checkRequired()) {
  return required;
}

```

We assigned a function call to the parameter so that it runs when `required` is `undefined` .

It throws an error, so it’ll be obvious when it’s `undefined` .

This way, we can enforce the required parameters having a value.

### Enforcing a Maximum Number of Parameters

JavaScript has no way to control the number of parameters passed into the function.

However, we can do this easily with ES6 by checking the number of arguments passed in with the rest operator.

For example, we can write:

```
function foo(...args) {
  if (args.length > 2) {
    throw new Error();
  }
  //...
}

```

The rest operator returns an array, so we can check the length of it with the `length` property.

If there’re more parameters than we like, then we can throw an error.

We can also write:

```
function foo(x, y, ...empty) {
  if (empty.length > 0) {
    throw new Error();
  }
}

```

to ensure that we have no extra parameters.

### The Spread Operator

We can use the spread operator to spread array entries as arguments of a function call.

For instance, we can write:

```
Math.max(...[-1, 2, 3, 4])

```

This is the same as:

```
Math.max(-1, 2, 3, 4)

```

We can do the same with the `push` method.

For example, we can write:

```
const arr1 = [1, 2];
const arr2 = [3, 4];

arr1.push(...arr2);

```

The `arr2` is spread as argument of `push` .

The spread operator also works with constructors.

For example, we can write:

```
new Date(...[2020, 11, 25])

```

to spread an argument into the `Date` constructor.

The spread operator also works with arrays.

For instance, we can write:

```
[1, ...[2, 3], 4]

```

And we get `[1, 2, 3, 4]` returned.

We can use it to merge arrays into one.

For example, we can write:

```
const x = [1, 2];
const y = [3];
const z = [4, 5];

const arr = [...x, ...y, ...z];

```

We spread the `x` , `y` and `z` arrays into the array.

Then `arr` is `[1, 2, 3, 4, 5]` since the entries are spread into the new array.

### Conclusion

We can add optional and required parameters in various ways.

Also, we can use the spread operator to spread arrays in various places.

The post [Best of Modern JavaScript — Parameters and Spread](https://thewebdev.info/2020/07/25/best-of-modern-javascript%e2%80%8a-%e2%80%8aparameters-and-spread/) appeared first on [The Web Dev](https://thewebdev.info).