문자열을 JavaScript 함수 호출로 변환하기
JavaScript에서는 문자열 형태의 함수 이름을 실제 함수 호출로 변환해야 하는 경우가 종종 있습니다. 가장 간단하고 널리 사용되는 방법은 전역 객체인 window를 활용하는 것입니다. 브라우저 환경에서 전역으로 선언된 함수는 window 객체의 속성으로 등록되기 때문에, 대괄호 표기법([])을 사용하면 문자열로 된 함수 이름으로 함수를 실행할 수 있습니다.
예제 코드
아래 예제는 문자열 변수에 담긴 함수 이름을 이용해 실제 함수를 호출하는 방법을 보여줍니다.
<html>
<body>
<script>
function myFunction(argument) {
alert('My function ' + argument);
}
functionName = 'myFunction';
window[functionName]('is working.');
</script>
</body>
</html>코드 설명
위 코드의 동작 방식을 단계별로 살펴보겠습니다.
1. 함수 정의: myFunction이라는 함수를 선언하고, 전달받은 인자와 함께 알림 창(alert)을 출력합니다.
2. 함수 이름을 문자열로 저장: functionName 변수에 'myFunction'이라는 문자열을 할당합니다. 이 문자열은 호출하고자 하는 함수의 이름과 동일합니다.
3. window 객체를 통한 호출: window[functionName]('is working.') 구문은 window['myFunction']과 같으며, 결국 myFunction('is working.')을 실행하는 것과 동일한 결과를 얻습니다.
주의 사항
이 방식은 브라우저 환경에서 전역 스코프에 선언된 함수에만 적용됩니다. 모듈(Module) 내부나 함수 안에서 선언된 지역 함수에는 window 객체를 통해 접근할 수 없으므로 주의해야 합니다. 또한, 보안상의 이유로 사용자 입력값을 그대로 함수 이름으로 사용하는 것은 피하는 것이 좋습니다. 필요하다면 허용된 함수 이름 목록(화이트리스트)을 두어 검증한 후 호출하는 것이 안전합니다.