Javascript - Variable gets Undefined after a function

Question

I have two classes. One that contains the function and the other that matters that function. For some reason I could not figure out the value of the variable after the function is Undefined.

First class

export class MoveEff {

    checkEffect(effectFaceOff1,moveEff1,moveEff2){
        if ( effectFaceOff1=== 'grassgrass') {

            moveEff1 = 10;
            console.log(moveEff1);

        }
    }
}

Second class :

import { Component, OnInit } from '@angular/core';
import {GenIService} from "../Pokemons/gen-i.service";
import {MovesService} from "../Moves/moves.service";
import {MoveDataClass} from "../MoveDATA/move-data-class";
import {MoveEff} from "../MoveDATA/move-eff";

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage implements OnInit {

  effectFaceOff1;
  moveEff1;
  moveEff2;

constructor(private moveeff: MoveEff) {}

 this.moveeff.checkEffect(this.effectFaceOff1,this.moveEff1,this.moveEff2);

 console.log(this.moveEff1,this.moveEff2);

On the last console.lo I should see the value 10 of moveEff1, but Undefined appears.

Why and how I can solve?

Answer 1

So, what you’re trying to do won’t work anyway and probably on the console should be showing errors because:

• first : You are making a dependency injection of a common class.
• 2nd : You are using this outside a context, that is, outside a method such as ngOnInit() for example.

Some alternatives that can help you get what you want to do:

1 - Turning the class into a service

import { Injectable } from "@angular/core";
import { BehaviorSubject } from "rxjs";

@Injectable()
export class MoveEff {
  checkEffect(effectFaceOff1, moveEff1, moveEff2) {
    if ( effectFaceOff1=== 'grassgrass') {
      moveEff1 = 10;
      console.log('Esse valor é: ', moveEff1);  // no console Esse valor é 10
    }
  }
}

Class calling the service:

import { Component, OnInit } from '@angular/core';
import {GenIService} from "../Pokemons/gen-i.service";
import {MovesService} from "../Moves/moves.service";
import {MoveDataClass} from "../MoveDATA/move-data-class";
import {MoveEff} from "../MoveDATA/move-eff";

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  providers: [MoveEff]
})
export class HomePage implements OnInit {

  effectFaceOff1;
  moveEff1;
  moveEff2;

  constructor(private moveeff: MoveEff) {}

  ngOnInit() {
    this.moveeff.checkEffect(this.effectFaceOff1,this.moveEff1,this.moveEff2);
    console.log(this.moveEff1,this.moveEff2);
  }
}

OBS: You can see the code working here.

---

2 - Exporting the function directly instead of a class

export function checkEffect(effectFaceOff1, moveEff1, moveEff2) {
  if (effectFaceOff1 === "grassgrass") {
    moveEff1 = 10;
    console.log('Esse valor é: ', moveEff1);  // no console Esse valor é 10
  }
}

Class calling the service:

import { Component, OnInit } from '@angular/core';
import { checkEffect } from './moveeff';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {

 effectFaceOff1 = 'grassgrass';
 moveEff1;
 moveEff2;

 constructor() {}

 ngOnInit() {
   checkEffect(this.effectFaceOff1,this.moveEff1,this.moveEff2);  // sem o this
   console.log(this.moveEff1,this.moveEff2);
 }

}

OBS: You can see the code working here.