JavaScript: Computed Properties: Difference between revisions
From NoSQLZoo
Created page with "In the JavaScript: Fundamentals tutorial we briefly looked at creating and using '''objects'''. <br /> Occasionally we may want to create objects and properties 'dynamical..." |
No edit summary |
||
| Line 2: | Line 2: | ||
Occasionally we may want to create objects and properties 'dynamically' i.e. objects created "on-the-fly" instead of hard-coded into our applications. <br /> | Occasionally we may want to create objects and properties 'dynamically' i.e. objects created "on-the-fly" instead of hard-coded into our applications. <br /> | ||
Take the following example. We have a collection of people objects with names and ages, e.g. <br/> | Take the following example. We have a collection of people objects with names and ages, e.g. <br/> | ||
< | <syntaxhighlight lang="JavaScript"> | ||
{ | { | ||
name: "Bob", | |||
age: 50 | |||
} | } | ||
</ | </syntaxhighlight> | ||
and for each person we want to create an object with the following structure: <br /> | and for each person we want to create an object with the following structure: <br /> | ||
< | <syntaxhighlight lang="JavaScript"> | ||
{ | { | ||
Bob: 50 | |||
} | } | ||
</ | </syntaxhighlight> | ||
We might try to do something like the following: | We might try to do something like the following: | ||
<div class="q nonum" data-lang="mongo"> | <div class="q nonum" data-lang="mongo"> | ||
<pre class="def"><nowiki> | <pre class="def"><nowiki> | ||
let people = [{ | let people = [{ | ||
name: "Bob", | |||
age: 50 | |||
}, { | }, { | ||
name: "Alice", | |||
age: 52 | |||
}]; | }]; | ||
for (let index = 0; index < people.length; index++) { | for (let index = 0; index < people.length; index++) { | ||
| Line 34: | Line 34: | ||
Unfortunately, as you can see in the editor above, this approach creates errors. <br /> | Unfortunately, as you can see in the editor above, this approach creates errors. <br /> | ||
To get around these errors we can use a JavaScript feature known as '''Computed Property Names'''. <br /> | To get around these errors we can use a JavaScript feature known as '''Computed Property Names'''. <br /> | ||
Using this is simple, simply put square brackets (< | Using this is simple, simply put square brackets (<syntaxhighlight lang="JavaScript" inline>[</syntaxhighlight>, <syntaxhighlight lang="JavaScript" inline>]</syntaxhighlight>) around any field that needs to be computed.<br /> | ||
In the above example, < | In the above example, <syntaxhighlight lang="JavaScript" inline>person.name: person.age</code> becomes <syntaxhighlight lang="JavaScript" inline>[person.name]: person.age</syntaxhighlight > | ||
<div class="q nonum" data-lang="mongo"> | <div class="q nonum" data-lang="mongo"> | ||
<pre class="def"><nowiki> | <pre class="def"><nowiki> | ||
let people = [{ | let people = [{ | ||
name: "Bob", | |||
age: 50 | |||
}, { | }, { | ||
name: "Alice", | |||
age: 52 | |||
}]; | }]; | ||
for (let index = 0; index < people.length; index++) { | for (let index = 0; index < people.length; index++) { | ||
| Line 58: | Line 58: | ||
<pre class="def"><nowiki> | <pre class="def"><nowiki> | ||
let people = [{ | let people = [{ | ||
name: "Bob", | |||
age: 50 | |||
}, { | }, { | ||
name: "Alice", | |||
age: 52 | |||
}]; | }]; | ||
for (let index = 0; index < people.length; index++) { | for (let index = 0; index < people.length; index++) { | ||
Latest revision as of 14:38, 17 October 2018
In the JavaScript: Fundamentals tutorial we briefly looked at creating and using objects.
Occasionally we may want to create objects and properties 'dynamically' i.e. objects created "on-the-fly" instead of hard-coded into our applications.
Take the following example. We have a collection of people objects with names and ages, e.g.
{
name: "Bob",
age: 50
}
and for each person we want to create an object with the following structure:
{
Bob: 50
}
We might try to do something like the following:
let people = [{
name: "Bob",
age: 50
}, {
name: "Alice",
age: 52
}];
for (let index = 0; index < people.length; index++) {
let person = people[index];
let output = {
person.name: person.age
};
print(JSON.stringify(output));
}
Unfortunately, as you can see in the editor above, this approach creates errors.
To get around these errors we can use a JavaScript feature known as Computed Property Names.
Using this is simple, simply put square brackets ([, ]) around any field that needs to be computed.
In the above example, person.name: person.age</code> becomes <syntaxhighlight lang="JavaScript" inline>[person.name]: person.age
let people = [{
name: "Bob",
age: 50
}, {
name: "Alice",
age: 52
}];
for (let index = 0; index < people.length; index++) {
let person = people[index];
let output = {
[person.name]: person.age
};
print(JSON.stringify(output));
}
Another way of doing this is to split the property initialisation from the object initialisation.
let people = [{
name: "Bob",
age: 50
}, {
name: "Alice",
age: 52
}];
for (let index = 0; index < people.length; index++) {
let person = people[index];
let output = {};
output[person.name] = person.age;
print(JSON.stringify(output));
}