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*';

What is an Invalid shorthand property initializer Error?

Invalid shorthand property initializer: When we use an equal sign(=) instead of a colon(:) to separate the values in an object, we get the “Invalid shorthand property initializer” error. To correct the mistake, put colons between the keys and values of an object when declaring it.

For example:

const object =  { EmpId:2122, EmpName:'John' }
console.log(object);

Output:

{ EmpId: 2122, EmpName: 'John' }

When Does This Error Occur?

// Here we are giving equal sign(=) instead of a colon(:) 
// between the keys and values of an object
// Hence  Invalid shorthand property initializer error occurs
const object =  { EmpId = 2122, EmpName = 'John' }
console.log(object);

Output:

const object =  { EmpId = 2122, EmpName = 'John' }
^^^^^^^^^^^^

SyntaxError: Invalid shorthand property initializer
at Module._compile (internal/modules/cjs/loader.js:723:23)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)

Explanation:

Here we are giving equal sign(=) instead of a colon(:) between the keys and values of an object 
Hence Invalid shorthand property initializer error occurs

Handling the Invalid shorthand property initializer Error

Uncaught syntaxerror invalid shorthand property initializer: To Handle this see the below code as explained in the above concept:

For example:

const object =  { EmpId:2122, EmpName:'John' }
console.log(object);

Output:

{ EmpId: 2122, EmpName: 'John' }

It’s worth noting that we used an equal sign(=) to separate the object’s key-value pairs.

A colon(:) should be used to separate key-value pairs when declaring an object.

Using equal sign(=) to Add a New Key-Value Pair

If you wish to add a new key-value pair to the object, however, you must use the equal sign(=).

Approach:

• Give the object containing key-value pairs and store it in a variable
• Add a new key-value pair to the above object using the equal sign(=)
• Print the object after adding a key-value pair to the object on the console.
• The Exit of the Program.

Below is the implementation:

// Give the object containing key-value pairs and store it in a variable 
const object = { EmpId:2122, EmpName:'John' }
// Add a new key-value pair to the above object using the 
// equal sign(=)
object.EmpSalary = 50000;
// Print the object after adding a key-value pair on the console
console.log(object);

Output:

{ EmpId: 2122, EmpName: 'John', EmpSalary: 50000 }

Using the Bracket Notation instead of Dot Notation

When adding a key-value pair to an object, use bracket notation rather than dot notation if the key contains spaces, begins with a number, or contains a special character.

Example:

Approach:

• Give the object containing key-value pairs and store it in a variable
• Add a new key-value pair to the above object using the bracket notation instead of dot notation(.)
• Print the object after adding a key-value pair to the object on the console.
• The Exit of the Program.

Below is the implementation:

// Give the object containing key-value pairs and store it in a variable
const object = { EmpId:2122, EmpName:'John' }
// Add a new key-value pair to the above object using the 
// bracket notation instead of dot notation(.)
object['Employee Address'] = 'Gachibowli, Hyderabad';
// Print the object after adding a key-value pair on the console
console.log(object);

Output:

{ EmpId: 2122,
EmpName: 'John',
'Employee Address': 'Gachibowli, Hyderabad' }

Conclusion:

To avoid the “Invalid shorthand property initializer” problem, use a colon instead of an equal sign between the key-value pairs of an object literal, such as

const object =  { EmpId:2122, EmpName:'John' }

This article will provide an in-depth exploration of the uncaught syntaxerror: invalid shorthand property initializer error message in JavaScript.

You will know why invalid shorthand property initializer occurs and possible solutions to fix this error.

Thus, if you’ve encountered this error while programming and find yourself confused, there’s no need to worry.

We have everything you need to understand and resolve the uncaught syntaxerror: invalid shorthand property initializer.

The error message uncaught syntaxerror: invalid shorthand property initializer occurs when you are using an equal sign (=) rather than using a colon (:) to separate the keys and values in an object.

For example:

const data = {
  website = 'Itsourcecode', 
  visits = 1000000,
  offere = 'Free sourcecode and tutorials'
}

The error message was triggered because you should use colon (:) and not equal sign (=).

Output:

Uncaught SyntaxError: Invalid shorthand property initializer

Why does “invalid shorthand property initializer” Syntaxerror occur?

The syntaxerror: invalid shorthand property initializer raised when an equal sign (=) is used instead of a colon (:) to separate the keys and values in an object.

In JavaScript, object properties are defined using key-value pairs, where the key and value are separated by a colon. Using an equal sign instead of colon results in this error message.

How to fix the “uncaught syntaxerror: invalid shorthand property initializer”?

To fix the uncaught syntaxerror: invalid shorthand property initializer, you need to replace the equal sign (=) with a colon (:) to correctly separate the keys and values in an object.

Solution 1: Replace the equal signs with colons to separate a key-value pairs

In JavaScript, object properties are defined using key-value pairs, where the key and value are separated by a colon. Using an equal sign instead of colon results in this error message.
By replacing the equal sign with a colon, you can fix this error.

Incorrect code:

const data = {
  website = 'Itsourcecode', 
  visits = 1000000,
  offere = 'Free sourcecode and tutorials'
}

Corrected code:

const data = {
  website: 'Itsourcecode', 
  visits: 1000000,
  offer: 'Free sourcecode and tutorials'
}

console.log(data);

Output:

{
  website: 'Itsourcecode',
  visits: 1000000,
  offer: 'Free sourcecode and tutorials'
}

Solution 2: Use equal sign “=” to add a new key-value pairs

if you want to add a new key-value pair to the object, you use the equal sign.

For example:

const data = {
  website: 'Itsourcecode', 
  visits: 1000000,
  offer: 'Free sourcecode and tutorials'
}


data.officialsite = 'Itsourcecode.com';

console.log(data);

Output:

{
  website: 'Itsourcecode',
  visits: 1000000,
  offer: 'Free sourcecode and tutorials',
  officialsite: 'Itsourcecode.com'
}

Solution 3: When declaring a variable, you use an equal sign

When declaring a variable, it is important to use an equal sign to assign a value to it. This ensures that the variable is properly initialized and ready to be used in your code.

For example:

const website = 'Itsourcode';
console.log(website);

const arr = ['it', 'source', 'code'];
console.log(arr);

const obj = {website: 'Itsourcecode', visits: 200000};
console.log(obj);

The left-hand side of the assignment specifies the name of the variable, while the right-hand side specifies the value.

Output:

Itsourcode
[ 'it', 'source', 'code' ]
{ website: 'Itsourcecode', visits: 200000 }

Solution 4: Use the object spread syntax to create the object

For example:

const obj = {
  ...{
    website: 'Itsourcecode', 
    visits: 1000000,
    offer: 'Free sourcecode and tutorials'
  }
};

console.log(obj);

In this solution, we use the object spread syntax (…) to create a new object and copy the properties of another object into it. The spread syntax spreads the properties of the inner object into the outer object.

Output:

{
  website: 'Itsourcecode',
  visits: 1000000,
  offer: 'Free sourcecode and tutorials'
}

Solution 5: Create the object using a constructor function

For example:

function Obj() {
  this.website = 'Itsourcecode';
  this.visits = 1000000;
  this.offer = 'Free sourcecode and tutorials';
}

const obj = new Obj();

console.log(obj);

Here, we use a constructor function to create a new object. A constructor function is a special type of function that is used to create objects.

When you call a constructor function with the new keyword, it creates a new object and sets its properties based on the code in the constructor function.

Output:

Obj {
  website: 'Itsourcecode',
  visits: 1000000,
  offer: 'Free sourcecode and tutorials'
}

Conclusion

In conclusion, the error message uncaught syntaxerror: invalid shorthand property initializer occurs when you are using an equal sign (=) rather than using a colon (:) to separate the keys and values in an object.

This error can occur in various programming languages when the syntax rules for using commas are not followed correctly.

By executing the solutions above, you can master this SyntaxError with the help of this guide.

You could also check out other SyntaxError articles that may help you in the future if you encounter them.

• Expression.syntaxerror: token comma expected.
• Uncaught syntaxerror unexpected token react
• Syntaxerror: unterminated string literal

We are hoping that this article helps you fix the error. Thank you for reading itsourcecoders 😊