Why is bracket notation approved but dot notation isn't?

the express code challenge from the Learn Express module

In this code challenge exercise you have to access an object with objects and send back one specifically requested battlefield:

const battlefields = {
  fortSumter: {
    state: 'SC',
  },
  manassas: {
    state: 'VA',
  },
  gettysburg: {
    state: 'PA',
  },
  antietam: {
    state: 'MD',
  }
}

My solution was:

const battlefield = battlefields.battlefieldName.;
  if (battlefield) {
    res.send(battlefield);
  } else {
    res.status(404).send();
  }

It threw an error. Eventually I asked for the solution, and that was:

const battlefield = battlefields[battlefieldName];
  if (battlefield) {
    res.send(battlefield);
  } else {
    res.status(404).send();
  }

Can someone explain why you can’t use dot-notation?

In the object.property syntax, the property must be a valid JavaScript identifier.

battlefieldName is a variable holding a string, the string is not a valid identifier. So you have to use associative array notation (the square brackets)

useful documentation:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors

Thanks for your reply. I read the documentation you linked, but I’m still not entirely sure I understand it.

The definition of an identifier according to MDN is:
An identifier is a sequence of characters in the code that identifies a variable, function, or property.

In dot-notation (quote MDN again):
In the object.property syntax, the property must be a valid JavaScript identifier.

So the constant battlefieldsName refers to/contains a string. But shouldn’t the constant itself be counted as an identifier?

No, because a variable is just a placeholder/label. In the end, the string is then used, which is not a valid identifier. Which is what matters.

doing object.property, property is not a variable. Its actually a valid identifier.Thus we can use dot notation