SyntaxError: missing name after . operator

SyntaxError: missing name after . operator (Firefox)
SyntaxError: Unexpected token '['. Expected a property name after '.'. (Safari)

The dot operator (.) is used for property access. You will have to specify the name of the property that you want to access. For computed property access, you might need to change your property access from using a dot to using square brackets. These will allow you to compute an expression. Maybe you intended to do concatenation instead? A plus operator (+) is needed in that case. Please see the examples below.

Property accessors in JavaScript use either the dot (.) or square brackets ([]), but not both. Square brackets allow computed property access.

const obj = { foo: { bar: "baz", bar2: "baz2" } };
const i = 2;

obj.[foo].[bar]
// SyntaxError: missing name after . operator

obj.foo."bar"+i;
// SyntaxError: missing name after . operator

To fix this code, you need to access the object like this:

obj.foo.bar; // "baz"
// or alternatively
obj["foo"]["bar"]; // "baz"

// computed properties require square brackets
obj.foo["bar" + i]; // "baz2"
// or as template literal
obj.foo[`bar${i}`]; // "baz2"

If you are coming from another programming language (like PHP), it is also easy to mix up the dot operator (.) and the concatenation operator (+).

console.log("Hello" . "world");

// SyntaxError: missing name after . operator

Instead you need to use a plus sign for concatenation:

console.log("Hello" + "World");

• Property accessors