Use variable value as function name

Question

I have the code below to perform operations on the classList of every DOM-Element in the given list.

function editClassListOfElements(elements, className, operation) {
    switch (operation) {
        case "add":
            [].forEach.call(elements, function (element) {element.classList.add(className)});
            break;
        case "remove":
            [].forEach.call(elements, function (element) {element.classList.remove(className)});
            break;
        case "toggle":
            [].forEach.call(elements, function (element) {element.classList.toggle(className)});
            break;
        default:
            break;
    }
}

and I want to change it to something like this:

function editClassListOfElements(elements, className, operation) {
    [].forEach.call(elements, function (element) {element.classList. + operation + (className)});
}

If this is possible, how is it done?

Possible duplicate of [Using a variable for a key in a JavaScript object literal](http://stackoverflow.com/questions/2274242/using-a-variable-for-a-key-in-a-javascript-object-literal) — Teemu, Sep 12 '16 at 07:39

score 3 · Accepted Answer · answered Sep 12 '16 at 07:35

You can access fields of an object with brackets.

element.classList.add is equivalent to element.classList["add"]. So you can just do element.classList[operation](className) and it will call the function of classList named like the value of variable operation.

Use variable value as function name

1 Answers1