Dynamic Objects

Open the project folder

Understanding dynamic objects

We will now cover creating more dynamic objects. This mean both the key and the value can be changed using JavaScript.

This is a way to create object which we have previously looked at:

function User(first, last, occupation, lives) {
  this.firstName = first;
  this.lastName = last;
  this.occupation = occupation;
  this.lives = lives;
}

const homer = new User(
  'Homer',
  'Simpson',
  'Safety Inspector',
  'Springfield'
);

When we create new objects like this homer object, we are using simple primitive values such as strings (Homer, Springfield etc). But our programs are not always this rigid, we may also need to insert data which may change, such as a variable.

Even the key names such as firstName and occupation can be dynamic. We will cover multiple ways to do this, first the more traditional ways, and then a way which was introduced in ES2015.

Passing variables as object values

We begin by inserting variables as the values, and this is simple to do:

// ...

// 1. create a variable holding the firstName value:
const firstName = 'Homer';

const homer = new User(
  // 2. remove quotes so JS knows it is a variable not a string:
  firstName,
  'Simpson',
  'Safety Inspector',
  'Springfield'
);

We previously covered adding new properties like this:

homer['likes'] = 'Duff Beer';

But just like the value, this key name is a string ('likes').

Passing variables as object keys

We may also want this key to be dynamic. Remove the quotes around the likes key:

homer[likes] = 'Duff Beer';

Without the quotes, likes is now expected to be a variable, so let’s add it in:

const firstName = 'Homer';
const likes = `${firstName} likes`;

const homer = new User(
  firstName,
  'Simpson',
  'Safety Inspector',
  'Springfield'
);
homer[likes] = 'Duff Beer';

If we had multiple likes, we could also number them:

const firstName = 'Homer';
const likes = `${firstName} likes `;
const homer = new User(
  firstName,
  'Simpson',
  'Safety Inspector',
  'Springfield'
);

// 1. create initial number:
let number = 1;

// 2. add number to display:
homer[likes + number] = 'Duff Beer';

// 3. Additional likes with incremented number:
homer[likes + ++number] = 'Donuts';

This is all using the object constructor function, but we can also do all this using an object literal:

const homer2 = { firstName: firstName };
console.log(homer2);

This may look strange since we used the firstName variable as both the key and the value. However, we see only the variable of Homer as the value on the right, but what about the key which has the same name?

For the key, we don’t need to wrap the name in quotes, this will always be displayed as a string. If we wanted this key to be dynamic, we could create an empty object and add the properties like we did above, using the square brackets:

homer[likes + number] = 'Duff Beer';

Computed property names

Or alternatively, using an ES2015 feature called computed property names, we could use the square brackets directly inside of the object:

const homer2 = { [firstName]: firstName };

This now says the code inside of these brackets is not a string, it is a JavaScript expression which should be read, and then the result is the property name or key.

We now have control over both the property’s key and value using JavaScript. And we can also add our like’s properties from above:

const homer2 = {
  [firstName]: firstName,
  [likes + number]: 'Duff Beer',
  [likes + ++number]: 'Donuts',
};
console.log(homer2);

And the result in the console:

Homer:"Homer"
Homer likes 2:"Duff Beer"
Homer likes 3:"Donuts"

And this is how we can use computed property names to make our objects more dynamic and under the control of JavaScript.