CODEWITHSUNDEEP
javascriptreactjsecmascript-6destructuring
Rui Nunes
Rui Nunes

Reputation: 858

What does the es6 { [a]: b } destructuring mean?

There is some destructuring going on here:

const { [a]: b } = this.props

But, what does [a]: b do: what does the brackets with colon do? In my case, a is supplied as one of the props with a string value.

Upvotes: 9

Views: 458

Answers (3)

Kristianmitk
Kristianmitk

Reputation: 4778

[a] is a computed property name

...allows you to put an expression in brackets [], that will be computed and used as the property name

{ [a]: b } is a destructuring assignment with assigning to new variable names using a computed property name

A property can be unpacked from an object and assigned to a variable with a different name than the object property

Thus you end up with having a variable b in current scope that holds the value of this.props[a]

Example

this.props = {foo : 1, bar: 2};

let p1 = 'foo';
let p2 = 'bar';

let { [p1]: b } = this.props;

console.log(b); // 1

let { [p2]: c } = this.props;

console.log(c); // 2

Upvotes: 2

Sam Fen
Sam Fen

Reputation: 5254

This ES6 destructuring syntax is very similar to the new "Enhanced object literals" for defining objects with variable property names, so I think it's useful to see that first:

Pre-ES6, if you wanted to assign a value to an object with a property name that was variable, you would need to write

var obj = {};
obj[variable] = value

That's because while both the dot-notation and the object literal notation require using the actual property name, the obj[prop] notation allowed you to have a variable name.

ES6 introduced the extended object literal syntax, which included the ability to write 

var obj = { [variable]: value }

The same syntax was incorporated in destructuring, which is what your question shows.

The basic destructuring allows assigning variables given literal property names:

First, assigning to a variable with the same name as a property already in the object (docs):

var person = {name: "Mary"};
var {name} = person;
/// name = "Mary"

Second, assigning a variable with a different name than the one already in the object (docs):

var person = {name: "Mary"};
var {name: myName} = person;
/// myName = "Mary"

(Side-note: if you recognize that, in the first example, var {name} = ... was just short-hand for var {name: name} = ..., you'll see that these two examples match more logically.)

But what if you don't know which property you want from person? Then you can use that same new computed-property-name object syntax from above (docs):

var person = {name: "Mary"};
var propName = getPropUserWantToKnowAbout(); // they type in "name"
var {[propName]: value} = person;
/// value = "Mary"

Upvotes: 3

TKoL
TKoL

Reputation: 13902

An example

var props = {'dynamic': 2}
var dyn = 'dynamic'
const {[dyn]:a} = props
console.log(a);
// logs 2

Check out this page: https://gist.github.com/mikaelbr/9900818

In short, if dyn is a string, and props has a property with that string as the name, accessible by props[dyn], then {[dyn]:a} = props will assign props[dyn] to a

Upvotes: 0

Related Questions