ES6 Object Destructuring Default Values for Nested Parameters

Question

I'm using es6 object destructuring to provide default parameters to a function.

function mapStateToProps({ shops: { cakeShop: {}, pieShop: {} }) {
  return {
    CakeShopName: shops.cakeShop.Name,
    PieShopName: shops.pieShop.Name
  }
}

The problem with the above is that if I call

mapStateToProps({})

The code throws Cannot read property 'Name' of undefined. The nested objects on shops are not set to their default values and the code has a null reference.

How can I make sure that the nested objects within shops are being set to the right default value, even if shops itself is defined?

I don't think you can do that with destructuring, it works only if you are sure... — n00dl3
– n00dl3, Commented Mar 17, 2017 at 12:01
Sound like you were confusing destructuring with default values. Your syntax destructures an argument object, but doesn't actually introduce any parameter identifiers. — Bergi
– Bergi, Commented Mar 17, 2017 at 12:57

Bergi · Accepted Answer · 2017-03-17 13:02:41Z

14

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};
}

answered Mar 17, 2017 at 13:02

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

glcheetham Over a year ago

This is right. As far as I can see, this is the same as @estus answer but with cleaner syntax (without the extra two = {} at the end?)

Bergi Over a year ago

@glcheetham Those defaults are needed when you want to be able to call the function with an object that has no shops property or without any argument at all.

Estus Flask · Accepted Answer · 2017-03-17 12:09:09Z

7

To handle default values for nested objects, it should be

function mapStateToProps({ shops: { cakeShop = {}, pieShop = {} } = {} } = {}) {
...
}

answered Mar 17, 2017 at 12:09

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

4 Comments

glcheetham Over a year ago

This works but now shops is undefined within the function scope. What if I need to access alot of props on shops?

Estus Flask Over a year ago

The code in the question doesn't explain that. cakeShop, etc can be used as cakeShop.Name. If you really need shops then don't use param destructuring and do const { cakeShop = {}, pieShop = {} } = shops instead. You cannot have both shops and cakeShop from param destructuring at the same time.

Dude Over a year ago

you can: {shops, shops: { cakeShop = {}, pieShop = {} } = {} } = {} - keep in mind that if e.g. cakeShop is null, false or 0 your default will be set

Estus Flask Over a year ago

@Dude Defaults are applied to undefined only. It's the opposite, if a value can be null then defaults won't be applied, if they are desirable then destructuring is unsuitable in this case.

JohnnyQ · Accepted Answer · 2017-03-17 17:00:30Z

1

I know this question is about destructuring but for anyone interested I'm leaving another option here using lodash or underscore:

function mapStateToProps(shops) {
  _.defaultsDeep(shops, {
    cakeShop: {
      Name: "Kiki's CakeShop"
    }, 
    pieShop: {}
  })

  return {
    CakeShopName: shops.cakeShop.Name, // defaults to "Kiki's CakeShop"
    PieShopName: shops.pieShop.Name // undefined if not specified
  }
}

answered Mar 17, 2017 at 17:00

JohnnyQ

5,1976 gold badges52 silver badges66 bronze badges

Collectives™ on Stack Overflow

ES6 Object Destructuring Default Values for Nested Parameters

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related