Why is `mapStateToProps` always an anonymous function?

Question

In the official documentation for using React with Redux, the documentation seems to always define mapStateToProps as an anonymous arrow function assigned to a variable:

const mapStateToProps = (state, ownProps) => {
  return {
    active: ownProps.filter === state.visibilityFilter
  }
}

This also seems to be the usage pattern for mapDispatchToProps and other functions passed to connect both in the docs and in the community.

It seems it would be much more simple, and follow traditional usage, to define it like so:

function mapStateToProps(state, ownProps) {
  return {
    active: ownProps.filter === state.visibilityFilter
  }
}

Why is this done? Is there a practical reason for this, or is it just preference? Is it frowned upon to use a standard function definition?

score 3 · Accepted Answer · answered Aug 31 '16 at 16:47

3

No particular reason, it's just the style that was used in writing the docs. Feel free to write your mapState function as either arrows or standard function declarations, declared standalone or declared inline. No difference either way.

answered Aug 31 '16 at 16:47

markerikson

63,178
10
141
157

score 1 · Answer 2 · edited Jun 25 '17 at 16:37

1

Is it really anonymous though?

const mapStateToProps = (state, ownProps) => {
  return {
    active: ownProps.filter === state.visibilityFilter
  }
}
console.log(mapStateToProps.name)

More info:

How do I write a named arrow function in ES2015?

For all intends and purpose, that mapStateToProps is going to show the right name in stack traces, as opposed to <anonymous function>.

edited Jun 25 '17 at 16:37

atwright147

3,694
4
31
57

answered Aug 31 '16 at 16:52

Willem D'Haeseleer

19,661
9
66
99

The technical term is still anonymous functions I believe, even though engines have added better handling for them. You're right though, it will show up in a stack trace for most newer browsers (as will old-style anonymous functions). – Chris Foster Aug 31 '16 at 17:04
Named fat arrow expression are in fact fully covered by the spec http://www.ecma-international.org/ecma-262/6.0/index.html#sec-assignment-operators-runtime-semantics-evaluation Off course it's true that it's only supported by newer browsers. – Willem D'Haeseleer Aug 31 '16 at 17:13
Yes, but those are still called anonymous function definitions, not named functions. They just have `name` parameters on the variable. The spec you linked to uses that terminology, and the [mozilla developer network](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) also does. – Chris Foster Aug 31 '16 at 17:30
@ChrisFoster http://www.ecma-international.org/ecma-262/6.0/index.html#sec-isanonymousfunctiondefinition – Willem D'Haeseleer Aug 31 '16 at 17:37
You're not reading the specs you are linking to. `IsAnonymousFunctionDefinition` is called during [lefthand assignment](http://www.ecma-international.org/ecma-262/6.0/index.html#sec-assignment-operators-runtime-semantics-evaluation), and **always** returns true because [`HasName` is **always** false for arrow functions](http://www.ecma-international.org/ecma-262/6.0/index.html#sec-arrow-function-definitions-static-semantics-hasname). Then, seeing that it is an anonymous function, lefthand assignment adds a `name` parameter to the lefthand expression (the variable). _The function is anonymous!_ – Chris Foster Aug 31 '16 at 17:54

Why is `mapStateToProps` always an anonymous function?

2 Answers2