Error message "Property shorthand expected in object literal" occurs when assigning a value to a variable as an object

Here is an example of an object that I have:

   {
      element: 'tool-app',
      file: '/tool-app.js',
      icon: 'csr-icon',
      name: 'Planning view',
      id: 'planning-view'
    }

To simplify things, I want to store the value of the icon in a variable and then use that variable in the object. First, I create a constant:

const icon = 'csr-icon';

Next, I try to use the icon variable in the object:

{
  element: 'tool-app',
  file: '/tool-app.js',
  icon: icon,   ///change here
  name: 'Planning view',
  id: 'planning-view'
}

Even though it should be the same, Tslint is showing an error:

Expected property shorthand in object literal ('{icon}'). (object-literal-shorthand)tslint(1)

Why is this happening?

Answer №1

When you see this error, it means that you can simplify your code by removing the property name from the object when it matches a constant you have.

So your updated object will appear like this:

{
  element: 'tool-app',
  file: '/tool-app.js',
  icon,
  name: 'Planning view',
  id: 'planning-view'
}

This technique is known as "shorthand notation" :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to add a jQuery function to a Rails 3 if statement?

I followed a Rails 3 tutorial on creating a multi-step form which you can check out here. Additionally, I incorporated Stripe payment functionality in my app using another railscast found here. Within my application, the payment form is hidden using jQuer ...

Using Javascript to modify file permissions in Google Drive

I'm new to writing and seeking amazing solutions for all the issues I encounter. I have a website hosted on Google Drive, utilizing its SDK for Javascript. Everything functions exceptionally well, except for one problem. I need to adjust the permissi ...

The error message "Cannot send headers after they have already been sent to the client" is caused by attempting to set headers multiple

Although I'm not a backend developer, I do have experience with express and NodeJS. However, my current project involving MongoDB has hit a roadblock that I can't seem to resolve. Despite researching similar questions and answers, none of the sol ...

Dynamic jQuery Carousel

Is there a jQuery slider that can adapt to different screen sizes and handle images of varying widths? Appreciate any insights! ...

Customizing Carousel Arrows in Angular with ng-bootstrap

I need help changing the position and icon of control arrows using Bootstrap. I've tried targeting "carousel-control-prev-icon" & "carousel-control-next-icon", but nothing seems to work. Any suggestions on how to properly solve this issue? Here is th ...

Determine the size of an SVG while taking into consideration any strokes applied

Is there a way to seamlessly position an SVG in the corner of a div, despite having a dynamically generated stroke? Calculating the distance to the outermost part of the border proves difficult when dealing with irregular shapes like stars. Here's my ...

Getting hands-on with Express.js and gaining a foundational understanding of Angular

Thank you for taking the time to read my inquiry. As a developer experienced in PHP, particularly with Laravel, and possessing basic knowledge of AngularJS concepts such as routing, directives, and resource, I have been utilizing Laravel on the backend an ...

Discover Your Location in the Web Browser

My webpage includes the following JavaScript code to obtain the user's location: state.currentTimer = navigator.geolocation.watchPosition(success, error, { enableHighAccuracy: true, maximumAge: 5000 }); The page is designed to be accesse ...

I am struggling to comprehend the concept of dependency injection. Is there anyone available to provide a clear explanation for me?

I am working on a NestJS application and trying to integrate a task scheduler. One of the tasks involves updating data in the database using a UserService as shown below: import { Injectable, Inject, UnprocessableEntityException, HttpStatus, } fro ...

Send the data to the web form along with the JSON information

I find myself in a situation where I am looking for alternative ways to pass data to a redirect page without using querystrings. Here is the current implementation on the Source Page: window.location = "invaliduser.aspx?u=" + encodeURI(username); Consi ...

Avoiding repetitive rendering of child components in ReactJS

In my React project, I have a parent component that contains 3 children components, structured like this: var Parent = React.createClass({ render: function() { return (<div> <C1/> <C2/> <C3/> ...

Not all comparisons between two tables are guaranteed to be successful

Looking to compare records within two arrays and apply a style if they are equal. Here is my approach: var json = ["VIP Section","Master Section","Press Section","God Section"]; var sections = ["VIP Section","Master Section"]; if ( sections.length &g ...

What is the best way to configure multiple environmental variables in webpack?

I'm having trouble figuring out how to pass multiple environment variables to webpack. I've been attempting to execute the script below, but it doesn't seem to be working: "cross-env NODE_ENV=production DTM_ENV=staging webpack --config ...

How to read a text file in JavaScript line by line

Coding Challenge: <script src="../scripts/jquery-3.1.0.min.js"></script> <script> $(document).ready(function(){ $('#test').click(function(){ var txtFile = '../data/mail.txt'; var file ...

Using a jQuery script, you can enable a back button functionality that allows users

I created a survey to assist individuals in determining where to go based on the type of ticket they have. However, I am currently facing difficulties with implementing a "Back" button that will display the previous screen or "ul" that the user saw. Initia ...

What is causing React Js to fail loading css when switching from anchor tag to link tag?

I am learning React and experimenting with creating a basic static website using HTML templates in version ^18.2.0 of React JS. Everything seems to be functioning correctly, however, I have encountered an issue with page refresh. Specifically, when I repla ...

Tips for resolving the error message "An issue occurred with the skill's response" within the Alexa Developer Console

Looking to develop a basic Alexa app where users can interact with voice commands, but encountering an issue with the response in the Test tab of Alexa Developer Console. The error message states "There was a problem with the requested skill's respons ...

Angular problem arises when attempting to map an array and selectively push objects into another array based on a specific condition

Setting up a cashier screen and needing an addToCart function seems pretty simple, right? However, I am encountering a strange logical error. When I click on an item to add it to the cart, my function checks if the item already exists in the array. If it d ...

I'm encountering an issue in JavaScript while attempting to convert the following string into a JSON object. Can anyone assist in identifying the problem with this string?

How can I correct this string to make it a valid JavaScript JSON object? txt = '{"Categories" : [{"label":"petifores","id":"1"}, {"label":"wedding cake","id":"2"}, {"label":"shapes of cakes","id":"3"}, ...

The :first selector examines the parent's parent as a reference point, rather than the immediate

I am facing a challenge with shuffling large elements within my layout because of floating them and attempting to display them. Specifically, the elements with the class .gallery-large always need to be the first child inside the .item container. There are ...