Typescript How to access component variable in foreach loop?

Question

Hey can somebody tell me how I can access a component variable in foreach loop ? Here my Plunker

 public testVariable:number;

  test(){
    console.log('fired');
    var x  =[1,2,3,4];

    x.forEach(function (e){
      this.testVariable = e;
    })

    console.log( this.testVariable);
  }

Possible duplicate of [How to access the correct \`this\` context inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-context-inside-a-callback) — eko, Jun 01 '17 at 09:51

borislemke · Accepted Answer · 2017-06-01T09:36:54.927

33

If you use function (e), the this inside it will refer to the function's scope instead of the class.

Use the Arrow Function(or Fat Arrow) instead:

x.forEach((e) => {
    this.testVariable = e;
})

When having only 1 parameter, you may also omit the parenthesis around it:

x.forEach(e => {
    this.testVariable = e;
})

Here's a good article explaining it's behavior: https://basarat.gitbooks.io/typescript/docs/arrow-functions.html

edited Jun 01 '17 at 09:36

answered Jun 01 '17 at 09:27

borislemke

8,446
5
41
54

1

Won't the result of this always be `4`? Also, aren't all anonymous functions "lambda"s? – evolutionxbox Jun 01 '17 at 09:28
1

@evolutionxbox you are correct, lambda is a synonym for anonymous functions, I corrected the answer. Thanks for the heads up – borislemke Jun 01 '17 at 09:32
Exactly what I was looking for! – Khateeb321 Jan 09 '19 at 12:06
This was a big help. The article is no longer available, but it seems like odd behavior. – Steve Olson Dec 15 '21 at 15:46

score 7 · Answer 2 · answered Jun 01 '17 at 09:27

7

The value of this depends on the scope you're in. Consider doing it like this:

public testVariable:number;

test(){
    console.log('fired');
    var x  =[1,2,3,4];

    var self = this;
    x.forEach(function (e){
        self.testVariable = e;
    })

    console.log( this.testVariable);
}

answered Jun 01 '17 at 09:27

Halcyon

57,230
10
89
128

Your implementation was necessary for es5, but is obsolete in typescript et al – Jacques ジャック Jun 06 '17 at 14:54

Typescript How to access component variable in foreach loop?

2 Answers2