JavaScript对象解构中colors后{}的作用及必要性问询

我在查看JS语法时看到如下代码：

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

我已阅读解构赋值相关文档，但仍不清楚上述代码中colors后跟随的{}的作用。它似乎是colors的默认值，但我不理解原因：

• 该解构仅为data、backgroundColor、lineColor、textColor、areaTopColor、areaBottomColor赋值，并未包含colors变量；
• 被解构的内部属性已各自设置了默认值。

请问该{}是否必要？具体作用是什么？

解答 #

这个{}是必须的，核心作用是防止报错：当props里没有colors属性，或者colors的值是undefined时，它会给colors兜底一个空对象，让内部的属性解构能正常进行，进而使用各自的默认值。

举个直白的对比：

• 要是没写这个= {}，当props.colors不存在时，JS会尝试从undefined上解构backgroundColor等属性，直接抛出Cannot destructure property 'xxx' of 'undefined'的错误。
• 加了= {}之后，当props.colors不存在，就会用空对象代替它，内部属性解构时因为找不到对应值，就会使用自己的默认值，代码能正常运行。

测试代码示例：

// 无默认空对象，直接报错
const { colors: { backgroundColor = 'white' } } = {};

// 有默认空对象，正常得到backgroundColor = 'white'
const { colors: { backgroundColor = 'white' } = {} } = {};

内容的提问来源于stack exchange，提问作者Xaree Lee