Encountering an Unexpected Token Error while attempting to utilize array elements as keys within an object

Question

Encountering an Unexpected Token Error while attempting to utilize array elements as keys within an object

Encountering a perplexing issue, as the JavaScript code provided below generates an Unexpected Token error in Chrome:

var somearray = ["foo","bar"];
var someassoc = {somearray[0]:somearray[1]};

The specific error message displayed is:

Uncaught SyntaxError: Unexpected token [

One would anticipate that the code should simply create an object where somearray[0] serves as the key and somearray[1] acts as the corresponding value.

Hence, why does this error occur? Typically, an Unexpected Token signifies misplacement of brackets or similar issues, but such mistakes are not evident in this scenario.

javascript arrays associative-array

Answer 1

Answer №1

To use a key in a JavaScript object literal, it should be either a static key or an expression enclosed in square brackets `[]` (this requires ES2015 support).

The issue with your code is that the key `somearray[0]` is not valid.

If you want to rewrite it using ES5, you can do it like this:

var somearray = ["foo", "bar"];
var someassoc = {};
someassoc[somearray[0]] = somearray[1];

For ES2015, you would use:

var somearray = ["foo", "bar"];
var someassoc = { [somearray[0]]: somearray[1]};

Refer to these sections of the standard for more information:

In essence, the key must be a valid identifier.

Answer 2

To use a key in a JavaScript object literal, it should be either a static key or an expression enclosed in square brackets `[]` (this requires ES2015 support).

The issue with your code is that the key `somearray[0]` is not valid.

If you want to rewrite it using ES5, you can do it like this:

var somearray = ["foo", "bar"];
var someassoc = {};
someassoc[somearray[0]] = somearray[1];

For ES2015, you would use:

var somearray = ["foo", "bar"];
var someassoc = { [somearray[0]]: somearray[1]};

Refer to these sections of the standard for more information:

In essence, the key must be a valid identifier.

Answer 3

Answer №2

When working with JavaScript and declaring objects, it's important to remember that the key name should always be a simple string. For example:

var object = {'key': 'Hello World'};

However, if you need to use a dynamic key name, such as somearray[0], you can simply declare someassoc as an object:

var someassoc = {};

Then, you can set up a key-value pair by doing either of the following:

someassoc.key = 'Hello World';

OR

someassoc['key'] = 'Hello World';

In your case, it would look like this:

someassoc[somearray[0]] = somearray[1];

That covers it! :)

Answer 4

When working with JavaScript and declaring objects, it's important to remember that the key name should always be a simple string. For example:

var object = {'key': 'Hello World'};

However, if you need to use a dynamic key name, such as somearray[0], you can simply declare someassoc as an object:

var someassoc = {};

Then, you can set up a key-value pair by doing either of the following:

someassoc.key = 'Hello World';

OR

someassoc['key'] = 'Hello World';

In your case, it would look like this:

someassoc[somearray[0]] = somearray[1];

That covers it! :)

Encountering an Unexpected Token Error while attempting to utilize array elements as keys within an object

Answer №1

Answer №2

Similar questions

Yet another instance of an ASP.net AJAX SYS Undefined Error

The magic of React.js in creating fluid scrolling single page applications

Saving similar and dissimilar information in a database

Modify and store Json using php

Encountering an Issue: Unable to successfully transform JavaScript argument argument 0 [nsIDOMWindow.getComputedStyle]

What is the best way to retrieve the results of multiple HTTP requests in my specific case?

Reorganizing the index of a numpy array

Enhance your Vue app by incorporating animate effects or classes when entering a div

Error encountered in Next.JS when calling getInitialProps(ctx) due to undefined ctx variable

Leveraging data generated by a CasperJS script within an AngularJS application

Dealing with errors in Express JS following the response

Unable to loop through the "dataList" retrieved from a service call to the java backend within an Angular 9 application

Find the tiniest array within a collection of arrays

Is it possible to make asynchronous calls to an external API without causing any drag on the overall speed of the website?

Arranging object arrays according to strings

Sort activities according to the preferences of the user

Ensure the Firebase real-time database in Javascript purges the active session upon tab or browser closure

Utilize a custom function on dynamically generated elements

Values in C array mysteriously alter without any clear intervention

Execute a function on every cell within a column of a table using jQuery