4

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?

ibrahim mahrir
  • 31,174
  • 5
  • 48
  • 73
David Kennell
  • 1,147
  • 2
  • 11
  • 22
  • 1
    Possible duplicate of [dynamic keys for object literals in Javascript](http://stackoverflow.com/questions/6500573/dynamic-keys-for-object-literals-in-javascript) – ibrahim mahrir May 06 '17 at 18:55
  • 1
    So the value of `key` will be used: `key = "abc";` then `{[key]: 55}` is `{"abc": 55}`. – ibrahim mahrir May 06 '17 at 18:57
  • 1
    basically the function does not update the given object. instead it returns a new object without referencing the old object. – Nina Scholz May 06 '17 at 18:58

2 Answers2

4

[key] is an ES6 computed property. Here is a basic example:

let obj = {
  [1 + 2]: 'Hello!'
};

console.log(obj[3]);
Badacadabra
  • 8,043
  • 7
  • 28
  • 49
3

Computed Keys

Take for example, this script using ES5:

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; }

As of ES6, you can use computed keys. What does this mean?

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%" }

imaxwill
  • 113
  • 8