Function() 생성자란?
JavaScript의 Function() 생성자는 문자열 형태의 인자를 원하는 만큼 받을 수 있습니다. 이때 마지막 인자는 함수의 본문(body) 역할을 하며, 그 안에는 세미콜론(;)으로 구분된 여러 JavaScript 문장이 포함될 수 있습니다.
예를 들어 두 개의 매개변수 x와 y를 받아 곱셈 결과를 반환하는 함수는 다음과 같이 정의할 수 있습니다.
var func = new Function("x", "y", "return x*y;");앞부분의 문자열들은 각각 함수의 매개변수 이름이 되고, 마지막 문자열이 실제 함수가 실행할 코드가 됩니다.
예제
다음 코드를 실행하면 new Function 생성자로 만든 함수를 버튼 클릭 시 호출하는 과정을 직접 확인할 수 있습니다.
<html>
<head>
<script>
var func = new Function("x", "y", "return x*y;");
function multiplyFunction(){
var result;
result = func(15, 35);
document.write(result);
}
</script>
</head>
<body>
<p>아래 버튼을 클릭하면 함수가 호출됩니다</p>
<form>
<input type = "button" onclick = "multiplyFunction()" value = "Call Function">
</form>
</body>
</html>
버튼을 클릭하면 multiplyFunction()이 실행되고, 내부에서 func(15, 35)가 호출되어 15 × 35의 결과인 525가 화면에 출력됩니다.
주의 사항
Function() 생성자는 함수 본문을 문자열로 전달받기 때문에 호출 시마다 코드 파싱이 발생하여 일반적인 함수 선언이나 함수 표현식보다 성능이 떨어질 수 있습니다. 또한 문자열 기반 코드 실행은 보안 취약점(예: XSS 공격)으로 이어질 위험이 있으므로, 실무에서는 특별한 이유가 없는 한 일반적인 함수 선언 방식을 사용하는 것이 권장됩니다.