What does this line of code mean? const {"intl": { formatMessage }, } = this.context

Question

I'm new in react and I'm reading some code i found this line of code:

const {intl: { formatMessage }, } = this.context

is a const declaration but i don't understand I know is JS ES6 but i don't understand what is it for? How can I check the value of this const?

thanks

it means `const formatMessage = this.context.intl.formatMessage`, check [MDN Doc](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring) for more details — Mayank Shukla, Dec 10 '18 at 14:09

score 5 · Answer 1 · answered Dec 10 '18 at 14:20

As people already answered. This is object destructuring

Simple example: const contact = {name: 'John', email: 'john@doe.com'}

With ES6 you can do const {email} = contact; //email = contact.email In case you want to name the variable differently, it would be:

const {email: mailbox} = contact //equivalent to mailbox = contact.email;

Back to the original question: {intl: { formatMessage }, } = this.context

=> {formatMessage} = this.context.intl => formatMessage = this.context.intl.formatMessage

score 1 · Answer 2 · answered Dec 10 '18 at 14:08

1

The code that you have is, actually a representation of the following code,

const formatMessage = this.context.intl.formatMessage

You can read about object destructuring to know more about it.

answered Dec 10 '18 at 14:08

Rajaprabhu Aravindasamy

63,064
13
90
119

1

thank you @Rajaprabhu Aravindasamy – Angelotti Dec 10 '18 at 14:13

score 0 · Answer 3 · answered Dec 10 '18 at 16:04

This simply means that this.context contains a structure similar to this

this.context = {
  intl:{
      formatMessage: // This has a value let's say "Hello"
  },
//Other key-value pairs could be contained in the context object }

This line of code is a shorthand syntax telling you that only the formatMessage property which can be found inside "intl" should be retrieved from the large object called "this.context"

What does this line of code mean? const {"intl": { formatMessage }, } = this.context

3 Answers3