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?

• Teemu: Possible duplicate of Using a variable for a key in a JavaScript object literal

Answer 1

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.