Dynamic JavaScript Object Keys

Hiya!

Excuse the barrage of doggos in the banner image. I searched for a stock image on unsplash for "Puppies with different colors being named by their mom". I do search in the tackiest of ways 😃

I hope they brighten your time also.

Recently, I found a 'funny' JS syntax when reviewing a pull request by Sigo, a colleague. I hadn't used it previously. It looks like this:

const dataFromAPI = 'age';

let existingObject = {
  name: 'John',
  [dataFromAPI]: 25
};

// Output {age: 25, name: "John"}

Amazing!

I looked up variables in object keys and decided to share it with you.

Keys and Values in Objects

In JavaScript, object keys and values are created in numerous ways either in object literals during initialization, or assignment using dot or bracket notation.

// Creating an object literal with keys and values
let newObject = {
  name: 'Jane',
  age: 24
};

// Adding a new key - bracket notation
newObject["location"] = "Peru"

// Adding a new key - Dot notation
newObject.height = '1.95m'

// Output {age: 24, height: "1.95m", location: "peru", name: "Jane"}

This is pretty much standard stuff. For values of keys, we are able to assign results from complex computation operations as a value. For keys, we can do something similar and even run the computation in the key.

Dynamic Object Keys

A way to handle dynamic keys in objects prior to ES6 is to do something like:

let newObject = {
  name: 'Jane',
  age: 24
};

const newData = "location";

newObject[newData] = "Nicaragua"

// Output {age: "24", location: "Nicaragua", name: "Jane"}

A shorthand form introduced in ES6 using brackets lets us assign the variable in the object literal directly like this:

const newData = "location";

let newObject = {
  name: 'Jane',
  age: 24,
  [newData]: "Nicaragua"
};

// Output {age: "24", location: "Nicaragua", name: "Jane"}

While this shorthand form is proffering cleaner code, this scenario applies in multiple cases, where existing data (object) is augmented with data from a different source with a dynamic key.

Moving on to computed keys, the value of object keys can be computed directly in the object literal using the same bracket notation in the literal.

const newData = "lottery";
const didUserWin = true;

let newObject = {
  name: 'Doug',
  age: 42,
  [newData + (didUserWin ? 'Winner': 'Loser')]: "Assign any value or data here"
};

// Output {age: "24", lotteryWinner: "Assign any value or data here", name: "Doug"}

This illustration also shows the use of conditions in the form of ternary operators.

This post is mainly to show the dynamism of both Object keys and values.

Let me know if you have any feedback using this.

Here's to becoming better 🥂

William.