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:

1. the syntax only assigns destructuring values to data / backgroundColor / lineColor / textColor / areaTopColor / areaBottomColor, not including colors.
2. 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?

Answer 1

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.