I have been reading a bit about Eval() , which is a function that executes javascript from a string , but according to which it is very dangerous and consumes a lot of resources, until looking for alternatives, I found two very interesting ones and they work in the same way, new Function() and constructor.constructor() . I would like to know if there are other alternatives or if these last two are optimal for executing javascript strings.
For this I show an example with the Highcharts.js API , where in the three options it is executed perfectly, but the forums say that Eval() should not be used. what do you think?
var grafica="Highcharts.chart(\"row3\", {chart: {type: \"bar\",height:1000},title: {text: \"HISTORICO DE PASES GENERADOS A LAS OFICINAS CORRESPONDIENTES\"},subtitle:{text:\"AÑO 2018\"},xAxis: {categories: [\"ADMINISTRACION\",\"ARCHIVO\",\"ASESORIA JURIDICA\",\"ATENCION AL CIUDADANO\",\"BIBLIOTECA\",\"CULTURA\",\"DEPORTE\",\"DESPACHO\",\"DIVISION DE COMUNINADES EDUCATIVAS\",\"DIVISION DE DOTACION LOGISTICA\",\"DIVISION DE GESTION INTERNA\",\"DIVISION DE JOVENES Y ADULTOS\",\"DIVISION DE NIÑOS, NIÑAS Y POBLACION CON NECESIDADES EDUCATIVAS ESPECIALES\",\"DIVISION DE SUPERVISION\",\"ESCUELA TECNICA\",\"FORMACION PERMANENTE\",\"GESTION HUMANA\",\"INFORMATICA\",\"PLANIFICACION\",\"PRENSA\",\"RECURSO PARA EL APRENDIZAJE\",\"REPRODUCCION\",\"SALA SITUACIONAL\",\"SEGURO SOCIAL\"],title: {text: null},labels:{style:{fontSize:\"12px\",color:\"#db1b32\"}}},yAxis: {min: 0,title: {text: \"NUMERO DE PASES\",align: \"high\"},labels: {overflow: \"justify\",style:{color:\"#db1b32\",fontSize:\"12px\"}}},tooltip: {valueSuffix: \" PASES\"},plotOptions: {bar: {dataLabels: {enabled: true}}},series: [{ name: \"PASES\",data: [66,17,10,36,8,9,12,20,15,33,28,22,26,46,63,25,13,52,18,41,47,89,5,61,74],dataLabels:{style:{fontSize:\"12px\"}}}],navigation: {menuStyle: {background: \"#E0E0E0\"}}});";
document.getElementById('eval').addEventListener('click',function(){eval(grafica);});
document.getElementById('newfunction').addEventListener('click',function(){new Function(grafica)();});
document.getElementById('constructor').addEventListener('click',function(){constructor.constructor(grafica)();});
<html lang="es">
<head>
<title></title>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<h2>¿cual es la forma mas rapida de ejecutar codigo String de Javascript?</h2>
<button id='eval'>Eval(stringCode);</button><br>
<button id='newfunction'>new Function(stringCode)();</button><br>
<button id='constructor'>constructor.constructor(stringCode)();</button>
<div id='row3'></div>
</body>
On performance issues: in both cases the strings have to be parsed by the compiler before being executed. The differences in favor of one way or another may depend on the implementation of the interpreter (V8, Chakra, SpiderMonkey...), here is a performance test , my results vary greatly if I use Firefox or Edge.
In terms of security, there are slight differences: eval has access to global variables and the local context, while using Function the code has access to global variables, but the context is different.
In any case, I advise you to avoid its use, it is very rare to find yourself faced with the need to inject code from a string in your application.