Issue with ESLint: Unexpected token found in JavaScript when converting to a dictionary

Question

Issue with ESLint: Unexpected token found in JavaScript when converting to a dictionary

I've implemented a JavaScript code snippet that loops through an array of fields to find specific properties and then adds them to a dictionary. For another example, you can check out this site.

return this.getFields()
    .reduce((mappings, field) => ({...mappings, [field.id]: field.name}), {});

The functionality works perfectly fine; however, I am encountering an Eslint code style parsing error related to the three dots.

Unexpected token ...

This situation raises three questions:

Is there a way I can modify my code to prevent the parsing error without adding unnecessary length?
Should I consider disabling the ESLint check for this particular error?
What is the technical term for the ... notation in JavaScript?

As a temporary solution, I could use the following alternative approach. Nonetheless, I would prefer sticking with the original version.

  return this.getFields()
    .reduce(function(mappings, field) {
      mappings[field.id] = field.name;
    }, {});

javascript eslint code-formatting

Answer 1

Answer №1

The ... notation represents the Spread syntax, which creates a duplicate of new arrays or objects. For example:

 var arr1 = [1, 2, 3],

To add an element 4 to a new array:

var arr2 = [...arr1, 4] //[1, 2, 3, 4]

Similarly, for objects:

var obj = {a: 1, b: 2},
var obj2 = {...obj, b:3} //creates a copy of obj and modifies a property. So obj2 = {a:1, b:3}

The original property b in your obj remains unchanged.

The --fix option in the command line can automatically correct some reported issues by this rule.

You can include this configuration in ES Lint for recognizing the spread operator:

 {
    "parserOptions": {
        "ecmaVersion": 2018
    }
}

For better functionality without mutating data, consider using reduce:

return this.getFields()
    .reduce(function(mappings, field) {
      mappings[field.id] = field.name;
      return mappings 
    }, {});

Alternatively, you can use Object.assign instead of spread operators ...:

return this.getFields()
    .reduce((mappings, field) => (Object.assign(mappings, {[field.id]: field.name})), {});

Answer 2

The ... notation represents the Spread syntax, which creates a duplicate of new arrays or objects. For example:

 var arr1 = [1, 2, 3],

To add an element 4 to a new array:

var arr2 = [...arr1, 4] //[1, 2, 3, 4]

Similarly, for objects:

var obj = {a: 1, b: 2},
var obj2 = {...obj, b:3} //creates a copy of obj and modifies a property. So obj2 = {a:1, b:3}

The original property b in your obj remains unchanged.

The --fix option in the command line can automatically correct some reported issues by this rule.

You can include this configuration in ES Lint for recognizing the spread operator:

 {
    "parserOptions": {
        "ecmaVersion": 2018
    }
}

For better functionality without mutating data, consider using reduce:

return this.getFields()
    .reduce(function(mappings, field) {
      mappings[field.id] = field.name;
      return mappings 
    }, {});

Alternatively, you can use Object.assign instead of spread operators ...:

return this.getFields()
    .reduce((mappings, field) => (Object.assign(mappings, {[field.id]: field.name})), {});

Issue with ESLint: Unexpected token found in JavaScript when converting to a dictionary

Answer №1

Similar questions

Testing for the presence of a child element within a parent component in React

Halt the iteration once you reach the initial item in the array

What is the best approach for incorporating sub-navigation within a page popup in a Next.js project?

Answer found: How to effectively filter data arrays in a React client application

Angular successfully compiled without any issues despite the explicit cast of a number into a string variable

Retrieve information from jsonObject

Adding QML code into a Jade file

Sending a piece of state information to a different component

Video player on website experiencing issues with playing VAST ads

I am receiving a Promise object with a status of "pending" within an asynchronous function on node.js

What is the best way to transfer information between different pages in an HTML document?

Even after setting [attr.disabled]="false" in Angular, the Textarea still remains disabled

MongoDB does not treat aggregate match pipeline as equal to in comparisons

Using React client to accept messages from a Socket.io server: A guide

Rails offers a unique hybrid approach that falls between Ember and traditional JavaScript responses

Establishing a recurring interval when the component mounts for a specified period of time

Passing events between sibling components in Angular 2Incorporating event emission in

The contents of a Javascript array are not appearing within a div element

Utilize dynamically generated form fields to upload multiple files at once

Is there a way to confirm whether or not two files are identical?