Difference between revisions of "JavaScript: Computed Properties"

Latest revision as of 15: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));
}

@@ 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 />
 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 />
-<pre>
+<syntaxhighlight lang="JavaScript">
 {
-   "Bob": 50
+   Bob: 50
 }
-</pre>
+</syntaxhighlight>
 We might try to do something like the following:
 <div class="q nonum" data-lang="mongo">
 <pre class="def"><nowiki>
 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++) {
@@ Line 34: / Line 34: @@
 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 />
-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">
 <pre class="def"><nowiki>
 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++) {
@@ Line 58: / Line 58: @@
 <pre class="def"><nowiki>
 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++) {