Function()

계산기 어플을 만들다가 계산식 부분을 해결해준 new Function이라는 생성자. 어떤친구인고 궁금해서 찾아보았다.

new Function()

Function() 생성자는 Function 개체를 만든다. 생성자를 직접 호출하면 함수를 동적으로 생성할 수 있지만 보안 및 eval()과 유사한 성능 문제가 있다고 한다. 물론 eval() 함수만큼의 중요한 위험성은 아니라고 한다.

eval() 문자로 표현된 JS 코드를 실행하는 함수
하지만 입력되는 코드가 위험한 코드 있으므로 절대 사용하지 말 것을 경고.
로컬 범위에 대한 액세스 권한이 있을 수 있다.

new Function()은 호출 될 때마다 새로운 함수를 생성하는 built-in 함수이다. 새로운 함수 객체를 만들어 내며, 생성된 함수 객체는 문자열로 전달된 JavaScript 코드를 실행할 수 있다고 한다. new Function() 생성자 함수는 하나 이상의 인수를 입력으로 받는다. 첫번째 인수는 생성할 함수의 전체 매개변수 목록을 포함하는 문자열이며, 그 뒤로는 함수의 바디(body)로 사용될 하나 이상의 문자열이 따라온다고 한다.

const sum = new Function('a', 'b', 'return a + b');
console.log(sum(2, 4)); // 6

new Function()을 사용하여 동적으로 새로운 함수를 생성하는 예시 코드이다. 위 코드에서 New Function 메서드에 전달된 매개변수는 문자열로 a, b를 정의하고 a와 b를 더한 값을 반환하여 sum 함수에 할당된다.
newFunction()을 사용하면 문자열로 된 함수 코드를 받아들여 동적으로 함수를 생성하는 것이 가능하다. 특정 조건을 만족하지 않은 상황에서 코드를 작성하는 용도에 사용된다고 한다. 하지만 앞서 언급한 것처럼 new Fucntion()은 보안상의 문제가 발생할 가능성이 있기에 신중하게 사용되어야 한다고 한다.

const input = '2 + 3';

const result = new Function(`return ${input}`)();
console.log(result); // 5

계산기 구현에서 사용된 코드를 짧게 표현한 예시이다. 사용자가 숫자 버튼과 연산자 버튼을 누르면 input 변수에 저장이 되고, = 대입연산자 버튼을 클릭했을 때 new Function의 인자로 input이 들어가고 동적으로 새로움 함수를 생성하여 반환값이 result에 저장되고 저장된 result의 데이터가 화면에 표시된다.

중요한 부분은 함수이기 때문에 꼭 return 작성해야한다는 것.