{"id":4631,"date":"2015-06-23T12:15:51","date_gmt":"2015-06-23T09:15:51","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=4631"},"modified":"2018-01-10T15:26:05","modified_gmt":"2018-01-10T13:26:05","slug":"javascript-evalexample","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-evalexample\/","title":{"rendered":"Javascript Eval Example"},"content":{"rendered":"

The eval()<\/code> function is one of the most discussed by JavaScript developers, most of them call it “evil” (such as Douglas Crockford<\/a>), who coined the saying “eval() is evil”. But what most programmers fail to see is it’s potential when used properly. Take a look!
\n 
\n 
\n 
\n 
\n 
\n 
\n 
\n 
\n[ulp id=’tCIwOngQUb3zSUuF’]<\/p>\n

What is eval()?<\/h2>\n

eval()<\/code> is a function that takes a string that contains valid Javascript code as a parameter, and executes it.<\/p>\n

It’s syntax is like this:<\/p>\n

\r\neval(string);\r\n<\/pre>\n
Technically, it is used like in the code snippet below, but that doesn’t mean it’s the best way to use it, if you don’t want to be labeled “as evil as eval”:<\/p>\n
\r\nvar firstVar = 3;\r\nvar secondVar = 5;\r\nvar sum;\r\n\r\nsum = eval(firstVar + secondVar);\r\n\r\n\/\/ output= 15\r\n<\/pre>\n
So, I guess that now you’re asking yourself why were you shown how eval()<\/code> is used and warned against it all in the same breath. There are quite a lot of reasons for that…<\/p>\n
Why the backlash?<\/h2>\n
Firstly, this function is misused quite a lot, resulting in slower loading times, cross-site scripting (XSS) attacks and more difficult debugging.<\/p>\n
Most of the time, this function is used as a gate to attack and steal valuable data from the application it is used in by hackers, so that’s why a lot of programmers are putting together different and efficient ways to evaluate an expression, just to put aside eval()<\/code>.<\/p>\n
And they’ve managed to do so, in this way:<\/p>\n
\r\neval('document.' + id + '.style.color = "blue"');\r\n\r\ndocument.getElementById(id).style.color = 'blue';\r\n\r\ndocument[id].style.color = 'blue';\r\n<\/pre>\n
Essentially, instead of using the dot-name access to a variable, you can use the square brackets, and eliminate the need to use eval for this.<\/p>\n
Or even better, to get your element by its id and style it however you want.<\/p>\n
However there are many cases when it’s not only possible to use eval()<\/code>, but also the best approach to the problem. these cases include:<\/p>\n