JavaScript eval() method

coronaisme profile image Nick Corona ・3 min read

Today I am going to talk about an interesting method that I have discovered recently. Unfortunately, I dont think I will be able to use it often. But I will get to that in a sec. First of all I was making a small calculator component for practice. I am attempting to make more components for practice. My job search has been a struggle a bit because (I am assuming) I have no experience nor a computer science degree. My most desired role at the moment would be a front end focused role with a company working with React. Knowing this, he offered me some advice. In his opinion, as long as I can pump out react components that work well and look good quickly and efficiently, I shouldn't have a problem eventually finding a job.

Considering that making and adding to components are things that I like doing and want to do anyways, I figured I would take his advice. My normal approach was more algorithm / learning new things, but honing even more things that I think I already know decently well doesnt seem like a bad idea. I play a lot of video games and one that I play is called league of legends. A lot of pros recommend people to get really good at one or two champions rather than having a wide champion pool when learning the game and I think having that focus at a higher level rather than being a jack of all trades is certainly not a bad idea.

Anyways, the component I was making was a calculator and it came out pretty good, I think. I didnt make it super fancy with CSS, but I might later for the practice. At the same time I dont really see the point of a super snazzy calculator so I am not sure what else I would do to bedazzle it.

Alt Text

Trust me it works =). When I was making it, I wasnt sure how to approach the functions to solve the problems/expressions. To be honest I have been thinking about it the last couple days just a bit, thinking that I should maybe do it again with different functionality. At first obviously I thought I would have to make a function for multiply, divide, etc to eventually pull out results. That would be pretty easy if we knew we were going to do just 2 + 3 or whatever, but I wanted to have the option to put down a larger expression. Nothing ridiculous, but something like 2 + 3 + (6 * 5) / 3.

Now this isnt that crazy either really, but I wasnt (am still not quite, but Ill probably try some stuff later) about how to go about separating the numbers, using correct order of operations etc. So I looked some stuff up and found out about the eval() javascript method. It is an interesting method, basically it takes in a string and will evaluate it. It doesnt necessarily have to be numbers, but it works quite well with numbers, but there is a downside.

Alt Text

Pretty cool huh? And super useful for the calculator that I was building right? Well, react gave me a bit of a warning, saying that I shouldnt use eval. So I did some research and this is what I found out. The string that is passed to eval is controlled by the user. A user with the knowledge could possibly try to run code on the app that could be malicious. This could cause many problems as I am sure you could imagine. Eval is also slow because it has to use the JS interpreter to convert the string. When I learned this I was pretty bummed out because it seems pretty useful. On MDN though, they recommend an alternative: window.Function. While I do want to make a calculator version more like what I explained above, I think I will soon try to figure out how to use window.Function in the same way that I used eval to make my calculator more safe.


Editor guide