Typescript/JavaScript forEach

Question

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 1

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.

Answer 2

fn => fn() is a function definition, in C# they are called Lambda expressions and it is just syntactic sugar for the same function (fn) { return fn(); }.

fn is the input parameter, and => defines it as a function and the fn() is the return value.

Another example is

var add = (a,b) => a + b;

is the same as

function add(a, b) { 
    return a + b;
}