자바스크립트 문자열로 함수를 실행하는 방법

함수의 이름을 변수의 문자열로 저장하고, 이 문자열을 사용해 함수를 호출할 수 있습니다. 문자열로 과연, 함수를 어떻게 실행할 수 있을까요? 몇 가지 방법이 있습니다.

이 글은 How to execute a Javascript function when its name as a string 및 How to execute a JavaScript function when I have its name as a string의 예시 및 답변을 인용 및 정리한 글입니다.

eval()

eval을 사용하는 방법으로 간단하지만, 정말로 꼭 사용해야 하는 경우가 아니라면 사용하지 않는 것이 좋습니다.

function fnLogin(userName, password) {
    console.log("User: " + userName);
    console.log("Pass: " + password);
}

function fnLogout() {
    console("Logged out");
}

var strfn = "fnLogin"
strfn(); // TypeError: strfn is not a function

eval(strfn + "('user1', 'pwd')");
eval("fnLogout()");

객체에 할당해 처리

function fnLogin(userName, password) {
    console.log("User: " + userName);
    console.log("Pass: " + password);
}

function fnLogout() {
    console("Logged out");
}

var strfn = "fnLogin"

let context = {}; // 함수를 할당할 객체를 생성

context["fnLogin"] = fnLogin;
context["fnLogout"] = fnLogout;

function execFn (fnName, context /*, args */) {
  let args = Array.prototype.slice.call(arguments, 2);
  return context[fnName].apply(context, args);
}

exeFn(strfn, context, "user2", "pwd2");
exeFn("fnLogout", context")

닷 노테이션 대신 브라켓을 활용

x.y.foo()는 x.y['foo']() 또는 x['y']['foo']() 또는 window['x']['y']['foo']()로 대체할 수 있습니다.

window["functionName"](arguments);
window["My"]["Namespace"]["functionName"]();

클라스의 활용

class X {
  method1(){
    console.log("1");
  }
  method2(){
    this['method1']();
    console.log("2");
  }
}
let x  = new X();
x['method2']();