Destructuring assignment for dict with default values in JavaScript

Question

I saw a JS syntax as following:

export const ChartComponent = props => {
    const {
        data,
        colors: {
            backgroundColor = 'white',
            lineColor = '#2962FF',
            textColor = 'black',
            areaTopColor = '#2962FF',
            areaBottomColor = 'rgba(41, 98, 255, 0.28)',
        } = {},  // what is that curly brace?
    } = props;
    ...
}

I've read the destructuring assignment, but I still don't know what the curly braces do?

It seems a default value for colors, but I don't know why.

As far as I know:

the syntax only assigns destructuring values to data / backgroundColor / lineColor / textColor / areaTopColor / areaBottomColor, not including colors.
The destructuring variables (backgroundColor / lineColor / textColor / areaTopColor / areaBottomColor) already have their own default values.

Is the curly braces for color necessary? What does it do?

default if undefined https://stackoverflow.com/questions/49233891/destructuring-assignment-default-value — cmgchess, Jun 04 '23 at 06:33

score 4 · Accepted Answer · answered Jun 04 '23 at 06:39

The = {} is there to cover for one edge case:

If you DO have a props value that is an object, but it DOES NOT have a property named colors or the property is there but IS NOT a destructurable object.

For example:

props = { data: 0}

const {
    data,
    colors: {
        backgroundColor = 'white',
        lineColor = '#2962FF',
        textColor = 'black',
        areaTopColor = '#2962FF',
        areaBottomColor = 'rgba(41, 98, 255, 0.28)',
    },  // no default value provided
} = props;

You would have:

TypeError: Right side of assignment cannot be destructured

In this context, {} is just an empty object, used as a default value (you could have used any other object value). It will be used in case no destructurable object can match a property with name colors.

The error i get seems to differ from what you've added `Uncaught TypeError: Cannot read properties of undefined`, thats what i get when no `{}` exists — Alexander Solonik, Jun 04 '23 at 14:41

score 2 · Answer 2 · answered Jun 04 '23 at 06:54

the answer given by @Rodrigo Rodrigues explains the reason. I will give an example

Lets say the props doesn't have colors. Then in the destructuring colors will be undefined and it looks like trying to destructure the properties backgroundColor etc. from an undefined. Even though you have the default values for backgroundColor it can't destructure the undefined.

const props = {
  data: [1, 2, 3, 4, 5]
}

const {
  data,
  colors: {
    backgroundColor = 'white',
    lineColor = '#2962FF',
    textColor = 'black',
    areaTopColor = '#2962FF',
    areaBottomColor = 'rgba(41, 98, 255, 0.28)',
  },
} = props

console.log(backgroundColor)

Now with the {} it handles this case and assigns a default {} when colors in not found in props. After that it tries to destructure that empty object which is possible. Since then backgroundColor is not present in the {} it will be assigned with the default value for backgroundColor which is white

const props = {
  data: [1, 2, 3, 4, 5]
}

const {
  data,
  colors: {
    backgroundColor = 'white',
    lineColor = '#2962FF',
    textColor = 'black',
    areaTopColor = '#2962FF',
    areaBottomColor = 'rgba(41, 98, 255, 0.28)',
  } = {},
} = props

console.log(backgroundColor)

Destructuring assignment for dict with default values in JavaScript

2 Answers2