Statements and the ECMAScript Eval Function

Mastering the ECMAScript (JavaScript) eval function – Part II

Forward: In this part of the series, we look at the effect of passing an ECMAScript statement as argument to the eval() function.

By: Chrysanthus Date Published: 26 Jul 2012

Introduction

In the last part of the series, we saw how the ECMAScript literals and the function constructor are used as arguments for the ECMAScript top level eval() function. We concluded, that with the exception of the string literal, the eval() function will take an ECMAScript literal as argument and return the executable code of the literal. The returned executable code is not seen in the script when you display the code of the web page.

In this part of the series, we look at the effect of passing an ECMAScript statement as argument to the eval() function. You can consider a statement as an independent short piece of code, usually on one line.

Variable Declaration
Consider the following variable declaration:

              myVar = "one";

The following code cannot be executed:

    <script type="text/ECMAScript">
      eval(myVar = "one");
      alert(myVar);
    </script>

The first line takes the variable declaration as argument. The next line, which is never executed, tries to display the variable. ECMAScript interprets the first line as one with error. Whenever execution of ECMAScript meets an error, it stops execution at the line having the error.

Now consider the following declaration:

             myVar = 12

The following code functions without any problem:

    <script type="text/ECMAScript">
      eval(myVar = 12);
      alert(myVar);
    </script>

The variable declaration (statement) is the argument of the eval() function. The first line evaluates the declaration and returns the declaration statement. The return statement cannot be seen when you display the code of the web page, but it exits at the position of the eval() function. So it can be access by the statements below it. The second line in the above script, displays 12 in the alert box. Note: there is no semi-colon in the eval() argument just after the number 12 before the closing brockets of the eval() function.

Consider the following declaration:

        yourVar =  12;

The following script runs without any problem.

    <script type="text/ECMAScript">
      yourVar =  12;
      eval(myVar = 3 + yourVar);
      alert(myVar);
    </script>

The first line of the script declares the variable, yourVar and has the integer literal 12 assigned to it. The second statement has an eval() function. The argument of this function adds the number 3 to the variable, yourVar and assigns the result to the new variable, myVar. So, the argument has a statement, with a variable that has a previously assigned value. What I want to emphasize here, is that we are using a previously declared variable, in the eval() argument in the ordinary fashion. The code works without any problem. Again, there is no semi-colon in the eval() argument, just before the closing bracket.

Now consider the following declaration:

      yourVar =  "one";

This is a string value. Let us see if we can have the variable, whose value is a string in the argument of the eval() function.

    <script type="text/ECMAScript">
      yourVar =  "one";
      eval(myVar = yourVar);
      alert(myVar);
    </script>

Execution of the above code, stops (fails) at the eval() function. We see again that the string issue is a problem. The argument of the eval() function, will not accept even the variable that holds a string, in the ordinary way.

Literals assigned to Variables
Consider the following object creation, with the literal notation:

myObject = {property1 : "an item", myArray : ["item one", "item two", "item three"], myFn:new Function ("x","y", "var z = x + y; return z*z;")}

In the previous part of the series we put but the object literal as argument of the eval() function. Here, let us see if we can put the complete statement (which includes the assignment operator and argument) as argument in the eval() function.

Wow, the following script works without any problem:

    <script type="text/ECMAScript">
     eval(myObject = {property1 : "an item", myArray : ["item one", "item two", "item three"], myFn:new Function ("x","y",

"var z = x + y; return z*z;")});
     answer = myObject.myFn(2,3);
     alert(answer);
    </script>

The alert box displays 25. The object literal, the assignment operator and the variable form the argument of the eval() function in the ordinary fashion. The code works. The eval() function converts the statement into an executable code and return the executable code at the position, where the eval() function is. You will not be able to see the typing of the returned statement, but it is there and can be accessed by the statements below it, in the script.

The following code that is dealing with the function constructor also works:

    <script type="text/ECMAScript">
     eval(myFn = new Function ("x","y", "var z = x + y;" + "return z*z;"));
     answer = myFn(2,3);
     alert(answer);
    </script>

This script has a variable, an assignment operator and a function operator, in the ordinary way as argument of the eval() function.

At this point we see that literals and statements work as argument of the eval() function, in the ordinary fashion; there is exception to this with strings. Neither string literals nor their variables work in the argument of the eval() function in the ordinary fashion. Well, we have to really analyze strings, in the next part of the series.

The Dot Operator and Object
The following statement creates an object:

      myObject = new Object();

The following statement adds a property to the object created and assigns an integer literal to it:

      myObject.prop1 = 15;

The following script works without any problem:

    <script type="text/ECMAScript">
      myObject = new Object();
      eval(myObject.prop1 = 15);
      alert(myObject.prop1);
    </script>

The first line on the script creates an object. The second line adds a property and assigns the integer literal 15 to it; this is done inside the argument of the eval() function in the ordinary way. Do not end the argument content with a semi-colon. The eval() function returns the statement in executable form. The characters of the statement cannot be seen, but the return information is at the position of the eval() function.

So the argument of the eval() function can have an object with the dot operator in a statement.

Let us continue to look at statements.

Multiple Statements as Argument
Here, we shall see if we can have multiple statements as the argument in the eval() function. Consider the following variables:

      var1 = 10;
      var2 = 20;
      var3 = 30;

The following script does not work:

    <script type="text/ECMAScript">
      eval(var1 = 10; var2 = 20; var3 = 30;);
      alert(var1);
    </script>

Execution stops at the eval() function. The argument of the eval() function has three statements, separated by the semi-colon. We see that the eval() function does not accept an argument made up of more than one statement in the ordinary fashion.

A Look at what is in the Specification
This is what the ECMAScript specification says about the eval() function:

The argument of the eval function is a string. If the string represents an expression, eval evaluates the expression. If the argument represents one or more ECMAScript statements, eval performs the statements. Do not call eval to evaluate an arithmetic expression; ECMAScript evaluates arithmetic expressions automatically.

If you construct an arithmetic expression as a string, you can use eval to evaluate it at a later time. If the argument of eval is not a string, eval returns the argument unchanged.

Let us look at the sentences. The first sentence is “The argument of the eval function is a string.” Now we have done so many things with the eval() function without using the string as an independent variable. (eval and eval() are the same thing in this series). In fact, we have not succeeded to use string as an independent argument: We have considered literals; string has not worked as literal. We have considered variables, whose values are string literals; this has not work. Such variables do not function inside the argument. Well, let us just be patient and we shall see what this first sentence really mean in the next part of the series.

The second sentence “If the string represents an expression, eval evaluates the expression”. This sentence is related to the first; it is giving more clues to what the first is. However, we shall look at strings in the next part of the series.

The third sentence is “If the argument represents one or more ECMAScript statements, eval performs the statements.” Well, if the multiple statements are typed in the ordinary way as we saw above, then they will not work. There must be a condition under which these multiple statements work; we shall look at this in the next part of the series.

The fourth sentence is “Do not call eval to evaluate an arithmetic expression; ECMAScript evaluates arithmetic expressions automatically.” We have to interpret this sentence, since we have successfully used eval to evaluate arithmetic expressions. The normal way to evaluate arithmetic expressions is to assign numbers to variables, and then join the variables into an arithmetic expression with arithmetic operators. You do not need an eval function to evaluate an arithmetic expression. So, we should use the eval function for arithmetic expressions only if it brings out some programming advantage.

The fifth sentence, adds more meaning to the previous sentence.

The sixth sentence is “If the argument of eval is not a string, eval returns the argument unchanged.” We have to be careful here. We have seen statements that are correct in themselves but cause an error when they form the eval argument. We have seen other statements that are correct in themselves and eval has converted them into executable code. This will be made clearer later.

Let us conclude what we have learnt in this part of the series and continue in the next and last part.

Conclusion to this Part of the Series
A single statement without the ending semi-colon, will work well as argument to the eval() function. However, the statement should not contain an independent string or a variable that holds it.

We continue in the next part of the series.

Chrys

Broad Network

Statements and the ECMAScript Eval Function

Mastering the ECMAScript (JavaScript) eval function – Part II

Introduction

Related Links

Comments