Use loop variable to make same-named function call - Javascript

Question

I have a loop in an init function:

  fruits = {
    apple: { color: 'green' },
    banana: { color: 'yellow' },
    kiwi: { color: 'green' }
  }

  ngOnInit() {
    for ( let fruit in this.fruits ) {
      if ( this.fruits[fruit].color === 'green' ) {
        // I want to use the current iterator
        this[fruit]()
      }
    }
  }

As you can see, I'm trying to make method calls to functions that satisfy the condition. The functions will have the same name as the "loop iterator" - I just can't figure out how to make the call with a dynamic name.

  apple() { ... }
  banana() { ... }
  kiwi() { ... }

So, if you look at the condition in the loop, apple() and kiwi() should be called, assuming they are green fruits.

Question: how do I put together the function call correctly, in the ngOnInit function?

I have tried: this[fruit]() , this.fruit() , this['fruit'] . What is the correct way?

looks like fruit variable is an object (judging by it having the color property) so you're trying to call this['[object Object]']() or smth like this. — Andrey
– Andrey, Commented Mar 13, 2019 at 15:57
If fruit were actually a string than proper way would be this[fruit]() — Andrey
– Andrey, Commented Mar 13, 2019 at 15:58
Correct, fruit is an object - just updated the question. But in the iterator, it is just a key, which is a 'string'. How can I use that value, just the value, to call a similar-named function? — bruh
– bruh, Commented Mar 13, 2019 at 15:59
Okay, so you're iterating an object using in operator, so fruit variable is a string, so correct way to check its color would be if (fruits[fruit].color === 'green') — Andrey
– Andrey, Commented Mar 13, 2019 at 16:00
You're right @Andrey , my example was just wrong - I'll update the iterator, however the this[fruit]() doesn't do anything. — bruh
– bruh, Commented Mar 13, 2019 at 16:01

Andrey · Accepted Answer · 2019-03-13 16:01:02Z

2

I think that would be the correct way of doing what you want

const fruits = {
  apple: { color: 'green' },
  banana: { color: 'yellow' },
  kiwi: { color: 'green' }
}

ngOnInit() {
  for ( let fruit in this.fruittree ) {
    if ( fruits[fruit].color === 'green' ) {
      // I want to use the current iterator
      this[fruit]();
    }
  }
}

answered Mar 13, 2019 at 16:01

Andrey

4,05023 silver badges35 bronze badges

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

1 Comment

bruh Over a year ago

This was right, my iterator in my application was incorrect. Thanks

Avanthika · Accepted Answer · 2019-03-13 16:02:57Z

1

You need to do the following to get your code working, we have to call this[key_in_obj]() to run the function.

const fruit = {
    apple: { color: 'green' },
    banana: { color: 'yellow' },
    kiwi: { color: 'green' }
  }
for(let fru in fruit) {
  console.log(fru);
  if (fruit[fru].color === "green") {
    this[fru]();
  }
}

edited Mar 13, 2019 at 16:02

answered Mar 13, 2019 at 15:58

Avanthika

4,1821 gold badge15 silver badges19 bronze badges

2 Comments

bruh Over a year ago

Unfortunately it does not have a name property (my real example the value is actually a boolean). I just want to use the key name, which is a string, is there no way to do that?

Mohamad Al Asmar Over a year ago

@bruh I don't think this is the best practice even if its working, imaging then you have 100 fruit, will you be able to maintain your code ? You have to pass in the fruit as a property to a single function that takes care of your business. check my answer below please.

Mohamad Al Asmar · Accepted Answer · 2019-03-13 16:19:46Z

I see you are trying to do some logic basic on a static condition using multiple functions named as per param value in the iterator, the correct method to do this is by creating one function and passing the fruit as a property and then do the logic there based on the property value itself using switch statement (you can also use if else conditions).

    const fruits = {
        apple: { color: 'green' },
        banana: { color: 'yellow' },
        kiwi: { color: 'green' }
    }
    handleGreenFruit(fruit: string) {
        switch (fruit) {
            case 'apple':
                console.log('do apple stuff')
                break;
            case 'kiwi':
                console.log('do kiwi stuff')
                break;
        }
    }
    ngOnInit() {
        for (let fruit in this.fruits) {
            if (this.fruits[fruit].color === 'green') {
                this.handleGreenFruit(fruit);
            }
        }
    }

Collectives™ on Stack Overflow

Use loop variable to make same-named function call - Javascript

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related