Actions

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/>
<pre>
<syntaxhighlight lang="JavaScript">
{
{
   "name": "Bob",
   name: "Bob",
   "age": 50
   age: 50
}
}
</pre>
</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 />
<pre>
<syntaxhighlight lang="JavaScript">
{
{
   "Bob": 50
   Bob: 50
}
}
</pre>
</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",
   name: "Bob",
   "age": 50
   age: 50
}, {
}, {
   "name": "Alice",
   name: "Alice",
   "age": 52
   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 (<code>[</code>, <code>]</code>) around any field that needs to be computed.<br />
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, <code>person.name: person.age</code> becomes <code>[person.name]: person.age</code>
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",
   name: "Bob",
   "age": 50
   age: 50
}, {
}, {
   "name": "Alice",
   name: "Alice",
   "age": 52
   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",
   name: "Bob",
   "age": 50
   age: 50
}, {
}, {
   "name": "Alice",
   name: "Alice",
   "age": 52
   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));
}
  • You have been served by: dill