Converting ECMAScript 6's arrow function to a regular function

Question

I have the following arrow function

if( rowCheckStatuses.reduce((a, b) => a + b, 0) ){}

rowCheckStatuses is an array of 1's and 0's, this arrow function adds them all up to produce a number. This number acts as a boolean to determine whether or not there is at least one "1" in the array.

The issue is, I don't really understand how arrow functions work, and my IDE thinks it's bad syntax and refuses to check the rest of my document for syntax errors.

How would I go about converting this to a regular function to alleviate both issues?

Obviously not a duplicate. OP asks about converting => to regular functions. — le_m, Jun 06 '16 at 23:22

Mulan · Answer 1 · 2016-06-06T23:20:35.267

13

An arrow function can usually be converted by replacing

(<args>) => <body>

with

function(<args>) { return <body>; }

So yours would be

rowCheckStatuses.reduce(function(a, b) { return a + b; }, 0)

There are exceptions to this rule so it's important that you read up on arrow functions if you want to know all of the differences. You should also note that arrow functions have a lexical this.

edited Jun 06 '16 at 23:20

answered Jun 06 '16 at 23:13

Mulan

129,518
31
228
259

RobG · Accepted Answer · 2016-06-06T23:20:05.187

7

You can refactor it as:

if( rowCheckStatuses.reduce(function(a, b){return a + b}, 0)

The initial accumulator isn't necessary (unless you expect the array to be empty sometimes), it could be:

if( rowCheckStatuses.reduce(function(a, b){return a + b})

This number acts as a boolean to determine whether or not there is at least one "1" in the array

It might be faster (and clearer) to use:

if( rowCheckStatuses.some(function(a){return a == 1}))

which will return true if there are any 1s in rowCheckStatuses and will return as soon as one is encountered. Another alternative is indexOf:

if( rowCheckStatuses.indexOf(1) != -1)

Lots of alternatives.

edited Jun 06 '16 at 23:20

answered Jun 06 '16 at 23:14

RobG

142,382
31
172
209

2

This isn't technically exactly equivalent. You lose the lexical `this` if you change from an arrow function to a function expression. In this case, it doesn't matter because the function doesn't reference this. But it's a good point to keep in mind. The good news is it's easy - just add a `.bind(this)` to the function. – Joe Attardi Jun 07 '16 at 13:49
1

@JoeAttardi—good point, but as you say, lexical *this* isn't relevant in this case. ;-) – RobG Jun 07 '16 at 23:44

score 4 · Answer 3 · edited May 23 '17 at 12:22

Replacing arrow functions with regular functions is usually unproblematic:

var f = x => y;
var g = function(x) { return y; }

Or, in your specific example:

rowCheckStatuses.reduce((a, b) => a + b, 0);
rowCheckStatuses.reduce(function(a, b) { return a + b; }, 0);

However, be aware of the exceptions:

Arrow functions don't bind a this value. Accessing this in an arrow function might thus return the value of the enclosing execution context's this:

function MyClass() {}
MyClass.prototype.f = () => this;
MyClass.prototype.g = function() { return this; }

myClass = new MyClass();
console.log(myClass.f()); // logs `Window`
console.log(myClass.g()); // logs `myClass`

Arrow functions also don't have access to a local arguments object. Accessing arguments in an arrow function might e. g. return the arguments of an enclosing function:

function test() {

  var f = () => arguments;
  var g = function() { return arguments; }
  
  console.log(f()); // logs test's arguments
  console.log(g()); // logs g's arguments
}

test('x');

The same holds for new.target and super. See also What are the differences (if any) between ES6 arrow functions and functions bound with Function.prototype.bind?

Converting ECMAScript 6's arrow function to a regular function

3 Answers3

Linked

Related