Warning: session_start(): open(/tmp/sess_2e56035c7ae79184315541423bf766d4, O_RDWR) failed: Disk quota exceeded (122) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: session_start(): Failed to read session data: files (path: /tmp) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_mkdir() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 562

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230
"SyntaxError: Invalid Shorthand Property Initializer" In JavaScript - How To Solve It? - LearnShareIT

“SyntaxError: Invalid Shorthand Property Initializer” In JavaScript – How To Solve It?

Invalid shorthand property initializer

“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 to fix: “SyntaxError: Invalid shorthand property initializer”

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:

Product["sold"]= 200;

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:

Leave a Reply

Your email address will not be published. Required fields are marked *