Can a function be invoked using a variable as a parameter in JavaScript?

Question

Can a function be invoked using a variable as a parameter in JavaScript?

Imagine a scenario where the need arises to use a conditional statement that performs the same action but calls a different method.

const c = true; // just for illustration
let b = '';
if (c) {
  b = 'method1';
} else {
  b = 'method2';
}

function a(){
   this.service.b(filter).subscribe((result) =>{
      // various actions take place
   });
}

Can we utilize the variable b dynamically to invoke a method from the service?

Check out the Stackblitz example

Upon examining the provided example, an updated snippet can be implemented as follows:

if (this.title == 'Students') {
  this.studentService.getStudents().then(results=> this.lists = results);
} else {
  this.studentService.getCandidates().then(results => this.lists = results);
}

However, is there a way to achieve something like this instead:

this.studentService.get[this.title]().then(results=> this.lists = results);

It was mentioned that it may not work in such manner as described above.

javascript angular typescript

Answer 1

Answer №1

In Typescript, you can access a specific method using index access by specifying the type of the index argument. If the type does not have an index signature (which is generally the case with classes), then the index argument must be of type keyof.

class DoStuff {
    messageA() : Promise<string> {
        return new Promise(r=> r("messsageA"));
    }

    messageB() : Promise<string> {
        return new Promise(r=> r("messsageB"));
    }
}

let k: keyof DoStuff = Math.random()> 0.5 ? "messageA" : "messageB";
let o = new DoStuff();
o[k]().then(m=> console.log(m))

If the class has multiple methods with incompatible signatures, calling the result of o[k] may not be possible. To overcome this, you can either explicitly list the methods you want to index (`let k: "messageA" | "messageB"`). Alternatively, you can use a type that filters the keys:

class DoStuff {
    messageA() : Promise<string> {
        return new Promise(r=> r("messsageA"));
    }

    messageB() : Promise<string> {
        return new Promise(r=> r("messsageB"));
    }
    util(): string { return ""}
}

let k: keyof DoStuff = (Math.random()> 0.5 ?"messageA" : "messageB") as keyof DoStuff;
let o = new DoStuff();
o[k]().then(m=> console.log(m)) //error

type FilterKeysByType<T, V> = { [P in keyof T] : T[P] extends V ? P : never}[keyof T]
let kok:FilterKeysByType<DoStuff, ()=> Promise<string>>  =  (Math.random()> 0.5 ?"messageA" : "messageB") as FilterKeysByType<DoStuff, ()=> Promise<string>>;
o[kok]().then(m=> console.log(m)) //error

Answer 2

In Typescript, you can access a specific method using index access by specifying the type of the index argument. If the type does not have an index signature (which is generally the case with classes), then the index argument must be of type keyof.

class DoStuff {
    messageA() : Promise<string> {
        return new Promise(r=> r("messsageA"));
    }

    messageB() : Promise<string> {
        return new Promise(r=> r("messsageB"));
    }
}

let k: keyof DoStuff = Math.random()> 0.5 ? "messageA" : "messageB";
let o = new DoStuff();
o[k]().then(m=> console.log(m))

If the class has multiple methods with incompatible signatures, calling the result of o[k] may not be possible. To overcome this, you can either explicitly list the methods you want to index (`let k: "messageA" | "messageB"`). Alternatively, you can use a type that filters the keys:

class DoStuff {
    messageA() : Promise<string> {
        return new Promise(r=> r("messsageA"));
    }

    messageB() : Promise<string> {
        return new Promise(r=> r("messsageB"));
    }
    util(): string { return ""}
}

let k: keyof DoStuff = (Math.random()> 0.5 ?"messageA" : "messageB") as keyof DoStuff;
let o = new DoStuff();
o[k]().then(m=> console.log(m)) //error

type FilterKeysByType<T, V> = { [P in keyof T] : T[P] extends V ? P : never}[keyof T]
let kok:FilterKeysByType<DoStuff, ()=> Promise<string>>  =  (Math.random()> 0.5 ?"messageA" : "messageB") as FilterKeysByType<DoStuff, ()=> Promise<string>>;
o[kok]().then(m=> console.log(m)) //error

Answer 3

Answer №2

A valid alternative to storing a function as a string is assigning the function directly to a variable, like this:

function bla() {
  console.log('bla');
}
let b = bla;
b();

Some users may disagree with this approach, so let me explain further. When calling b on this.service, the method described above won't work.

In objects, functions are attached using their name as the key. Therefore, it's recommended to use strings in such cases. Here's an example:

let thing = {};
thing.a = function() {}
let b = 'a';
thing[b]();

The same principle applies if your object is a class, like so:

class Thing {
 bla() {}
}
let a = new Thing();
let b = "bla";
a[b]();

Answer 4

A valid alternative to storing a function as a string is assigning the function directly to a variable, like this:

function bla() {
  console.log('bla');
}
let b = bla;
b();

Some users may disagree with this approach, so let me explain further. When calling b on this.service, the method described above won't work.

In objects, functions are attached using their name as the key. Therefore, it's recommended to use strings in such cases. Here's an example:

let thing = {};
thing.a = function() {}
let b = 'a';
thing[b]();

The same principle applies if your object is a class, like so:

class Thing {
 bla() {}
}
let a = new Thing();
let b = "bla";
a[b]();

Can a function be invoked using a variable as a parameter in JavaScript?

Answer №1

Answer №2

Similar questions

You are not able to access the instance member in Jest

Encountering an 'Unexpected token u in JSON at position 0' error while utilizing the scan function in Amazon

What is the process for invoking a websocket from an HTML client?

Experiencing a problem when switching between various divs on the website

Necessary CSS selector input equivalent in Reactive Forms

Unable to utilize angular-local-storage

Bringing a JavaScript file into an Ionic/Angular 2 project

Traverse through an array or object using recursive render functions in JavaScript

The correct value is not being received by the AJAX POST

Steps for setting up Node.js or npm on XAMPP

The link that has been clicked on should remain in an active state

Difficulty switching back and forth between three varying heights

Tips for ensuring that the dynamic view updates correctly when the scope variable is modified

Is it possible for React props to include bespoke classes?

Create HTML content on the fly and ensure its validity

Obtain the Angular 2 Form object within a TypeScript class file for manual configuration of form properties

Guide to Including Captions and Spans in a Table

The client-side validation in JavaScript seems to be malfunctioning

Angular input range slider that automatically rounds decimal values from the data bindings

A specialized React hook designed for fetching data in a continuous loop