why is [property]: in brackets?

Question

toggleGuestPropertyAt = (property, indexToChange) =>
    this.setState((prevState) => {
      return {
        guests: prevState.guests.map((guest, index) => {
          if (index === indexToChange) {
            return {
              ...guest,
              [property]: !guest[property]
            }
          }
          return guest
        })
      }
    })

    toggleConfirmationAt = index =>
      this.toggleGuestPropertyAt("isConfirmed", index)

    toggleEditingAt = index =>
      this.toggleGuestPropertyAt("isEditing", index)

I understand why in !guest[property] property is inside [] but why is it also inside brackets before the colon? ( [property]: ... )

Answer 1 · 2020-08-25T17:53:46Z

August 25, 2020 5:53pm

Hi Trevor,

The brackets (in this instance) allow for a value to replace the property variable as the “key” of the key/value pairing.

In this case, the programmer doesn’t know beforehand which property will be toggled.

But when the user performs the action that causes the toggleGuestPropertyAt function to be called, the property that needs to be toggled will be passed in as an argument.

Let’s say (for example) the property is something like hasArrived (I haven’t watched the video so I don’t know what the actual properties are). hasArrived would be a property that stores a Boolean value. As the user perhaps we click some button on the interface when a particular guest shows up. That button leads to toggleGuestPropertyAt being called, and hasArrived is passed in as an argument (along with the index number). Well, when the interpreter gets to the part of the code where the guest objects are being mapped over, we need some way to change the value of the key targeted. You understand that part. It’s the !guest[property], but we also need a way to target the correct key. If we hardcoded the property hasArrived, as in:

app.js

return {
    ...guest,
    hasArrived: !guest[property]
}

... then if we need to toggle a different property, out code won’t work correctly.

But if we don’t wrap property in brackets, then the interpreter thinks we want to change the value of a key named property (but a key with the name property doesn’t exist).

The brackets signify to the interpreter that the property we’re targeting needs to be subbed in using the “property argument” passed into the function.

That’s a long explanation, but hopefully it helps you to understand the purpose of the brackets.

Keep at it coder!

Welcome to the Treehouse Community

Looking to learn something new?

Trevor Maltbie

Trevor Maltbie

why is [property]: in brackets?

1 Answer

Brandon White

Brandon White

Zaid Khan

Zaid Khan