DEV Community

loading...

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

mreigen profile image mreigen ・2 min read

Alt Text
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"
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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}
//];
Enter fullscreen mode Exit fullscreen mode

ES6's Object.assign function is used to copy the values of all of the enumerable own properties from one or more source objects to a target object

Read more about it here: https://www.ecma-international.org/ecma-262/6.0/#sec-object.assign

Discussion (1)

Collapse
dskaiser82 profile image
Daniel Kaiser

This one blew my mind. No loop needed!

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

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

Forem Open with the Forem app