Invalid shorthand property initializer ошибка js

The “Invalid shorthand property initializer” error often occurs when assigning a value to an object property. Fortunately, this is usually very simple to fix. Please check our tutorial below to deal with it properly.

Reproduce the error

Let’s take a look at example 1:

const person_1 = {
  name: 'Kai', 
  age: 21,
  gender: 'male',
  email: '[email protected]',
  job: 'student',
  address: '123abc'
}

const person_2 = {
  name: 'David', 
  age: 32,
  gender: 'male',
  email: '[email protected]',
  job: 'teacher',
  address: '456xyz'
}

const person_3 = {
  name = 'Emma', 
  age: 25,
  gender: 'female',
  email: '[email protected]',
  job: 'artist',
  address: '789mnp'
}

console.log(person_3.name);

Output: 

SyntaxError: Invalid shorthand property initializer

At first glance, there seems to be no problem with our program. But if we take a closer look at our code, in line 20, it should be a colon instead of an equal sign. And this is the reason for our error.

How to solve this error?

You can use a colon instead of an equal sign to solve the error.

When we assign a value to a variable, we can use the equal sign:

const obj_1 = ‘apple’; 
const obj_2 = ‘orange’;
const obj_3 = ‘peach’;

Objects are also variables but contain many values. If we want to assign a value to an object’s property, we have to use a colon:

name:value

Example: 

const apple = {
  color: 'Red',
  size: 'small',
  quantity: 14
}

Fixed code for example 1:

const person_1 = {
  name: 'Kai', 
  age: 21,
  gender: 'male',
  email: '[email protected]',
  job: 'student',
  address: '123abc'
}

const person_2 = {
  name: 'David', 
  age: 32,
  gender: 'male',
  email: '[email protected]',
  job: 'teacher',
  address: '456xyz'
}

const person_3 = {
  name: 'Emma', 
  age: 25,
  gender: 'female',
  email: '[email protected]',
  job: 'artist',
  address: '789mnp'
}

console.log(person_3.name);

Output: 

Emma

But if we want to add a property to an existing object, we can use an equal sign: 

const person_1 = {
  name: 'Kai', 
  age: 21,
  gender: 'male',
  email: '[email protected]',
  job: 'student',
  address: '123abc'
}

person_1.id = 123
console.log(person_1.id);

Output: 

123

Summary

The “Invalid shorthand property initializer” error is common in JavaScript and often related to how we assign value to an object’s property. To avoid this problem, ensure to use a colon instead of an equal sign.

Maybe you are interested:

• RangeError: Invalid time value in JavaScript
• “Cannot find module ‘express’ error” in Node.js
• “Failed to load resource: the server responded with a status of 404 (not found)”
• Error: Cannot find module ‘node-sass’

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 😊