Eval Memory leak

Demo of how a simple eval causes a memory leak in browsers

by Jason de Belle

HTML

<button id="evalLeak">
  Eval Method
</button>

<button id="parseFloat">
  Normal Addition
</button>
<pre>
  <sub> Please note these instructions were written for chrome </sub>
  <sub> Written for <a href="https://stackoverflow.com/questions/86513/why-is-using-the-javascript-eval-function-a-bad-idea/57471151#57471151" target="_blank">stackoverflow question 86513</a> </sub>
  
  1) Open the dev tools. (ctrl+shift+c) 
  2) Click on the Memory tab
  3) Notice the value for "fiddle.jshell.net)
  4) Clicking on a button toggles it on and off.. You should notice that the memory increases we the Eval method much quicker, also the memeory will drop back down with the js verson.
 
 <sub>Tested using chrome on linux</sub>
</pre>

CSS

sub {
  color: gray;
}

.running {
  background-color: green;
}

JavaScript

let runEval = false;
let runPareFloat = false;
let x = 0;
let y = 0;
let z = 0;
let zz = 0;

setInterval(() => {
    x = Math.random();
    y = Math.random();
    if (runEval) {
	    eval('z = x + y');
    }
    if(runPareFloat) {
  	    zz = x + y;
    }
}, 1);

document.getElementById("evalLeak").onclick = (e) => {
	runEval = !runEval;
    document.getElementById("evalLeak").classList.toggle("running");
};

document.getElementById("parseFloat").onclick = (e) => {
    runPareFloat = !runPareFloat;
    document.getElementById("parseFloat").classList.toggle("running");
};