Es6 Object Destructuring Default Parameters

ES6 Object Destructuring Default Parameters

Yes. You can use "defaults" in destructuring as well:

(function test({a = "foo", b = "bar"} = {}) {  console.log(a + " " + b);})();

Javascript Object destructuring and default parameters combined

That syntax indeed uses Object Destructuring in order to extract default values from the parameter object. There are some examples in the Mozilla documentation that helps us understand the trick, check this out:

var {a = 10, b = 5} = {a: 3};
console.log(a); // 3
console.log(b); // 5

A possible disadvantage of your example is that the createUser method ignores all other values of the parameter object and always returns an object that contains only age and name. If you want to make this more flexible, we could use Object.assign() like this:

const createUser = (o) => Object.assign({ age: 1, name: 'Anonymous' }, o);

In this case, the user created will be an object that merges the parameter object with the default values. Note now that the default values are in the method body. With this method we can create users that contain other properties, example:

const superman = createUser({ name: 'Superman', type: 'superhero' });
console.log(superman);
// output: {age: 1, name: "Superman", type: "Superhero"}

ES6 destructuring object assignment function parameter default value

If you use it, and call the function with no parameters, it works:

function drawES6Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {}) {  console.log(size, cords, radius); // do some chart drawing}
drawES6Chart();

ES6 Object Destructuring Default Values for Nested Parameters

Sound like you were confusing destructuring with default values. Your syntax destructures an argument object, but doesn't actually introduce any parameter identifiers. There is no shops variable in your function scope.

I'll assume that you actually wanted to introduce cakeShop and pieShop variables, and provide them with defaults. To do that, you'd write

function mapStateToProps({ shops: { cakeShop = {}, pieShop = {} }) {
// short for             { shops: { cakeShop: cakeShop = {}, pieShop: pieShop = {} }) {
// parameter names (that will be bound):      ^^^^^^^^                ^^^^^^^
  return {
    CakeShopName: cakeShop.Name,
    PieShopName: pieShop.Name
  }
}

You might also use

function mapStateToProps({ shops: { cakeShop: {name: CakeShopName} = {}, pieShop: {name: PieShopName} = {} }) {
  return {CakeShopName, PieShopName};
}

ES6 default parameters with destructured object as second parameter referencing first parameter

I figured out what I was doing wrong. I was using colons to provide default values to the destructured object instead of the assignment variable.

Here is an example of the correct way to pass default values to a destructured object in a function's parameters:

const validation = {
  validateForm(form, {
    btn = form.find('button'),
    action = null,
    displayErrInline = form.attr('validate') === 'inline',
    disableValidation = false
  }) {
    // do stuff
  }
};

Optionally, I can assign an empty object (= {}) as the default value for the second argument to avoid errors if no second parameter is passed.

ES6 Partial Object Destructuring Default Parameters In A Separated Object

You won't be able to do it directly in the parameter, but you can inside the function..

eg..

import {defaultParameters} from ./utils.js

myFunction = function(params = {}){
   const {a, b} = {...defaultParameters, ...params};
   console.log(a,b);
}

Object destructuring assignment with default value of itself

Create an object with the original values (the defaults), and spread the config into it, overriding the default values, and then destructure it:

let foo = 1, bar, baz = 'Hello';

const config = { foo: 42 };

({ foo, bar, baz } = { foo, bar, baz, ...config });

console.log({ foo, bar, baz });

How to handle nested default parameters with object destructuring?

The generic pattern for destructuring object properties is

{ … , propertyName: target = defaultInitialiser, … }

(when the property name is exactly the same as the target variable identifier we can join them).

But target is not only for variables, it can be any assignment target - including nested destructuring expressions. So for your case (3) you want to use exactly the same approach as with (1) on the top level of the parameter - default initialise the property with an empty object and destructure its parts:

function fn3({foo = 'Foo', bar: {quux = 'Quux', corge = 'Corge'} = {}} = {}) {
  console.log(foo, quux, corge);
}

Notice that there is no bar variable when you destructure that property. If you want to introduce a bar variable for the property as well, you could repeat the property name and do

function fn3({foo = 'Foo', bar, bar: {quux = 'Quux', corge = 'Corge'} = {}} = {}) {
  console.log(foo, bar, quux, corge);
}

How to destructure option argument with all default values in ES6?

Yes, you just have to provide a default value for the complete argument:

function myFunction({option1 = true, option2 = 'whatever'} = {}) {
//                                                         ^^^^
    console.log(option1, option2);
    // do something...
}

---

Related Topics