Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Declare an Object with Computed Property Name in JavaScript?
In JavaScript, computed property names allow you to dynamically create object properties using expressions inside square brackets. This ES6 feature provides flexibility when property names need to be determined at runtime.
JavaScript Object - A JavaScript object contains key-value pairs where the key represents a property from which we can get and set the value of an object.
Using Square Bracket Notation in Object Literals
We can use square bracket expressions [] to create computed property names directly in object literals. In ES6, it's possible to use any expression within the brackets.
Example 1
In the below example, we declare an object with a computed property name using a variable:
<html>
<head>
<title>Computed Property</title>
</head>
<body>
<h1 style="color: green;">
Welcome To Tutorials Point
</h1>
<script>
let LAST_NAME = "lastname";
let fullname = {
firstname: "Steve",
// Defining computed property
[LAST_NAME]: "Jobs"
};
console.log(
"Full Name: " + fullname.firstname + " " + fullname.lastname
);
</script>
</body>
</html>
Full Name: Steve Jobs
Example 2: Using Expressions
You can also use expressions and function calls inside computed property brackets:
<html>
<head>
<title>Computed Property with Expressions</title>
</head>
<body>
<script>
let prefix = "user_";
let counter = 1;
let user = {
[prefix + "id"]: counter,
[prefix + "name"]: "Alice",
["is" + "Active"]: true
};
console.log("User ID:", user.user_id);
console.log("User Name:", user.user_name);
console.log("Is Active:", user.isActive);
</script>
</body>
</html>
User ID: 1 User Name: Alice Is Active: true
Dynamic Property Assignment
This method involves creating an object first and then dynamically adding properties to it using bracket notation:
Example 3
In the below example, we create the property name dynamically after object creation:
<html>
<head>
<title>Dynamic Property Assignment</title>
</head>
<body>
<h1 style="color: green;">
Welcome To Tutorials Point
</h1>
<script>
let LAST_NAME = "lastname";
let fullname = {
firstname: "Steve"
};
// Dynamically add computed property
fullname[LAST_NAME] = "Jobs";
console.log("FirstName: " + fullname.firstname + " -- LastName: " + fullname.lastname);
console.log("FullName: " + fullname.firstname + " " + fullname.lastname);
</script>
</body>
</html>
FirstName: Steve -- LastName: Jobs FullName: Steve Jobs
Comparison
| Method | When to Use | Performance |
|---|---|---|
| Object Literal with [] | When property name is known at declaration | Faster - computed at creation |
| Dynamic Assignment | When property needs to be added conditionally | Slightly slower - computed after creation |
Common Use Cases
- Creating properties based on user input or API responses
- Building objects with dynamic keys from arrays or loops
- Implementing flexible configuration objects
- Working with internationalization where property names vary
Conclusion
Computed property names provide powerful flexibility for creating dynamic objects in JavaScript. Use square bracket notation in object literals for better performance, or dynamic assignment when properties need to be added conditionally after object creation.
504 Views
