Hướng dẫn call function dynamically javascript

As Triptych points out, you can call any global scope function by finding it in the host object's contents.

A cleaner method, which pollutes the global namespace much less, is to explicitly put the functions into an array directly like so:

var dyn_functions = [];
dyn_functions['populate_Colours'] = function [arg1, arg2] { 
                // function body
           };
dyn_functions['populate_Shapes'] = function [arg1, arg2] { 
                // function body
           };
// calling one of the functions
var result = dyn_functions['populate_Shapes'][1, 2];
// this works as well due to the similarity between arrays and objects
var result2 = dyn_functions.populate_Shapes[1, 2];

This array could also be a property of some object other than the global host object too meaning that you can effectively create your own namespace as many JS libraries such as jQuery do. This is useful for reducing conflicts if/when you include multiple separate utility libraries in the same page, and [other parts of your design permitting] can make it easier to reuse the code in other pages.

You could also use an object like so, which you might find cleaner:

var dyn_functions = {};
dyn_functions.populate_Colours = function [arg1, arg2] { 
                // function body
           };
dyn_functions['populate_Shapes'] = function [arg1, arg2] { 
                // function body
           };
// calling one of the functions
var result = dyn_functions.populate_Shapes[1, 2];
// this works as well due to the similarity between arrays and objects
var result2 = dyn_functions['populate_Shapes'][1, 2];

Note that with either an array or an object, you can use either method of setting or accessing the functions, and can of course store other objects in there too. You can further reduce the syntax of either method for content that isn't that dynamic by using JS literal notation like so:

var dyn_functions = {
           populate_Colours:function [arg1, arg2] { 
                // function body
           };
         , populate_Shapes:function [arg1, arg2] { 
                // function body
           };
};

Edit: of course for larger blocks of functionality you can expand the above to the very common "module pattern" which is a popular way to encapsulate code features in an organised manner.

function customClick[button] {
  button.addEventListener['click', function [event] {
    alert['custom click'];
  }];
}

function customUppercase[input] {
  input.addEventListener['keyup', function [] {
    input.value = input.value.toUpperCase[];
  }];
}

 
Done

const options = ['Click', 'Uppercase'];

for [let i = 0; i