Question 181963 in Javascript Question posted in
A very good W3school tutorial can be found here.

Destructuring assignment for dict with default values in JavaScript

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?

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search