Arrow function in javascript

Question

I am reading this tutorial: React-Redux Basic But I am confused something about Arrow function in Javascript.
I understand the syntax:

var myFunction = (para1, para2) => {statements}

And I can use: myFunction(para1, para2)

But I don't understand the syntax:

var myFunction2 = ({para1, para2}) => (stattements)

What do ({para1, para2}) and (statements) mean?
Can everyone help me? Sorry for my bad English.

Answer 1

What you're talking about is object destructuring.

Object destructuring lets you assign multiple variables from an object at the same time. For instance:

let object = { foo: 3, bar: 7 };

// object destructuring
let { foo, bar } = object;

console.log(foo, bar); // prints "3 7"

The same thing happens when you use this in a function argument:

let myFunction = function({ foo, bar }) { // can use arrow functions or regular functions
  console.log(foo, bar);
};

let object = { foo: 3, bar: 7 };
myFunction(object); // prints "3 7"

---

Also, the difference between using curly brackets and parentheses (or nothing) is that only with curly brackets can you have multiple statements, otherwise you can only have a single expression (which will be returned automatically):

// these three are equivalent functions
let add1 = (x, y) => (x + y);          // note the implicit return
let add2 = (x, y) => x + y;            // we also don't need parentheses
let add3 = (x, y) => { return x + y; } // { ... } is just as a normal function body

You can read more about this here.

Answer 2

This syntax is related to object dectructuring (see examples) and is common in React as a component can be declared as a function of a single object called props.

Instead of writing:

var Hello = (props) => {
    return <div>Hello {props.name} from {props.city} with {props.item}</div>;
}

You can reduce it to this form:

var Hello = ({name, city, item}) => <div>Hello {name} from {city} with {item}</div>

In your example it destructures the props to properties para1 and para2.

var works = ({para1, para2}) => console.log(para1, para2)
works({para1: 'test', para2: 'another one'})
works({para2: 'another one', para1: 'test', anotherProp: 'does not matter'})

As you can see order of passed properties doesn't matter. Contrary to default argument list syntax. This behavior may be favorable in React apps as components tend to accept multiple named properties.

Syntax issues

Without braces around object destructuring in function arguments you would get a syntax error because it is being parsed as an object literal.

var doesntWork = {para1, para2} => console.log(para1, para2)

Same issues occur when you want to return an object within an arrow function, which can lead to undesired behaviour. For example, this code will return and print undefined.

var add = ({a, b}) => {sum: a + b}
var result = add({b: 3, a: 5})
console.log(result)

The brackets are parsed as a code block, not an expression. To fix the code it should be wrapped with braces: var add = ({a, b}) => ({sum: a + b})

Object and array destructuring is a powerful tool which make stateless functional components in React possible and viable. Code becomes simpler and more readable.

Answer 3

I recommend you to read this: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions.

You can write like this:

myFunction = (param1, param2)=>{
     //body
}

The same:

function myFunction(param1, param2){
    //body
}

Between the parentheses you pass the params (if oly have one param the parentheses are optional) and in the statement you write the logic block of your function. It's realy important for you to read the documentation. Hope it helps.