Ka Tech Ka Tech - 5 months ago 19
Javascript Question

Typscript/JavaScript forEach

I'm doing a tutorial on lexical scope handling by Typescript and I've come across the use of a function which I have never seen before. Which looks like an empty function in a forEach statement. In typescript it looks like this:

fns.forEach(fn=>fn());


In javascript it looks like:

fns.forEach(function (fn) { return fn(); });


I've never seen a function used like this. Can someone explain how this works? To be specific, what is fn=>fn() actually executing. In reference to the code below, is it executing the fns.push or for loop? If it is the For Loop there's no reference to this so how does it know?

Below is the full code:

TypeScript:

var fns = [];
for(var i=0;i<5;i+=1){
fns.push(function(){
console.log(i);
})
}
fns.forEach(fn=>fn());


JavaScript

var fns = [];
for (var i = 0; i < 5; i += 1) {
fns.push(function () {
console.log(i);
});
}
fns.forEach(function (fn) { return fn(); });

Answer

Check out this example:

var method = a => a+1;

method is a var that holds a reference to a function.
a is the input param.
a+1 is the methods body and return type.

Typescript will transpile this into:

var method = function (a) { return a + 1; };

Check out the typescript playground example and you will understand the concept pretty fast.

In your example fns is an array of functions.

doing fns.forEach(fn=>fn()); means execute each method in the fns array.