What does Javascript Arrow function with object as parameter mean?

Question

I was learning ReactJS here: https://egghead.io/lessons/react-dynamically-generated-components and came across this code snippet:

componentWillMount(){
    fetch( 'http://swapi.co/api/people/?format=json')
        .then( response => response.json() )
        .then( ({results: items}) => this.setState({items}) )
}

What does the ({results: items}) part of the arrow function mean?

I've seen arrow function

with no parameter ()=>console.log('hi')
without parenthesis word=>console.log(word)
and with multiple parameter seperated by comma (one, two)=>console.log(one)

But never an object literal in this way.

Also, why does this.setState({items}) need curly braces around items? What does it all mean?

may be duplicate of http://stackoverflow.com/questions/22939130/when-should-i-use-arrow-functions-in-ecmascript-6 — Mayank Shukla, Jan 17 '17 at 04:23
@JaromandaX i am not flagging this as exact duplicate, i am just telling to have a look at this also. — Mayank Shukla, Jan 17 '17 at 04:29
I was referring to the link in the **marked as duplicate** :p — Jaromanda X, Jan 17 '17 at 04:29

Jaromanda X · Accepted Answer · 2017-01-17T04:36:12.257

this.setState({items})

is ES6 shorthand for

this.setState({items: items})

and

({results: items})

basically accepts an object as a parameter with the property named results, and in the function body this is mapped to items

run trhough a transpiler, e.g. babel try it out repl page your code

fetch( 'http://swapi.co/api/people/?format=json')
    .then( response => response.json() )
    .then( ({results: items}) => this.setState({items}) )

becomes

var _this = this;

fetch('http://swapi.co/api/people/?format=json')
.then(function (response) {
    return response.json();
})
.then(function (_ref) {
    var items = _ref.results;
    return _this.setState({ items: items });
});

I would recommend keeping a link to that babel page - if any ES6 code confuses you, paste it there to see what the ES5 version is :p that's my cheat

What does Javascript Arrow function with object as parameter mean?

1 Answers1