The Computed Property Name feature allows us to use an expression that returns a valid value as Property Name. We need to enclose the expression inside square brackets( []).
Dynamic Property Name
In the following example, we create a variable author and store Author Name in it.
While creating the book object, we use the author variable inside the []. The JavaScript creates the property Author Name.
This is how dynamic properties were created before ES6.
1 2 3 4 5 6 7 8 9 10 11 12 | let author = 'Author Name'; let book = { [author]: 'Marijn Haverbeke', }; console.log(book[author]); // Marijn Haverbeke |
Computed Property Names
Since ES6, we can use the expression directly inside the []. The expression must return a single value. The JavaScript will evaluate the expression and uses the return value to create the property.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | let prefix = "Book"; let book = { [ prefix + "Author"]: 'Marijn Haverbeke', [ prefix + "Title"]: "Eloquent JavaScript" }; console.log(book[prefix + "Author"]); // Marijn Haverbeke console.log(book["BookAuthor"]); // Marijn Haverbeke //We can also use this. because there is no space in the property name console.log(book.BookAuthor); // Marijn Haverbeke |
You can also invoke a function inside square brackets.
1 2 3 4 5 6 7 8 9 10 11 12 | let prefix = "Book"; let book = { [ getAuthorName()]: 'Marijn Haverbeke', [ prefix + "Title"]: "Eloquent JavaScript" }; function getAuthorName() { return prefix+'Author' } |
The following example, dynamically adds the property to object a
1 2 3 4 5 6 7 8 9 10 | let i = 0 let a = {}; for (i=0;i<5;i++) { a['foo'+i]=i } console.log(a) //{foo0: 0, foo1: 1, foo2: 2, foo3: 3, foo4: 4} |
The addProperty takes any object and adds the property passed in its argument.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | person = {} function addProperty(obj, key, value) { obj[key] = value } addProperty(person, 'firstName', 'Allie') addProperty(person, 'lastName', 'Grater') console.log(person) //{firstName: "Allie", lastName: "Grater"} |
Read More
