const actionsMap = {
[GET_USER]: (state, action) => ({ post: action.msg })
};
I have this code that I've stumbled upon. All the time I've been working with arrow functions I've seen on a {} format, what does this () wrapper mean?
With arrow functions, you can either use a single statement or a block as the function body. These two are equivalent:
() => foo
() => {
return foo;
}
In your example, if the lambda was defined as () => {post: action.msg}
the object ({}
) would be interpreted as a body block instead of an object. The runtime would try to parse it as an equivalent to:
function () {
post: action.msg
}
which is a named label and property access, and doesn't make much sense here. By wrapping in parens, you hint to the parser that it is an expression to be evaluated and the fat arrow function rules on single-expression bodies kick in, making it equivalent to:
function () {
return {post: action.msg};
}
To work around the single-expression rules when you want to do two related things (occasionally useful in map/reduce algorithms), you can use parens to group a pair of expressions:
foo.reduce((p, c) => (c.counted = true, p += c.value));
This will set the counted
property of c
, before adding c.value
to p
and returning the result of p += c.value
as the new value of p
.
The parentheses wrap an expression in ECMAScript and can be used, with the comma operator, to group multiple expressions. The results of the last expression are returned when the group is evaluated.
For example:
var i = 0, j = 0;
console.log((j += 10, i += 2), j);
will print 2 10
, since j
is incremented in the ()
group and printed later.
This is ES6 arrow function. More to read: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
ES6
(state, action) => ({ post: action.msg })
ES5
function(state, action) {
return { post: action.msg };
}
From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Returning_object_literals
Returning object literals
Keep in mind that returning object literals using the concise syntax params => {object:literal} will not work as expected:
var func = () => { foo: 1 }; // Calling func() returns undefined! var func = () => { foo: function() {} }; // SyntaxError: function statement requires a name
This is because the code inside braces ({}) is parsed as a sequence of statements (i.e. foo is treated like a label, not a key in an object literal).
Remember to wrap the object literal in parentheses:
var func = () => ({ foo: 1 });
so .. if you want to return an object literal, wrap it in ()
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With