JavaScript SyntaxError: Invalid shorthand property initializer

JavaScript SyntaxError: Invalid shorthand property initializer occurs when JavaScript finds an invalid property definition inside an object literal. A common cause is using the assignment operator = instead of the property separator : while creating an object.

To fix JavaScript SyntaxError: Invalid shorthand property initializer, correct the value assignments made to properties of objects. Colon (:) is used for assigning values to properties of objects. Most of the developers type in assignment operator EqualTo(=) instead of Object Initializer (:), which causes SyntaxError.

Why invalid shorthand property initializer happens in JavaScript object literals

In JavaScript, object properties are written as key: value pairs. When the parser sees key = value inside an object literal, it cannot treat it as a valid object property initializer, so it throws this syntax error.

</>

Copy

const objectName = {
  propertyName: propertyValue
};

The error is usually seen in object literals, function arguments that contain object literals, configuration objects, JSON-like code, and JavaScript code copied from another format where = was used by mistake.

Example that reproduces Invalid shorthand property initializer

Following example reproduces the SyntaxError, and we shall correct the same.

index.html

</>

Copy

<!doctype html>
<html>
<body>
	<h1>JavaScript - SyntaxError: Invalid shorthand property initializer</h1>
	<script>
            var msg = "";
      
            var mango = [type="fruit", native="India"];
      
            console.log(mango.type);
	</script>
</body>
</html>

Output would be

Uncaught SyntaxError: Invalid shorthand property initializer
    at render (javascript-editor.php?file=test:126)
    at submitCode (javascript-editor.php?file=test:149)
    at HTMLButtonElement.onclick (javascript-editor.php?file=test:68)

The bug here is the line:10 var mango = [type=”fruit”, native=”India”]; .

The main issue is the use of = between the property name and value. If you want an object with properties named type and native, write the properties with colon : and place them inside curly braces {}.

The correct one is var mango = {type:”fruit”, native:”India”}; where we replaced = with : and used an object literal.

index.html

</>

Copy

<!doctype html>
<html>
<body>
	<h1>JavaScript - SyntaxError: Invalid shorthand property initializer</h1>
	<script>
            var msg = "";
      
            var mango = [type:"fruit", native:"India"];
      
            console.log(mango.type);
	</script>
</body>
</html>

The block above shows the intended colon replacement, but for a real object that supports mango.type, use curly braces as shown in the corrected JavaScript example below.

Correct JavaScript object literal syntax for this error

The corrected code creates a JavaScript object. The properties are separated by commas, and each property value is assigned using a colon.

</>

Copy

var mango = {
  type: "fruit",
  native: "India"
};

console.log(mango.type);
console.log(mango.native);

fruit
India

If you want to store many mango-related values in a list, use an array. If you want named properties such as type and native, use an object.

Requirement	Correct JavaScript structure	Example
Named properties	Object literal	`{ type: "fruit", native: "India" }`
Ordered list of values	Array literal	`["mango", "apple", "banana"]`
List of objects	Array of object literals	`[{ name: "Mango" }, { name: "Apple" }]`

Invalid shorthand property initializer in function arguments

This error can also occur when passing an object literal to a function. In the following example, name = "Mango" is invalid inside the object argument.

</>

Copy

function printFruit(fruit) {
  console.log(fruit.name);
}

printFruit({ name = "Mango", type = "fruit" });

Uncaught SyntaxError: Invalid shorthand property initializer

Use colons inside the object literal passed to the function.

</>

Copy

function printFruit(fruit) {
  console.log(fruit.name);
}

printFruit({ name: "Mango", type: "fruit" });

Mango

Object property syntax versus shorthand property syntax

JavaScript supports shorthand property names when a variable already exists with the same name as the property. In that case, you can write the property name only.

</>

Copy

const type = "fruit";
const native = "India";

const mango = { type, native };

console.log(mango);

{ type: 'fruit', native: 'India' }

But shorthand syntax does not mean that = can be used inside the object literal. When you are directly giving a value, use property: value. When you are using an existing variable with the same name, use only the variable name.

Code	Valid?	Reason
`{ type: "fruit" }`	Yes	Uses normal object property syntax
`{ type }`	Yes, if `type` is already declared	Uses shorthand property syntax
`{ type = "fruit" }`	No	Uses assignment where object property syntax expects a valid initializer

Invalid shorthand property initializer in JSON-like JavaScript code

Developers sometimes see this error when writing JSON-like data directly in JavaScript. JSON and JavaScript object literals both use colons between keys and values, not equal signs.

</>

Copy

const settings = {
  theme = "dark",
  language = "en"
};

Correct the object by replacing the equal signs with colons.

</>

Copy

const settings = {
  theme: "dark",
  language: "en"
};

Also remember that strict JSON requires property names to be wrapped in double quotes, while JavaScript object literals allow unquoted identifier-style property names.

</>

Copy

{
  "theme": "dark",
  "language": "en"
}

Checklist to fix SyntaxError Invalid shorthand property initializer

Check the line shown in the browser console or terminal error message.
Look for = used inside an object literal, such as { name = "Mango" }.
Replace = with : when assigning a direct value to an object property.
Use curly braces {} for objects and square brackets [] for arrays.
Use shorthand property syntax only when the variable already exists, such as { name }.
Check commas between object properties after fixing the property separators.

JavaScript Invalid shorthand property initializer FAQs

What does Invalid shorthand property initializer mean in JavaScript?

It means JavaScript found an invalid property initializer inside an object literal. The most common cause is writing property = value instead of property: value.

How do I fix Uncaught SyntaxError: Invalid shorthand property initializer?

Find the object literal that uses = between a property name and value. Replace it with :. For example, change { name = "Mango" } to { name: "Mango" }.

Can I use equal signs inside JavaScript objects?

You should not use = to assign direct values to object properties inside an object literal. Use :. Equal signs may appear in other JavaScript contexts, such as variable assignment or default parameter values, but not as a normal object property separator.

Is { name } valid JavaScript object syntax?

Yes, { name } is valid shorthand property syntax only if a variable named name already exists. It is equivalent to { name: name }.

Should I use braces or brackets when fixing this JavaScript error?

Use braces {} when creating an object with named properties. Use brackets [] when creating an array list. For mango.type to work, mango should be an object such as { type: "fruit" }.

Conclusion

In this JavaScript Tutorial, we learned that JavaScript SyntaxError: Invalid shorthand property initializer is usually caused by invalid object property syntax. Use colon : for object property values, use curly braces for objects, and reserve shorthand property syntax for cases where the property name already matches an existing variable.

TutorialKart.com

JavaScript SyntaxError: Invalid shorthand property initializer