Variable initiation inside curly braces

Question

What does this code translate to? I can't figure out how the variables inside the curly braces are related to = require('react-router').

var { create: createRouter, HistoryLocation, HashLocation } = require('react-router')

It is from this repo

Answer 1

This is a feature called destructuring assignment in ES6. This is what happens:

// Imagine this is the object you require
var reactRouter = {
  create: 'foo',
  HistoryLocation: 'bar',
  HashLocation: 'baz'
}

// Destructure
var {create: createRouter, HistoryLocation, HashLocation} = reactRouter

// Now the variables are in scope
console.log(createRouter, HistoryLocation, HashLocation)
//^ foo, bar, baz

Answer 2

Looks like it's destructuring assignment. It is a part of Javascript ES6 and is described here.

The destructuring assignment syntax is a JavaScript expression that makes it possible to extract data from arrays or objects using a syntax that mirrors the construction of array and object literals.

Cool new feature! I'm looking forward to using it.