What does this syntax mean in JavaScript (ES6 probably):
const {} = variablename;
I'm currently trying to get a grip of React. In a lot of examples I came across that syntax. For example:
const {girls, guys, women, men} = state;
Asked
Active
Viewed 1.9k times
28
-
4It's called [destructuring assignment.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) – Pointy Feb 15 '16 at 17:58
1 Answers
48
First of all, this has nothing to do with React. It's part of ECMAScript 6 (or JavaScript 2015, if you prefer).
What you see here is called Destructuring assignment:
const {girls, guys, women, men} = state;
// Is the same as
const girls = state.girls;
const guys = state.guys;
const women = state.women;
const men = state.men;
You're probably going to encounter a similar pattern while studying React:
import { methodA, methodB } from "my-module";
In this case, you have a module called my-module that is exporting some functions. With the import {} from syntax, you choose which functions you want to import. Note that this is not a destructuring assignment, although it works similarly.
Giorgio Polvara - Gpx
- 17,674
- 9
- 61
- 60
-
2
-
It also works in function parameters `function({ a, b }) {}` – Giorgio Polvara - Gpx Feb 15 '16 at 18:11
-
they are called [named-parameters](https://github.com/DrkSephy/es6-cheatsheet#named-parameters) – Sergio Flores Feb 15 '16 at 18:26
-
2Please notice that the import syntax is entirely different from destructuring. While it is looking similar in shorthand notation, it uses `as` instead of `:` and is not nestable. – Bergi Feb 15 '16 at 18:28
-
2@Bergi you are right, but since OP was confused by destructuring I thought it could be helpful for him to learn also the import notation. I updated the answer to state that they are not the same thing. – Giorgio Polvara - Gpx Feb 15 '16 at 18:52