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(); });

What's so complicated? It executes each function in the array. However, your examples won't work, because of the closure issue. Try changing var in the for loop to let. Also, although not relevant to your question, arrow functions are not TypeScript specific--they are just plain old ES6. — user663031
– user663031, Commented Jul 5, 2016 at 6:01

Amir Popovich · Accepted Answer · 2016-07-05 06:23:07Z

3

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.

answered Jul 5, 2016 at 6:23

Amir Popovich

30.1k9 gold badges58 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ka Tech Over a year ago

Thanks for the response, so where I am getting confused is what is the actual method is it executing? eg the For Loop or fns.push??

Ka Tech Over a year ago

Ahh got it now the method is function(){console.log(i)}; That is what I was missing. Thanks for your explanation!!

Adrian Brand · Accepted Answer · 2016-07-05 06:16:51Z

3

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;
}

edited Jul 5, 2016 at 6:16

user663031

answered Jul 5, 2016 at 6:13

Adrian Brand

21.8k4 gold badges46 silver badges67 bronze badges

1 Comment

user663031 Over a year ago

In this case it may be syntactic sugar, but in general it's not, in the sense that this and related issues are defined differently.

user6269864 · Accepted Answer · 2016-07-05 06:05:10Z

2

It is looping through an array of functions, because functions can be stored inside variables just like strings, integers etc. So you're looping through an array of functions and executing them like this: return fn();

answered Jul 5, 2016 at 6:05

user6269864

Collectives™ on Stack Overflow

Typescript/JavaScript forEach

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related