Skip to main content

How to Resolve "SyntaxError: Invalid shorthand property initializer" Error in JavaScript

The SyntaxError: Invalid shorthand property initializer is a common syntax error that occurs when you incorrectly use an equals sign (=) instead of a colon (:) to define a property inside an object literal.

This guide will clarify the fundamental difference between assignment (=) and object property initialization (:), show you why the error occurs, and explain the correct syntax for both creating objects and assigning properties.

The Core Problem: Assignment (=) vs. Property Initialization (:)​

In JavaScript, the equals sign and the colon have very distinct and non-interchangeable roles:

  • Equals Sign (=): This is the assignment operator. It is used to assign a value to a variable. 
    let myVariable = 'Hello'; // Correct: Assigning a value to a variable
  • Colon (:): This is the property initializer separator. It is used inside an object literal ({...}) to separate a property's key from its value. 
    let myObject = {
      myKey: 'Hello' // Correct: Separating a key from its value
    };

The "Invalid shorthand property initializer" error occurs when you mix these two concepts and use the assignment operator where the property separator is expected.

The Cause of the Error: Using = Inside an Object Literal​

Problem: this is the classic mistake. The code attempts to use the assignment operator (=) inside an object literal.

// Problem: Using '=' instead of ':' to define object properties.
let user = {
  name = 'Alice', // ⛔️ SyntaxError: Invalid shorthand property initializer
  id = 123
};
note

The JavaScript parser sees the equals sign and gets confused. It was expecting either a colon (:) for a key-value pair, a comma (,) to separate properties, or a closing brace (}).

The Solution: Use a Colon (:)​

The fix is simple and fundamental to JavaScript object syntax: always use a colon to separate keys and values inside an object literal.

// ✅ Correct: Using a colon to separate keys and values.
let user = {
  name: 'Alice',
  id: 123
};

console.log(user.name); // Output: "Alice"

Once an object has been created, you then use the equals sign (=) in combination with dot or bracket notation to assign a new value to a property.

let user = { name: 'Alice' };

// Use '=' for assignment AFTER the object is created.
user.id = 123;

console.log(user); // Output: { name: 'Alice', id: 123 }

A Note on Shorthand Properties​

The error message "Invalid shorthand property initializer" can be a little confusing. It refers to a modern JavaScript feature where if you have a variable with the same name as an object key, you can omit the colon and the value.

let name = 'Alice';
let id = 123;

// This is a shorthand property initializer.
// It is equivalent to { name: name, id: id }
let user = { name, id };

console.log(user); // Output: { name: 'Alice', id: 123 }
note

When you incorrectly write { name = 'Alice' }, the parser gets confused because it looks somewhat like a shorthand property combined with a default value assignment (which is syntax for destructuring, not object creation), leading to this specific error message.

Conclusion​

The "Invalid shorthand property initializer" error is a basic syntax error with a simple solution.

  • Inside an object literal ({}), always use a colon (:) to separate a key from its value.
  • The equals sign (=) is used for assigning a value to a variable, including assigning a value to an object's property after the object has been created (e.g., myObject.myKey = 'newValue').

By remembering the distinct roles of the colon and the equals sign, you can easily avoid this common syntax error.

Table of Contents