Scope: How to access/manipulate global variables in typescript

Question

I am building an algorithm in typescript/ionic 2 that requires a function hierarchy (functions within functions). I am 99% sure that there is no way to avoid having nested functions because of the google API (long explanation required, just trust me on that)

I will use a simple demo that illustrates my problem to avoid posting 300 lines of code.

The problem involves accessing and manipulating global variables within the nested functions. I need a way of setting the this.secondvar in the secondSet function. Are there any ways to achieve this?

export class HomePage {

  public firstVar = [];
  public secondvar;
  constructor(public navCtrl: NavController) {

  }

  ionViewDidLoad(){
    this.setVar();
  }

  setVar(){
    this.firstVar.push("hello", "goodbye");
    console.log();
    getVar();

    function getVar(){
      //console.log(this.lol); unable to access
      secondSet();

      function secondSet(){
        console.log("test")
        //this.secondVar = "hello" //how do i set this ?
      }
    }
  }
}

Suraj Rao · Accepted Answer · 2017-03-28 12:56:34Z

2

Use Arrow functions which takes the scope of the class.It will not have its own this value.

setVar(){
 this.firstVar.push("hello", "goodbye");
 console.log();

let getVar=()=>{
  //console.log(this.lol); unable to access

  let secondSet=()=>{
    console.log("test")
    //this.secondVar = "hello" //how do i set this ?
  }
        secondSet();

}
     getVar();
}

what is the reasoning behind the positioning of the function calls? Why are they called after the function is declared?

It is because of the use of let.let variable declaration is block scoped. According to the docs:

property of block-scoped variables is that they can’t be read or written to before they’re actually declared. While these variables are “present” throughout their scope, all points up until their declaration are part of their temporal dead zone.

So:

     secondSet();//throws error

  let secondSet=()=>{
    console.log("test")
    //this.secondVar = "hello" //how do i set this ?
  }

edited Mar 28, 2017 at 12:56

answered Mar 28, 2017 at 9:53

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

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

2 Comments

Dansmith12 Over a year ago

"ts cannot find name "getVar""

Dansmith12 Over a year ago

Thanks. One question, what is the reasoning behind the positioning of the function calls? Why are they called after the function is declared?

Yuvraj Patil · Accepted Answer · 2017-03-28 09:37:59Z

1

Use context variable. Assign value of "this" to a local variable say "context". use "context" variable as "this".

export class HomePage {

  public firstVar = [];
  public secondvar;
  constructor(public navCtrl: NavController) {

  }

  ionViewDidLoad(){
    this.setVar();
  }

  setVar(){
     var context = this;
    this.firstVar.push("hello", "goodbye");
    console.log();
    getVar();

    function getVar(){
      //console.log(this.lol); unable to access
      secondSet();

      function secondSet(){
        console.log("test")
        context.secondVar = "hello" // This is how you access the secondVar 
      }
    }
  }
}

answered Mar 28, 2017 at 9:37

Yuvraj Patil

8,8605 gold badges63 silver badges62 bronze badges

Comments

Alex Paven · Accepted Answer · 2017-03-28 09:52:19Z

0

You can define your inner functions to be arrow functions (lambdas), which will preserve the context of 'this'. So something like this:

var secondSet = () => { this.secondVar = 'whatever' };

If you look at the compiled javascript, it automatically saves the value of 'this' to a variable and uses that in the lambda.

answered Mar 28, 2017 at 9:52

Alex Paven

5,5492 gold badges24 silver badges35 bronze badges

2 Comments

Dansmith12 Over a year ago

How do i call that function

Alex Paven Over a year ago

It's a function like any other so just secondSet(). Or any of the other ways you can call a function (call, apply).

Collectives™ on Stack Overflow

Scope: How to access/manipulate global variables in typescript

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related