Syntax: const {} = variableName, can anyone explain or point me into the right direction

Question

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;

Answer 1

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 patter while studying React:

import { methodA, methodB } from "my-module";

In this case you have a module called my-module that is exposing some functions. With the import {} from syntax you choose which functions you want to import. Note that this is not destructuring assignment although it works in a similar way.