Invalid shorthand property initializer ошибка js

“SyntaxError: Invalid shorthand property initializer” in JavaScript is a common error when creating a JavaScript object. Here’s a quick fix for this problem.

How does this error occur?

Scenario #1

In JavaScript, when we use the equals operator ‘=’ instead of a colon ‘:’ to separate the key-values (properties) in an object, the error “SyntaxError: incorrect shorthand property initializer” appears.

The following example triggers the “SyntaxError: Invalid shorthand property initializer”:

let Product = {
    name= 'Clothes Hanger',
    manufacturer= 'OEM',
    stock= 500
}

Error:

SyntaxError: Invalid shorthand property initializer

Scenario #2

Supposedly we declared an array of Products and a method to add new products to our array.

let Products = [
    {           
        id: 1,
        name: 'Clothes Hanger',
        manufacturer: 'OEM',
        stock: 400
    },
    {
        id: 2,
        name: 'Plastic Basket',
        manufacturer: 'OEM',
        stock: 700
    },
    {
        id: 3,
        name: 'Plastic Bucket',
        manufacturer: 'DuTa',
        stock: 100
    }
];

function add (name,manufacturer,stock){
    Products[Products.length]= {
        id = Products.length+1,
        name = name,
        manufacturer = manufacturer,
        stock = stock
    }
}

add ('Water Bottle','OEM',300);
console.log(Products);

The SyntaxError: Invalid Shorthand Property Initializer occurs.

We will suggest the solutions as the following.

Solution 1: Reassign the value to the object

An object in JavaScript has corresponding properties. A property of an object is a variable that is associated with the object. The only real difference between object properties and regular JavaScript variables is the relationship to objects. Its properties define the characteristics of an object. You can access an object’s properties using a straightforward dot-notation:

objectName.propertyName

The object name (which might be a regular variable) and property name, like other JavaScript variables, are case-sensitive. A property can be defined by having a value assigned to it as follows:

let Product = new Object ();
Product.name = 'Clothes Hanger';
Product.manufacturer = 'OEM';
Product.stock = 500;

Another way to assign an object’s properties is to include the key name as a string:

You may also access properties using a string value saved in a variable. The variable must be specified in brackets.

exp = 'Expiry';
Product[exp] = '2025';

Using this bracketed expression technique, the actual string, which is the name of the attribute, will be ‘Expiry’, not ‘exp’. It’s best to note this whenever you use dot annotation.

console.log(Product[exp]);
console.log(Product.Expiry);

Output

2025
2025

The same instance might alternatively be constructed using an “object initializer,” which is a curly-braced ({}) list of zero or more pairs of an object’s property names and associated values, separated by commas ():

let Product = {
    name: 'Clothes Hanger',
    manufacturer: 'OEM',
    stock: 500
}

Under the case where you use a function expression inside the object’s properties, you must also use the colon ‘:’

let Product = {
    name: 'Clothes Hanger',
    manufacturer: 'OEM',
    stock: 500,
    target: (stock) => stock/60
}

Solution 2: Change the way of declaration

The error occurs because ‘=’ is used instead of ‘:’ in the construction above.

To add a new key-value outside the braces, you can use assignment mark (=) as such:

let Product = {
    name: 'Clothes Hanger',
    manufacturer: 'OEM',
    stock: 500
}

Product.variant = 20;

To fix Scenario #2 problem, there are two ways to assign the values to your object in a function.

Our following examples will demonstrate each:

• The literal object declaration:

function add (name,manufacturer,stock){
    Products[Products.length]= {
        id : Products.length+1,
        name : name,
        manufacturer : manufacturer,
        stock : stock
    }
}

• The constructors:

function add (name,manufacturer,stock){
    //length = 3
    Products[Products.length]= new Object();

    // lenghth = 4 ; new Obj index =3
    Products[Products.length -1].id = Product.length;
    Products[Products.length -1].name = name;
    Products[Products.length -1].manufacturer = manufacturer;
    Products[Products.length -1].stock = stock;
}

Output

[
  { id: 1, name: 'Clothes Hanger', manufacturer: 'OEM', stock: 400 },
  { id: 2, name: 'Plastic Basket', manufacturer: 'OEM', stock: 700 },
  { id: 3, name: 'Plastic Bucket', manufacturer: 'DuTa', stock: 100 },
  { id: 4, name: 'Water Bottle', manufacturer: 'OEM', stock: 300 }
]

• Class Object Constructor

function add (name,manufacturer,stock){
    newProduct = function (inputName,inputManufacturer,inputStock) {
            this.id = Products.length+1;
            this.name = inputName;
            this.manufacturer = inputManufacturer;
            this.stock = inputStock;
            }

    Products[Products.length]= new newProduct (name,manufacturer,stock);
}

Output

[
  { id: 1, name: 'Clothes Hanger', manufacturer: 'OEM', stock: 400 },
  { id: 2, name: 'Plastic Basket', manufacturer: 'OEM', stock: 700 },
  { id: 3, name: 'Plastic Bucket', manufacturer: 'DuTa', stock: 100 },
  newProduct {
    id: 4,
    name: 'Water Bottle',
    manufacturer: 'OEM',
    stock: 300
  }

This tutorial has mentioned initializers multiple times. For more ways to interact with objects, you may check out this document.

Summary

This article has covered all the information on resolving the invalid shorthand property initializer error in JS. The solution is straightforward, as demonstrated by the two examples above. Simply replace “=” with “:” and let the system handle the rest!

Maybe you are interested:

• Invalid shorthand property initializer
• Cannot convert undefined or null to Object in JavaScript
• To load an ES module, set “type” – “module” in JavaScript

Invalid shorthand property initializer is a common syntax error that you come across while you are doing object-oriented programming. This error occurs when we create an object.

 const object = {
  name = 'John', 
  age = 34,
  id = 124,
  subject = 'English',
}

 SyntaxError: unknown: Invalid shorthand property initializer 

 const object = {
  name: 'John', 
  age: 34,
  id: 124,
  subject: 'English',
}
console.log(object);

{ name: 'John', age: 34, id: 124, subject: 'English' }

 const obj = {
              name: "Harry"
              }

 objectName.propertyKey = specifiedValue;

 const object = {};
      object.name = 'Rahul';
      object.id = '4562';

 const Person = function (userName, userAge){
  this.name = userName;
  this.age = userAge;
  this.display = function(){
   console.log("The display output is"+ "nt name: " + this.name + "nt age: " + this.age);
  }
}
// create a new instance for the class-object
var myObject = new Person("John Thales",22);
  // call the display function  
  myObject.display();
  
  console.log( myObject );

 The display output is
 name: John Thales
 age: 22
{ name: 'John Thales', age: 22, display: [Function] }

 const object = {
  name : 'Selena', 
  age : 31,
  id : 154,
  subject : 'Physics',
  language: 'German'
}
object.country =  'India';
console.log(object);

{ name: 'Selena',
  age: 31,
  id: 154,
  subject: 'Physics',
  language: 'German',
  country: 'India' }

 const object = {
  name : 'Selena', 
  age : 31,
  id : 154,
  subject : 'Physics',
  language: 'German'
}
object['Email id'] =  '*Emails are not allowed*';