JavaScript에서 함수 이름이 문자열로 저장되어 있을 때 해당 함수를 실행하려면 대괄호 표기법(Bracket Notation)을 활용하면 됩니다. 객체의 속성이나 클래스의 메서드는 점(.) 표기법 대신 대괄호 안에 문자열로 된 이름을 넣어 동적으로 접근할 수 있습니다.
대괄호 표기법으로 메서드 실행하기
아래 예제에서는 클래스 내부의 메서드를 문자열 이름으로 호출하는 방법을 보여줍니다. this['methodOne']()처럼 작성하면 this.methodOne()과 동일하게 동작합니다.
예제
<html>
<body>
<script>
class Demo {
methodOne(){
document.write("50");
}
methodTwo(){
this['methodOne'](); // 문자열로 메서드 호출
document.write("<br> 100");
}
}
let num = new Demo();
num['methodTwo'](); // 인스턴스에서도 문자열로 호출 가능
</script>
</body>
</html>실행 결과
50 100
전역 함수를 문자열로 실행하기
클래스가 아닌 전역 스코프에 정의된 함수라면 window 객체를 통해 문자열 이름으로 호출할 수 있습니다.
function greet() {
console.log("안녕하세요!");
}
const funcName = "greet";
window[funcName](); // "안녕하세요!" 출력주의 사항
문자열 기반 함수 실행은 코드 가독성과 디버깅을 어렵게 만들 수 있으며, 사용자 입력값을 그대로 함수 이름으로 사용하면 보안 취약점(예: 임의 코드 실행)이 발생할 수 있습니다. 반드시 허용된 함수 이름 목록을 검증한 후에 실행하는 것이 안전합니다.