The following function updates an object with a new key and value:
function updateObjectWithKeyAndValue(object, key, value) {
return Object.assign({}, object, { [key]: value })
}
What I don't understand is why key and value look different. Why is key in brackets when value isn't?
[key] is an ES6 computed property. Here is a basic example:
let obj = {
[1 + 2]: 'Hello!'
};
console.log(obj[3]);function obj(x, y) { z = {}; z[x] = y; return z; }
If you call the function obj("weed", "sativa") you will return { weed: "sativa" }
However, you cannot apply more than one key simultaneously in this way, you have to do it for every key:
function obj(w, x, y, z) { v = {}; v[w] = x; v[y] = z; return v; }
Instead of that, you can just do this:
function obj(x, y) { return { [x]: y }}
It may not look much smaller, but it means you can use multiple dynamic keys, like so:
function obj(w, x, y, z) { return { [w]: x, [y]: z }}
So now, doing obj("weed", "sativa", "thc", "40%") will return { weed: "sativa", thc: "40%" }
keywill be used:key = "abc";then{[key]: 55}is{"abc": 55}.