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.

Answer from Mulan on Stack Overflow
🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › JavaScript › Reference › Functions › Arrow_functions
Arrow function expressions - JavaScript - MDN Web Docs
February 21, 2026 - Note: Class fields are defined ... leading to more memory usage than a normal unbound method. For similar reasons, the call(), apply(), and bind() methods are not useful when called on arrow functions, because arrow functions establish this based on the scope the arrow function is defined within, and the this value does not change based on how ...
Discussions

Arrow function: how to rewrite to regular function?
Can anyone please help I want to rewrite all arrow functions in this code into regular functions. A little explanation on ( 1 ) would be helpful. const Person = (name) => { const sayName = () => console.log(`my name is ${name}`) return {sayName} } const Nerd = (name) => { // simply create a ... More on forum.freecodecamp.org
🌐 forum.freecodecamp.org
1
0
August 25, 2020
Converting Arrow function into regular function
Alexander D is having issues with: Hello there, Simple question here. I am trying to follow Guil's video and I am trying to re-write the syntax of his functions. I believe... More on teamtreehouse.com
🌐 teamtreehouse.com
2
September 10, 2019
javascript - change arrow function to normal function?
$('#interactive-layers').on('click', ... Here I change the Arrow function with the es5 normal one. /* let movieData = movies.find(({ movieid }) => movieid == 23); */ let movieData = movies.find(function(movieid){ return movieid == 23; }); hist.push(movieData); playVideo(hist[3], hist[1], hist[2]); } else { playVideo(hist[0], hist[1], hist[2]); } }); ... Ahmed A. MahmoudAhmed A. Mahmoud ... You need to convert it ... More on stackoverflow.com
🌐 stackoverflow.com
Es6 Arrow function to normal js - javascript
It can convert arrow function to normal function. More on stackoverflow.com
🌐 stackoverflow.com
October 31, 2016
🌐
freeCodeCamp
freecodecamp.org › news › the-difference-between-arrow-functions-and-normal-functions
Arrow Functions vs Regular Functions in JavaScript – What's the Difference?
April 13, 2023 - Since print2 is an arrow function, it doesn't create its own this variable. Therefore, any reference to this would point to what the value of this was before the function was created. In this case where obj calls print, this was pointing to obj before print2 was created. As you can see in the results, by logging this from print2, obj is the result. ... With normal functions, you can create constructors which serve as a special function for instantiating an object from a class.
Find elsewhere
🌐
Charandev
charandev.com › convert-your-traditional-functions-into-arrow-functions-in-3-simple-steps
https://charandev.com/convert-your-traditional-fun...
Hey there 👋 I’m Sai Charan, a full-stack web developer👨‍💻, photographer📸 and technology enthusiast📱 who specializes in front-end development.
🌐
W3Schools
w3schools.com › js › js_arrow_function.asp
JavaScript Arrow Functions
You can skip the function keyword, the return keyword, and the curly brackets: const multiply = (a, b) => a * b; Try it Yourself » · Arrow Functions were introduced in ES6 and are commonly used in modern JavaScript.
🌐
Plain English
plainenglish.io › blog › how-to-convert-any-function-to-an-arrow-function-in-javascript-afb0c87e411d
How To Convert Any Function To An Arrow Function In JavaScript
December 1, 2012 - //traditional function function sayHi(name){ const message = "Hi " + name; return message; } //apply step 1: (name) => { const message = "Hi " + name; return message; } //apply step 2: name => { const message = "Hi " + name; return message; } //apply step 3: name => { const message = "Hi " + name; return message; } //apply step 4, (since the returned expression can fit easily into //one line no need to change anything here): name => { const message = "Hi " + name; return message; } When applying the steps above, do not forget that you do not need to apply all four steps. Once you apply the first step you technically converted a traditional function to an arrow function.
🌐
CopyProgramming
copyprogramming.com › howto › how-to-convert-arrow-function-into-a-regular-function
Converting an Arrow Function to a Traditional Function: A Step-by-Step Guide - Javascript
April 28, 2023 - The expression following => in an arrow function is automatically returned by the function. In order to use regular functions, it is necessary to utilize the keyword return and encase your properties with {} .
Top answer
1 of 2
8

It would look like this if you just converted the arrow function to a function function:

sortedArticles(): Article[] {
    return this.articles.sort(function(a: Article, b: Article) { return b.votes -  a.votes;});
// ---------------------------^^^^^^^^------------------------^^^-------------------------^^
}

...but note that there's more going on there than ES2015 ("ES6"). The : Article[] part is saying that sortedArticles returns an array of Article. (And similarly the : Article qualifiers on a and b.) That's not JavaScript at all. It looks like TypeScript.

The pure JavaScript version would just drop those type annotations:

sortedArticles() {
    return this.articles.sort(function(a, b) { return b.votes -  a.votes;});
}

But TypeScript's "fat arrow" functions work largely the same way ES2015's arrow functions do, so let's continue on the basis that we're talking about ES2015 arrow functions:

There are four fundamental differences1 between arrow functions and function functions:

  1. They close over this, super, and several other things,2 they don't have their own versions of those like function functions do. (A consequence of this is that they can use super if they're defined in a context that can use super, which function functions cannot.)

  2. They can have a concise body rather than a verbose one (but they can have a verbose body as well).

  3. They cannot be used as constructors. E.g., you can't use new with an arrow function. A consequence of this is that arrow functions don't have a prototype property on them (since it's only used if the function is used with new).

  4. There is no generator syntax for arrow functions. E.g., there is no arrow equivalent to function *foo() { ... }.

These three functions are all effectively the same, since they don't use this or arguments:

// A `function` function
var f1 = function(x) {
    return x * 2;
};

// An arrow function with a verbose body
var f2 = x => {
    return x * 2;
};

// An arrow function with a concise body
var f3 = x => x * 2;

(If they used this or arguments, they would not be the same.)

Note that the concise body doesn't have a { after the => and must contain a single top-level expression (which can of course have subexpressions), which is used as the return value.


1 You'll find people telling you there's a fifth: That arrow functions cannot have a name. That's a myth. Arrow functions can have names; the arrow functions above have true names, f2 and f3 respectively. It's not just the variables that have names, the functions do as well.

2 Specifically, they close over this, super, arguments (the automatic pseudo-array of runtime arguments), and new.target.


A huge thank you to CodingIntrigue for pointing out several errors and omissions in the earlier versions of this answer.

2 of 2
0

If you're not familiar with arrow function, or if it's complicated, you can use JS Refactor, it's a Visual Studio Code extension. It can convert arrow function to normal function. Hope it helps someone.

🌐
Stack Overflow
stackoverflow.com › questions › 71984929 › how-to-convert-this-arrow-function-to-a-normal-function
How to convert this arrow function to a normal function?
April 24, 2022 - Arrow functions don't have their own bindings to this, arguments or super, and should not be used as methods.
Top answer
1 of 1
2

The id (number) property is defined as an argument of the function getHero, thus, is not available in your function findHero. You tried to use this.id but the compiler is telling you that such a property does not exits in your class HeroService, which is correct of course, as if you wanted to have that property as part of your service then you would have to do something like this in your getHero method.

getHero(id: number, ...etc) {
    this.id = id;
    // etc.
}

However, that would bring you another problem: as your method getHeroes seems to be async code (I can tell because it is returning a Promise) this approach will cause you headaches with concurrency problems when your method getHero is called twice (or more times) from different parts of the application. The first getHero call will set this.id to x but in the meantime, while the async code is run, another call to getHero will set it to y, making that the callback findHero run in response to the first call use an incorrect value for the id(specifically, it will read y as the value for this.id).

So... long story short. You would probably want to read more about CLOSURES and why they are so important for JavaScript. Short answer to your question, use this:

getHero(id: number): Promise<Hero> {
    return this.getHeroes().then( heroes => heroes.find(this.findHero.bind(this, id));
}

And define your callback findHero as

findHero(idToFind: number, hero: Hero, index, array: Hero[]) {
    return hero.id === idToFind;
}

The reason why you need this is that the this is not passed automatically to the functions that you use as arguments for other functions (or methods, as in this case). So by using bind you explicitly BIND the this of such a function so that whenever you use this in findHero it points to the right object. The second argument of bind is binding the id you are looking for to every call of the function findHero, so that whenever the function returned by bind is called it happens two things:

  1. The this is bound to HeroService.
  2. Along with the arguments the function would normally receive, you are also binding another argument that will be automatically injected into the arguments of calls to that function.

Just one minor note... you are using TypeScript, so the this argument in your bind is pointless, as TypeScript automatically binds all methods in your class to the current instance, but you need it in this case because you also want to bind the second argument (the id to find).

I hope it I helped.

🌐
Stack Overflow
stackoverflow.com › questions › 61229216 › how-to-change-arrow-function-to-normal-function-that-it-works-in-internet-explor
How to change arrow function to normal function that it works in Internet explorer?
April 15, 2020 - Just use a normal function then?! There's nothing in your code that needs arrow-specific features. ... According to this page http://kangax.github.io/compat-table/es6/, ES6 features ( Inculding arrow and anonymous functions ) are not implemented in IE 11.
🌐
GitHub
github.com › dart-lang › sdk › issues › 23963
analyzer: convert arrow function to normal function · Issue #23963 · dart-lang/sdk
August 4, 2015 - I would wish that some refactoring like this existed: convert arrow function to normal function (and vice versa) basicly, it should refactor: bool get dartIsAwesome => true; to: bool get dartIsAwesome { return true; }
Author   kasperpeulen