Call a Function by Its Name Stored in a String Using JavaScript

Last Updated : 22 Aug, 2026

In JavaScript, a function name can be stored in a string and used to call the corresponding function dynamically. This can be useful when the function to execute is determined at runtime.

  • The window object can be used to access globally defined functions by their names.
  • eval() can execute a function call stored as a string, but it should generally be avoided because of security risks.
  • Using a function lookup object is a safer and more modern alternative when the available functions are known in advance.

The following approaches can be used to call a function from its name stored in a string.

Approach 1: Using the window Object

In a browser environment, globally declared functions can be accessed as properties of the window object. The function name stored in a string can be used with bracket notation to retrieve and call the function.

html 
<h1 style="color: green">GeeksforGeeks</h1>

<p class="example">
    GeeksforGeeks is a computer science portal.
</p>

<button onclick="evaluateFunction()">
    Change Color
</button>

<script>
    function changeColor(color) {
        document.querySelector(".example").style.color = color;
    }

    function evaluateFunction() {
        const functionName = "changeColor";
        const param = "green";

        window[functionName](param);
    }
</script>

Syntax:

window[functionName](parameters);
  • functionName contains the function name as a string.
  • window[functionName] retrieves the corresponding function.
  • The function is then called with the required parameters.

Note: This approach works for functions available as properties of the global window object. It is not suitable for accessing local or module-scoped functions.

Approach 2: Using the eval() Method

The eval() method evaluates a string as JavaScript code. Therefore, a string containing a function call can be passed to eval().

html 
<h1 style="color: green">GeeksforGeeks</h1>

<p class="example">
    GeeksforGeeks is a computer science portal.
</p>

<button onclick="evaluateFunction()">
    Change Color
</button>

<script>
    function changeColor(color) {
        document.querySelector(".example").style.color = color;
    }

    function evaluateFunction() {
        const functionCall = "changeColor('green')";

        eval(functionCall);
    }
</script>


Syntax:

eval(functionCall);
  • functionCall contains JavaScript code as a string.
  • eval() executes the string as JavaScript code.
  • The string can contain a function call along with its arguments.

Note: Avoid using eval() with untrusted or user-provided input because it can execute arbitrary JavaScript code and create security vulnerabilities.

Approach 3: Using an Object as a Function Lookup

A safer approach is to store allowed functions in an object and use the string as a key. This avoids dynamically executing arbitrary JavaScript code.

HTML 
<h1 style="color: green">GeeksforGeeks</h1>

<p class="example">
    GeeksforGeeks is a computer science portal.
</p>

<button onclick="evaluateFunction()">
    Change Color
</button>

<script>
    function changeColor(color) {
        document.querySelector(".example").style.color = color;
    }

    const functions = {
        changeColor: changeColor
    };

    function evaluateFunction() {
        const functionName = "changeColor";
        const param = "green";

        if (typeof functions[functionName] === "function") {
            functions[functionName](param);
        }
    }
</script>
  • The functions object contains only the functions that are allowed to be called.
  • The string "changeColor" is used as a property name.
  • functions[functionName] retrieves the corresponding function.
  • The function is executed only after checking that it is actually a function.

Note: For modern JavaScript applications, a function lookup object is generally preferable to eval() because it restricts which functions can be executed and avoids evaluating arbitrary code.

Comment

Explore