Home > Web Front-end > JS Tutorial > How to Dynamically Assign Object Keys in JavaScript Using Variables?

How to Dynamically Assign Object Keys in JavaScript Using Variables?

Barbara Streisand
Release: 2024-12-18 11:03:11
Original
945 people have browsed it

How to Dynamically Assign Object Keys in JavaScript Using Variables?

JavaScript Object Key Assignment Using Variables

When creating JavaScript objects and storing them in an array, you may encounter an issue where the object key is set to "key" instead of the desired value assigned to a variable. This article provides a solution to this problem by explaining how to use variables to set object keys dynamically.

The default approach using the . notation does not allow for dynamic key assignment:

var key = "happyCount";
myArray.push({ key: someValueArray });
Copy after login

To achieve this, modify the code:

var key = "happyCount";
var obj = {};

obj[key] = someValueArray;
myArray.push(obj);
Copy after login

This code first creates an empty object, obj. Then, using square bracket notation, you assign the variable key as the key and someValueArray as the value. This allows for dynamic key assignment from a variable.

ES6 Computed Property Names

ECMAScript 2015 (ES6) introduced computed property names, which offer a more concise syntax:

const yourKeyVariable = "happyCount";
const someValueArray= [...];

const obj = {
    [yourKeyVariable]: someValueArray,
}
Copy after login

This code utilizes square brackets within object literal notation to dynamically compute the object property's name from the yourKeyVariable.

This solution provides a flexible way to assign object keys using variables, enabling you to dynamically populate objects with varying keys.

The above is the detailed content of How to Dynamically Assign Object Keys in JavaScript Using Variables?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template