es6 deconstructing an object using a constant

Question

I was playing with es6 deconstruct feature and I did the following

const state = { a: 1 };
const ID = 'b';
const newState = { ...state, [ID]: 2 }

As you can see I use the value of the constant as the identifier, generating this new object.

//newStateValue ==> { a:1, b:2 }

I was wondering how the [ID] works?

Thanks

What do you mean by "how it works"? The answer here seems to be "because the language says it does". — loganfsmyth, Dec 28 '17 at 14:23
Yes, perhap me question should be where I can find the documentation of the language that said you can do that — Giancarlo Corzo, Dec 28 '17 at 14:24
[Working with Objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects) — palaѕн, Dec 28 '17 at 14:25
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names — loganfsmyth, Dec 28 '17 at 14:26
The `[ID]` part of that code has nothing to do with destructuring. — JLRishe, Dec 28 '17 at 14:27
That is great Jonas, can you answer the question so I can put it as the correct answer? — Giancarlo Corzo, Dec 28 '17 at 14:29
Could you please clarify your question? (The title and the snippet contains many unneccessary parts) Its actually not related to object destructuring — Jonas Wilms, Dec 28 '17 at 14:32
@destroyer upvoted cause its hard to find a feature as many documentations lack the searching part — Jonas Wilms, Dec 28 '17 at 14:34
Why of course, if you're searching for the wrong terminology. The op clearly doesn't differentiate destructuring from object creation (to me implying he hasn't read enough on the subject). A simple google search for "brackets in object literal" would surely eliminate the need for this question. — pishpish, Dec 28 '17 at 14:43

score 1 · Accepted Answer · answered Dec 28 '17 at 14:28

It's called Computed Property Names and its not related to deconstructing.

property names. That allows you to put an expression in brackets [], that will be computed and used as the property name. This is reminiscent of the bracket notation of the property accessor syntax, which you might have used to read and set properties already. Now you can use a similar syntax in object literals too

score 0 · Answer 2 · answered Dec 28 '17 at 14:27

You can using strings in javascript objects as a key like this

   let obj = {
     ['name']: 'Your Name',
  };

now the key here s name to access its value we use obj.name and the same way if you use a variable that represent a string as a key it will be replaced by its value , and that's it look at this example below

let obj = {
    ['name']: 'Your Name',
};
let myName = 'name';
let anotherObj = {
    [myName]: 'Your Name ',
};
console.log(obj.name); // Your Name
console.log(anotherObj.name); // Your Name

score 0 · Answer 3 · answered Dec 28 '17 at 15:02

 const id = "b":
 const obj = { [id]: 1};

equals:

 const id = "b";
 const obj = {};
 obj[id] = 1;

As always, the syntax can be found In the Ecma Spec, inside of the Expressions > Primary Expressions > Object Initializer part:

Objects are written like this:

 {[id]:2}

ObjectLiteral: {} {PropertyDefinitionList}

The property definition list is just some comma seperated Property Definitions:

 [id]:2

PropertyDefinitionList: PropertyDefinition PropertyDefinitionList,PropertyDefinition

A propertyDefinition might be one of the following:

PropertyDefinition: IdentifierReference CoverInitializedName PropertyName:AssignmentExpression MethodDefinition

And ours is a PropertyName:AssignmentExpression , so

 [id]

is a PropertyName, which is a ComputedPropertyName. So the next time, justlook it ip in the docs ;)

es6 deconstructing an object using a constant

3 Answers3