# JS Tip of the Day: Default Parameters with Destructuring

**URL:** https://forum.kirupa.com/t/js-tip-of-the-day-default-parameters-with-destructuring/643134
**Category:** web dev
**Created:** [April 2, 2020, 12:37pm UTC](https://forum.kirupa.com/t/js-tip-of-the-day-default-parameters-with-destructuring/643134 "2020-04-02T12:37:42Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [April 2, 2020, 12:37pm UTC](https://forum.kirupa.com/t/js-tip-of-the-day-default-parameters-with-destructuring/643134/1 "2020-04-02T12:37:42Z")

</div>

**Default Parameters with Destructuring**  
Version: ES2015  
Level: Intermediate

When destructuring, you can specify default values for those that may not exist within the destructured object.

```javascript
let {one, two, three = 3} = { one: 1, two: 2 };
console.log(one, two, three); // 1 2 3

```

Defaults can also be used in function parameters.

```javascript
function countToThree(one, two, three = 3) {
    console.log(one, two, three);
}
countToThree(1, 2); // 1 2 3

```

And parameters can be destructured.

```javascript
function countToThreeIn({ one, two, three }) {
    console.log(one, two, three);
}
let values = { one: 1, two: 2 };
countToThreeIn(values); // 1 2 undefined

```

And destructured values in parameters can have defaults.

```javascript
function countToThreeIn({ one, two, three = 3 }) {
    console.log(one, two, three);
}
let values = { one: 1, two: 2 };
countToThreeIn(values); // 1 2 3

```

And parameters as a whole, even when destructuring, can have defaults!

```javascript
let values = { one: 1, two: 2 };
function countToThreeIn({ one, two, three = 3 } = values) {
    console.log(one, two, three);
}
countToThreeIn(); // 1 2 3

```

One thing to bear in mind, is that when a default is supplied to a parameter, even if destructured, that default will only apply if the argument for that parameter is not specified or `undefined`. The default would not get applied to the destructuring otherwise. If an argument is supplied, its up to the defaults within the destructuring to provide default values.

```javascript
let values = { one: 1, two: 2 };
function countToThreeIn({ one, two, three = 3 } = values) {
    console.log(one, two, three);
}
countToThreeIn(); // 1 2 3
countToThreeIn({}); // undefined undefined 3

```

For this reason, parameter defaults for destructured parameters are usually defined as empty objects with defaults handled in the destructuring. This way, no argument means an empty object for the parameter which in turn means using all of the defaults in the destructuring.

```javascript
function countToThreeIn({ one = 1, two = 2, three = 3 } = {}) {
    console.log(one, two, three);
}
countToThreeIn(); // 1 2 3
countToThreeIn({}); // 1 2 3
countToThreeIn({ two: 'two' }); // 1 two 3

```

More info:

- [Default parameters on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters)
- [Destructuring on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)