Understanding eval()

Question

This question comes from a timed JavaScript Challenge:

What is the outcome of this code?
function f(f) {
return "" + f;
}

function g(g) {
return eval(g);
}

alert(g(f(3 * 2 + 5)));

The output is 11.

While playing with the code I found that the output is still 11 if the code looks like this:

function f(f) {
return f;
}

function g(g) {
return g;
}

alert(g(f(3 * 2 + 5)));

From what I might understand, eval() makes statements a string and the "" in line 2 is making eval() possible.

Also, I read using eval is discouraged for security purposes.

Am I getting this?

Thanks!

Answer 1

The first thing happening, before anything else, is that `3*2+5` will be evaluated to `11`.

The function `f` will then perform `"" + 11`, which is a way of converting things to strings. What happens is that javascript doesn't know how to add a number to a string, so it will convert the number 11 to the string "11" and add the two strings.

`eval` then does the opposite of what you described; it takes a string and treats it as javascript code and runs it. The string is "11" so it just returns 11.

tl;dr you turned 11 into "11" and back to 11.

Using eval is fine if you know what code you are executing. But if you ever eval arbitrary user input for example then that gets you in big trouble! eval is also very slow.

Answer 2

Awesome explanation by Schindlabua ,

I ll just add few stuffs to reinforce the facts stated by him.

SECURITY :
You can execute your own JS code when eval processes user input.
https://code.sololearn.com/W2gtpU7UlHl5/?ref=app

For example: this cool code uses eval () to interpret equations, but in prompt if you delete the default value and write

alert('hi');

It will be executed , note that you ll have to close SL app then, coz it ll stuck in infinite loop.

I am pretty sure I read somewhere "eval is evil" :-D

IMPLICIT TYPE CONVERSIONS :

+ operator is overloaded in javascript to add strings too, so whenever you include the string then + will assume string addition

8 + "1" is "81" string
"8" + 1 is "81" string

81 + "" is "81" string
8 + 1 + "" is "9" string

Answer 3

Morpheus Thanks for more information! Sorry for the late response. I was volunteering today at the polls, long day! I look forward to playing with the code you shared tomorrow 😎

Answer 4

Thanks so much! I read through your explanation three times after watching a YouTube video and I feel the wheel turning. 😎

Answer 5

Good to hear :P If you have any more questions feel free to ask!

Answer 6

No, just order of operations, like in maths. Stuff inside parentheses happens first!

It sounded like you maybe were thinking that somehow the whole `3*2+5` term was making it's way into the function `f` so I thought I'd better clarify. In fact `f` only sees 11, and it doesn't know that that 11 came from `3*2+5`.
(Sooner or later javascript will have to compute `3*2+5` otherwise nothing ever gets done, and almost all programming languages evaluate arguments before passing them to functions.)

Hoisting has to do with the `var` keyword (and sometimes `function`). I'll save the details to stop my comment from getting too long though. Very different topic anyway!

Answer 7

Actually, I do have another question.

You mentioned that the math happens before anything else. Is this an example of hoisting?