Right Operand and the ECMAScript eval Function
Mastering the ECMAScript (JavaScript) eval Function – Part I
Forward: In this part of the series, I explain the effects of common right operands of statements as arguments in the JavaScript eval function.
By: Chrysanthus Date Published: 26 Jul 2012
Introduction
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.
Do you understand all that? Must the argument be a string literal or it can be a variable holding a string literal? Can you use the + operator inside the argument? What is the condition for the statements in the argument to become executable? What about syntax error in the argument? Without assignment, is the return value of the eval function accessible? There are many questions you can ask about the eval() function. I categories all that and address in this article.
You need basic knowledge in ECMAScript in order to understand this three part series. This is part one. I use three Major browsers to test the code in this series. These browsers are Internet Explorer 6, Mozilla Firefox 2 and Opera 9.
Tutorial Sequence
The eval() function is a top level ECMAScript function. It can actually take an ECMAScript code segment as argument. So we need to approach the problem in steps. We shall start by considering important right operands. These are expressions that are usually on the right side of the assignment operator. Then we shall consider statements as argument to the eval() function. Statements are lines of code that can be separated by the semi-colon. Lastly, we shall look at strings as argument to the eval() function.
Important Right Operands
In this part of the series, we shall look at literals and the function constructor.
Literals
Here, we shall look at the ECMAScript Literals as argument to the eval() function. ECMAScript has the following literals: String Literals, Integers, Boolean Literals, Floating-Point Literals, Array Literals and Object Literals
A string literal is zero or more characters enclosed in double (") or single (') quotation marks. A string must be delimited by quotation marks of the same type; that is, either both single quotation marks or both double quotation marks. The following are examples of string literals:
"blah"
"1234"
"one line n another line"
A special character like the new line character in the string literal should be escaped as in the last example above.
A string literal as argument in an eval() function causes an error in the script and the script stops execution at the eval() function. In the following code, execution stops at the eval() function and the statement, alert(myVar) is not executed.
<script type="text/ECMAScript">
myVar = eval("I am a man");
alert(myVar);
</script>
Integers
Integers can be expressed in decimal (base 10), hexadecimal (base 16), and octal (base 8). A decimal integer literal consists of a sequence of digits without a leading 0 (zero). A leading 0 (zero) on an integer literal indicates it is in octal; a leading 0x (or 0X) indicates hexadecimal. Hexadecimal integers can include digits (0-9) and the letters a-f and A-F. Octal integers can include only the digits 0-7.
Octal integer literals are deprecated.
Some examples of integer literals are: 42, 0xFFF, and -345.
The following script works without any problem:
<script type="text/ECMAScript">
myVar = eval(25);
alert(myVar);
</script>
The alert statement displays 25.
An arithmetic expression whose numbers are integer literals can be used as argument in the eval() function. The following script works without any problem:
<script type="text/ECMAScript">
myVar = eval(4 + 8);
alert(myVar);
</script>
The alert statement display 12, which means that addition took place. You can use subtraction, multiplication, etc. When you include these other arithmetic operators, just remember that BODMAS will be respected in the arithmetic expression.
0xFFF is an integer, whose equivalent decimal value is 4095. The following code displays, 4095.
<script type="text/ECMAScript">
myVar = eval(0xFFF);
alert(myVar);
</script>
The argument of the eval() function is 0xFFF, which is a hexadecimal number. The eval() function converts the hexadecimal integer to decimal and returns the decimal value.
Floating-Point Literals
A floating-point literal can have the following parts:
- A decimal integer
- A decimal point (".")
- A fraction (another decimal integer)
- An exponent
The exponent part is an "e" or "E" followed by an integer, which can be signed (preceded by "+" or "-"). A floating-point literal must have at least one digit and either a decimal point and/or "e" (or "E"), followed by a decimal number. Some examples of floating-point literals are 3.1415, -3.1E12, .1e12, and 2E-12.
Now 2000, written as a floating-point literal is 2E3. The alert statement of the following code displays 2000:
<script type="text/ECMAScript">
myVar = eval(2E3);
alert(myVar);
</script>
The argument to the eval() function is 2E3. The eval() function converts the floating-point literal to decimal and returns the decimal value.
Here, we look at an arithmetic expression with different types of number. Consider the following:
4095 – 2000 – 30.25 = 2064.75
The hexadecimal number for 4095 is 0xFFF. A floating-point number for 2000 is 2E3. 30.25 is a number whose value you easily appreciate. So the above equation can be written as:
0xFFF - 2E3 - 30.25 = 2064.75
The left hand side of the above equation can be the argument of the eval() function.
Somewhere above we said that examples of floating-point literals are 3.1415, -3.1E12, .1e12, and 2E-12. A decimal number actually consists of a whole number part, a decimal point and a fractional part as integer. Of course, the fractional part can be zero. Now, 3.1415 is a decimal floating-point number, while 2E-12 is an exponential floating-point number.
If the eval() function takes the left hand side of the above equation as argument, it would evaluate the expression and return 2064.75. So the eval() function would take any arithmetic expression as argument and return the answer as a decimal floating-point number. Here, we are referring to an arithmetic expression with different types of numbers.
Boolean Literals
The Boolean type has two literal values: true and false.
The following code displays true.
<script type="text/ECMAScript">
myVar = eval(true);
alert(myVar);
</script>
Here the eval() function just returns its argument.
An array literal is a list of zero or more expressions, each of which represents an array element, enclosed in square brackets ([]). When you create an array using an array literal, it is initialized with the specified values as its elements, and its length is set to the number of arguments specified.
The following example creates a coffees array with three elements and a length of three:
coffees = ["French Roast", "Columbian", "Kona"]
The right operand above is an array literal.
The following code displays, Columbian.
<script type="text/ECMAScript">
myVar = eval(["French Roast", "Columbian", "Kona"]);
alert(myVar[1]);
</script>
The argument of the eval() function is an array literal. As argument, the array literal is just text. The eval() function converts the literal into executable code (executable literal) and returns the executable code. The executable code is assigned to the variable, myVar. The statement of the eval() function (first statement in script) is the same as,
myVar = ["French Roast", "Columbian", "Kona"]
The alert statement in the script displays the value at index 1 of the array.
Object Literals
An object literal is a list of zero or more pairs of property names and associated values of an object, enclosed in curly braces, {}. Note: the value may be a function constructor. You should not use an object literal at the beginning of a statement. This will lead to an error or not behave as you expect, because the { will be interpreted as the beginning of a block.
Consider the following:
myObject = {property1 : "an item", myArray : ["item one", "item two", "item three"], myFn:new Function ("x","y", "var z = x + y; return z*z;")}
The right operand is the object literal. The eval() function can take as argument the, object literal as it takes the array literal. In the above object literal, there are two properties and one method. The value of the second property is an array.
The following code is executed without any problem:
<script type="text/ECMAScript">
myObject = eval({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 statement displays 25, which is the result of the execution of the method, myFn(). This method takes, 2 and 3 as argument. The method is executed in the statement:
answer = myObject.myFn(2,3);
Note: as argument in the eval() function, the object literal is just text. The eval() function converts the object literal into an executable code and returns the executable code.
Consider the following statement:
myFn = new Function ("x","y", "var z = x + y;" + "return z*z;");
The above statement is a function whose name is myFn. The right operand is a function constructor. It is not a function literal; it is a function constructor. However, you can use the function constructor in the eval() function, in the same way that you use the array and object literal.
The following code is executed without any problem:
<script type="text/ECMAScript">
myFn = eval(new Function ("x","y", "var z = x + y;" + "return z*z;"));
answer = myFn(2,3);
alert(answer);
</script>
In the first statement of the script, the eval() function has as argument, the function constructor. While the function constructor is the eval argument, it is text. The eval() function changes it into an executable code and returns the executable code. The second statement calls the function with the arguments, 2 and 3. The alert statement displays the result (25) of the function.
Note: In this part of the series, the returned value of the eval() function can be assigned to a variable as we have been doing.
Conclusion for this Part of the Series
We have seen that the eval() function can take a literal as text argument and then converts it into executable code and returns the executable code. The exception to this is the string literal. The eval() function can also take the function constructor as text argument, then converts it into an executable code and returns the executable code.
So the eval() function can take an important right operand as argument in its text form, and then converts it into executable code without modifying the text argument.
We continue in the next part of the series.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT