ES6 dynamic key (name) for object & object property assignment

#react #javascript #es6 #todayilearned

Hands up! Or I will dynamically access your property.

Recently, I’ve picked up Javascript again at my day job writing software using ReactJS and Elixir. It had been a while I hadn’t code javascript professionally since AngularJS 1. Since 2014, there are so many new changes to the JS libraries and communities! I need to catch up.

Today I learned the new way in ES6 to use a dynamic key to access or assign an object property.

ES6 enables developers to create or access an object by dynamic keys or names:

const key1 = "make";
const key2 = "model;
const newObj = {
  year: 2020,
  [key1]: "toyota"
  [key2]: "prius"
}

You can think of many ways you can apply this to your coding scenario. How about the case where you might need to create an object with an increasing number in the key names?

const name = "com";
let i = 1;

const radioDevice = {
  numberOfComs: 3,
  [name + "_" + i++]: "port 4556",
  [name + "_" + i++]: "socket 12",
  [name + "_" + i++]: "socket 15",
};

radioDevice.com_1; 
// => port 4556

Or, when you want to replace an item in an array with a dynamic index 😉

let array = [
  {name: "Minh", age: 20},
  {name: "Brian", age: 22},
  {name: "Hugo", age: 12},
  {name: "Zelda", age: 56},
  {name: "Simon", age: 7}
];

const nameToFind = "Hugo";
const personToReplace = {name: "Ali", age: 34};

const index = array.findIndex(item => item.name === nameToFind);
Object.assign([], array, { [index]: personToReplace });
//=> [
// {name: "Minh", age: 20}
// {name: "Brian", age: 22}
// {name: "Ali", age: 34} <---------
// {name: "Zelda", age: 56}
// {name: "Simon", age: 7}
//];