Javascript Array of Functions loses the This scope

Question

Testing some code I found this problem, when I call the functions of the class Results directly, those work fine, but when I push those to an array and then I call the functions those don't work, because the this keyword is lost and the console shows the message of undefined.

class Results
{
    sum(numbers){
      let result=numbers.reduce((a,b)=>a+b);
      return result;
    }

    state(numbers){
      console.log(this);
      let result= this.sum(numbers)>0 ? "positive" : "negative";
      return result;
    }
}

function play(){
    let results=new Results(); 

    let numbers=[1,2,3,4];

    console.log(results.sum(numbers));
    console.log(results.state(numbers));

    let arrayfunctions=[];

    arrayfunctions.push(results.sum);
    arrayfunctions.push(results.state);

    arrayfunctions.forEach(funcion=>
    {
        console.log(funcion(numbers))
    });
}

Siva Kondapi Venkata · Accepted Answer · 2019-12-24 17:53:30Z

2

Slight change is defining class methods.

sum(numbers) {
  let result=numbers.reduce((a,b)=>a+b);
  return result;
}

Changed to function assigned to class member variable

sum = (numbers) => {
  let result=numbers.reduce((a,b)=>a+b);
  return result;
}

class Results
{
    sum = (numbers) => {
      let result=numbers.reduce((a,b)=>a+b);
      return result;
    }

    state = (numbers) => {
      console.log(this);
      let result= this.sum(numbers)>0 ? "positive" : "negative";
      return result;
    }
}

function play(){
    let results=new Results(); 

    let numbers=[1,2,3,4];

    console.log(results.sum(numbers));
    console.log(results.state(numbers));

    let arrayfunctions=[];

    arrayfunctions.push(results.sum);
    arrayfunctions.push(results.state);

    arrayfunctions.forEach(funcion=>
    {
        console.log(funcion(numbers))
    });
}

play();

edited Dec 24, 2019 at 17:53

answered Dec 24, 2019 at 17:41

Siva Kondapi Venkata

11.1k2 gold badges20 silver badges32 bronze badges

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

1 Comment

Andreas Over a year ago

What have you changed and why did you change it? Adding an explanation will make it more valuable for OP and future readers.

Mitya · Accepted Answer · 2019-12-24 18:01:17Z

0

Several ways round this. One would be to store the name of the method in the array, rather than a reference to it (which will indeed, as you've discovered, change the this context.)

arrayfunctions = ['sum', 'state'];
arrayfunctions.forEach(method => console.log(results[method](numbers)));

answered Dec 24, 2019 at 18:01

Mitya

34.8k15 gold badges70 silver badges126 bronze badges

Collectives™ on Stack Overflow

Javascript Array of Functions loses the This scope

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related