JavaScript - Web Developer Boot Camp
JavaScript™ (also known as ECMAScript or JScript) is an interpreted, object-oriented programming language commonly used throughout the web to provide interactive features to web pages. This article introduces JavaScript, outlines some of the basic principles behind programming using JavaScript and illustrates the differences between the different implementations available in Mozilla and Internet Explorer.
- About this Article
- Part I - Introduction to JavaScript
-
- About JavaScript
- JavaScript Implementations
- Interpreted Programming Languages
- Including JavaScript programs in Web Pages
- Example JavaScript Programs
- Part II - JavaScript ( Pseudo) Reference
-
- JavaScript Data Types
- Type Conversions
- Execution Contexts
- JavaScript Expressions
- JavaScript Operators
- JavaScript Statements
- JavaScript Native Objects
- Links
- Index
Part I - Introduction to JavaScript
- About this Article
-
This article is intended to provide an introduction to JavaScript and a reference on the differences in the implementations of JavaScript in Mozilla and Microsoft Internet Explorer (MSIE). Examples which can be run directly from the article using Mozilla, Mozilla Firefox, Internet Explorer and Opera are used to illustrate general concepts as well as the use of each feature and Object in JavaScript. This is a work in progress and is provided in the current state in the hope that you will find it useful. I plan to continue work on this article in the hope it can become the definitive online resource for JavaScript. Email to
[email protected]
regarding this article is encouraged and welcome. The article is organized into two parts. Part I is intended as a general introduction to JavaScript. It is primarily targeted for beginning to intermediate level programmers but hopefully contains some information which will be useful for those with more advanced skills. Part II serves as a reference for JavaScript. Distinctive formatting is used for specific specialized topics: Code samples and examples are presented in amonospace font
. Variables are presented in an italic font in the text and asmonospace italic
in code samples. Boxes with distinctive formatting are used to highlight specific sections.Boxes with single line black borders are used to contain runnable examples. Please note that the examples require the use of a pop-up window and you must enable pop-ups on this site in order to run them.Boxes with double line red borders enclose notes which explain differences in how Mozilla and Internet Explorer implement JavaScript.Boxes with notes.Boxes with with todo notes.Boxes indicating that the topic has yet to be written. - About JavaScript
- JavaScript is a powerful, object-oriented programming language which, like Rodney Dangerfield, does not get the respect it deserves. It is available in stand-alone, open source implementations in C and Java for a variety of platforms from mozilla.org and as part of modern web browsers such as Mozilla, Mozilla Firefox, Internet Explorer, Opera and Safari. JavaScript is available on practically every computer world-wide. JavaScript was created by Brendan Eich, then of Netscape and now with Mozilla Foundation, and was first introduced in the Netscape Navigator 2.0 web browser in early 1996. Originally the language was called LiveScript and was later renamed to JavaScript as part of a marketing effort of Netscape and Sun Microsystems although it has little to do with Java. Microsoft incorporated an implementation of JavaScript called JScript into Internet Explorer 3. JavaScript's syntax resembles that of the computer languages C and Java although several of its features such as typeless variables, automatic semi-colon insertion, and automatic type coversions were designed to make it more accessible to non-professional programmers. Like C, the JavaScript language does not define any means of performing input and output and relies entirely upon its host environment (web browser) for such features. Unlike C++ or Java, JavaScript is not a strongly typed computer language nor does it currently support class-based object oriented programming but instead relies on the use of Prototypes which serve as templates for creating new objects. JavaScript was standardized as ECMAScript in ECMA 262 in June 1997. A second edition of the standard was released in August 1998 which consisted primarily of editorial changes to the first edition. The most recent edition is ECMAScript Language Specification ECMA-262 3rd Edition (ECMAScript Language Specification ECMA-262 3rd Edition (Unofficial HTML version)) which was released in August 1998 and added a number of new features such as exception processing. JavaScript is an evolving language with future editions expected to include native XML processing ( ECMAScript for XML (E4X) Specification ), strongly typed variables, and class-based inheritance in JavaScript 2.0 and ECMAScript Language Specification 4th Edition (Proposed). Any one who is familiar with C or Java, can easily learn JavaScript. Conversely, JavaScript can be learned as a first programming language and the skills transferred to programming in other languages such as C and Java.
- JavaScript Implementations
-
Comparing the support for various implementations of different versions of JavaScript can be difficult due to the different versioning schemes used by Netscape and Microsoft. Netscape traditionally released different versions of their JavaScript interpreter to be associated with distinct
script
elementlanguage
JavaScript versions such asJavaScript1.1
orJavaScript1.3
which did not necessarily map directly to an edition of the ECMA 262 standard. Microsoft used a different versioning scheme for JScript and only used thescript
language
attribute in a very loose association with the actual JScript version. JavaScript in Netscape Navigator, Mozilla and Mozilla FirefoxNetscape Navigator JavaScript versions JavaScript version ECMA 262 Introduced JavaScript 1.0 N/A Navigator 2.0 JavaScript 1.1 N/A Navigator 3.0 JavaScript 1.2 N/A Navigator 4.0-4.05 JavaScript 1.3 1st Navigator 4.06-4.7x script
element. For compatibility with other modern browsers, it is best to only specify the JavaScript language without version either through thelanguage
ortype
attributes.Mozilla JavaScript versions JavaScript version ECMA 262 Introduced JavaScript 1.5 3rd Mozilla / Firefox / Netscape 6.x, 7.x, … Internet Explorer JScript versions JavaScript version JScript version ECMA 262 Introduced JavaScript 1.0 JScript 1.0 N/A MSIE 3.0 JavaScript 1.1 JScript 3.0 1st MSIE 4.0 JavaScript 1.3 JScript 5.0 3rd MSIE 5.0 JavaScript 1.3 JScript 5.1 3rd MSIE 5.01 JavaScript 1.3 JScript 5.5 3rd MSIE 5.5 JavaScript 1.3 JScript 5.6 3rd MSIE 6.0 N/A JScript 7.0 N/A .Net - Interpreted Programming Languages
-
JavaScript is an example of an interpreted programming language. Unlike other interpreted languages which compile (translate source code into machine code) each statement each time it is executed, JavaScript first compiles the entire JavaScript program before beginning to execute it. JavaScript also provides the ability to
compile
source code on the fly. Interpreted computer languages have the advantage that they can be run in any environment so long as an interpreter program for that environment is available. A disadvantage of interpreted computer languages is the need to compile the programs each time they are run. Other examples of interpreted programming languages are Basic, Perl and Python. Python has the additional capability to save compiled programs to disk where they can be run later without having to be interpreted. - Including JavaScript programs in Web Pages
-
JavaScript programs can be run either from the command-line using a stand-alone JavaScript interpreter or executed in Web Pages using Web browsers. By far, the most common use of JavaScript is in web pages and all examples in this article will use such an approach. Script programs are included into web pages through the use of the
script
element anywhere inside theHTML head
orbody
elements of an HTML document. The program code can be included in the HTML document by placing it inside of thescript
element or by placing it in an external file and referencing the file through thesrc
attribute of thescript
element. Thelanguage
ortype
attributes of thescript
element can be used to specify the programming language and version the script is written. If no scripting language or version is specified, the web browser will use its default values which is typically the latest version of JavaScript the browser supports.Specifying Script Language VersionsScript authors typically use the script language version to hide advanced scripts from older browsers which do not support the language features being used. This approach has some drawbacks since older browsers may still compile the script even if they do not execute it. This can lead to compile time errors for unsupported language features in older browsers such as Netscape Navigator 3.x and 4.x although this is less of a problem today since the market-share of these older browsers has diminished to insignificance. There are two methods for specifing the language version in thescript
tag.- specify the language and version in the
language
attribute of thescript
tag.<script language="javascript"> // default version of javascript </script>
<script language="javascript1.3"> // javascript version 1.3 </script> - specify the language mime type and version in the
type
attribute in thescript
tag.<script type="text/javascript"> // default version of javascript </script>
<script type="text/javascript;version=1.3"> // javascript version 1.3 </script>
script
element, Mozilla will default to JavaScript 1.5. An additional feature of Mozilla's current implementation is that it will emulate the features of the specified version of the language if the language version is specified. This can cause some browser-compatibility problems since Internet Explorer does not attempt such emulation. A change to Mozilla's implementation to not emulate older JavaScript versions is under consideration in Bugzilla 255895 although this change would not appear before Mozilla 1.8. Internet Explorer 6 supports JavaScript versions 1.1, 1.2 and 1.3 specified as the language attribute and ignores scripts which specify a higher version. Internet Explore 6 only supportstype="text/javascript"
and ignores any other value oftype
which includesversion
or other information. Internet Explorer does not emulate the behavior of older versions of JavaScript when older versions are specified. Opera 7.54 supports JavaScript versions 1.1, 1.2, 1.3, 1.4, 1.5 when specified as thelanguage
attribute. Opera will execute any JavaScript language version if it is specified in thetype
attribute. Konqueror 3.2.1 will execute any version of JavaScript when specified as the language attribute or thetype
attribute. Work is underway to develop the next generation of JavaScript, JavaScript 2.0, which will introduce many new advanced features to the language. When an implementation of JavaScript 2.0 becomes available, the proper use of thescript
element language version should be able to hide the new scripts from older versions of Mozilla and Internet Explorer although other browsers such as Opera and Konqueror may have problems.Inline JavaScript Examples<html> <head> <script language="javascript"> // inline JavaScript code here </script> <script language="javascript1.3"> // inline JavaScript 1.3 code here </script> <script type="text/javascript"> // inline JavaScript code here </script> <script type="text/javascript;version=1.3"> // inline JavaScript 1.3 code here </script> </head> <body> stuff </body> </html>
External JavaScript Examples<html> <head> <-- external JavaScript code in file somefileuri --> <script language="javascript" src="somefileurl" ></script> <-- external JavaScript 1.3 code in file somefileuri --> <script language="javascript1.3" src="somefileurl" ></script> <-- external JavaScript 1.3 code in file somefileuri --> <script type="text/javascript" src="somefileurl" ></script> <-- external JavaScript 1.3 code in file somefileuri --> <script type="text/javascript;version=1.3" src="somefileurl" ></script> </head> <body> stuff </body> </html>
Note the use of HTML comments<-- … -->
inside of the HTML document and the use of single line JavaScript comments// …
inside of thescript
element. An HTML comment prevents its contents from being displayed by a web browser while a JavaScript comment prevents the JavaScript interpreter from attempting to compile and execute the line. Comments are typically used for communicating with other web developers who read the source code of a web document or JavaScript program.Hiding JavaScript from Non-scriptable browsers The HTML 4.01 specification states that if a web brower does not recognize an HTML element in a document, it should attempt to render the contents of the element. This can cause some browsers which do not support thescript
element to display inline JavaScript programs as text in a web page. A standard technique to hide JavaScript code from such browsers is to enclose inline JavaScript inside of HTML comments as in the following example:<script type="text/javascript"> <-- // inline javascript code //--> </script>
The<-- … -->
hides the script from non-scriptable browsers while the last line comment//
hides the end of the HTML comment-->
from the JavaScript interpreter. Other techniques involvingCDATA sections
are used for hiding inline scripts in XHTML or XML documents. A common error by those who do not understand HTML and JavaScript is to wrap JavaScript code in external JavaScript files inside of HTML comments. The only reason to use HTML comments inside of ascript
element is to hide the inline script from non-scriptable browsers which do not recognize thescript
element. If a script is contained in an external file, a non-scriptable browser will not even attempt to load the file. There is no reason to include such HTML comments in an external file and it is technically an error to do so although most browsers are forgiving of this common beginner's mistake. - specify the language and version in the
- Example JavaScript Programs
-
- Hello World!
-
Ever since Kernighan and Ritchie's
The
(K&R) was first published in 1978, the standard first program in any language is one that prints the message hello, world. Since this article is inspired by K&R our first JavaScript program will do the same. "hello world" can be written in a web page as:<html> <head> <script type="text/javascript"> document.write('hello, world'); </script> </head> <body> <h1>The Hello World JavaScript Program</h1> </body> </html>C
Programming Language
To run the program, create a document containing the above text, then open the web page with Mozilla or Internet Explorer which will displayThe Hello World Programhello, worldThe actual JavaScript program consists of the statementdocument.write('hello, world');
Unlike C there is no preferredmain
function where execution of the program begins. In JavaScript, the source code is first compiled, then each global statement is executed in turn. Web browsers and HTML provide other means to begin execution of JavaScript depending upon events in the browser but will not be covered in this article. Let's pick the "hello, world" program a part and look at its piecesdocument.write('hello, world')
is a function call which calls a method (function)write
of the objectdocument
with argument'hello, world'
.document
is a host object provided by the web browser anddocument.write
is a function property (method) of thedocument
object which outputs text in a web page.document
anddocument.write
are not official parts of the JavaScript language, but are supplied by the web browser as part of its Document Object Model (DOM). We will not be discussing the Document Object Model in this article instead focusing our attention on the JavaScript language itself. If you are already familiar with C, you may consider the DOM to be an external library provided by the web browser.'hello, world'
is an example of a literal primitive string value. Literal primitive string values are sequences of characters which are surrounded by either single quotes ('
) or double quotes ("
). The function calldocument.write('hello, world')
is an example of an expression. The terminating semi-colon (;
) terminates the statement composed of the expression. - Examples in this article
-
The examples in this article are written in such a fashion that they can be executed directly from the article itself. The examples use a user-defined function named
msg
which uses the DOM to output strings to web pages.msg
is defined as:function msg(s) { document.write(s + '<br>'); }
When a function callmsg(arg)
is performed, the body of the functionmsg
( the statements inside of the braces{
and}
) are executed with the value of the argument variables
set to the value of the variablearg
.document.write
writes the arguments
followed by the HTML tag <br> to the output document where it is displayed by your web browser. Each example will consist of the JavaScript source code followed by an HTMLselect
element which allows the choice of JavaScript version to be used when executing the example and an HTMLbutton
element which will open a new browser window and execute the example code. The new window will display the source code of the example, followed by the output. Note that the source code for the functionmsg
is not displayed for brevity's sake. If you have a popup blocker enabled, you must configure it to allow this site to open popup windows. The "Hello World" program would appear as:Example Hello_World! msg('hello, world');Run this example by selecting the JavaScript version and then clicking the execute button.
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute - A slightly more realistic example.
-
Our next example program is a slightly more realistic program based upon K&R's Fahrenheit to Celsius conversion program and introduces a number of JavaScript features which are found in all JavaScript programs.
Example Fahrenheit_to_Celsius /* * Display Fahrenheit to Celsius Conversion table * for 0°F to 100°F in steps of 10°F. */ var lower = 0; // lower limit of Fahrenheit temperature var upper = 100; // upper limit of Fahrenheit temperature var step = 10; // increment of Fahrenheit temperature var fahrenheit; // current Fahrenheit temperature var celsius; // current Celsius temperature fahrenheit = lower; while (fahrenheit <= upper) { celsius = Fahrenheit2Celsius(fahrenheit); msg(fahrenheit + '°F is ' + celsius + '°C'); fahrenheit = fahrenheit + step; } function Fahrenheit2Celsius(fahr) { var cels = (5/9)*(fahr - 32); return cels; }The program begins with a multiple line comment which describes the purpose of the program./* * Display Fahrenheit to Celsius Conversion table * for 0°F to 100°F in steps of 10°F. */
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute
Comments are text which are intended to be read by programmers trying to understand how a program work. They are ignored by the JavaScript interpreter. Multiple line comments begin with/*
and end with*/
and are useful in circumstances when a single comment line is insufficient or when you would like tocomment out
a portion of the program so that the JavaScript interpreter will ignore it. Note that multiple line comments can not nest. For example/* this /* is an invalid */ comment */
For this reason, many people use single line comments inside of functions, so that if it is desired tocomment out
the entire function later, a single/* … */
can be placed around the entire function. If multiple line comments had been used inside of the function, this would not have been possible. The next 5 lines of the program contain statements which declare the variables lower, upper, step, fahrenheit, celsius as global variables.var lower = 0; // lower limit of Fahrenheit temperature var upper = 100; // upper limit of Fahrenheit temperature var step = 10; // increment of Fahrenheit temperature var fahrenheit; // current Fahrenheit temperature var celsius; // current Celsius temperature
A variable is a name for a data item in a program and is an example of an identifier. An identifier is a sequence of characters beginning with either$
(dollar sign),_
(underscore) or a unicode letter followed by unicode letters, unicode digits, underscores (_
) or dollar signs ($
). Note that the use of unicode allows the creation of variable and function names in character sets other than latin. These variables are global because they were declared outside of any function definition and thus are available everywhere in the JavaScript program. In JavaScript variables do not have to be declared before use but it is recommended. JavaScript variables, unlike C or Java, do not have declared data types. A variable in JavaScript can hold any type of data. Each of the variable declarations is followed by a C++ style single line comment of the form// …
. Single line comments begin with//
and end at the end of the line where they appear and are ignored by the JavaScript interpreter. They are extremely useful for attaching a descriptive note to a single line of code. The variable declarations for lower, upper and step include initializers which set the initial values of the variables to primitive number values0
,100
and10
respectively. The variable declarations for fahrenheit and celsius do not include intializers which means they have the valueundefined
as their initial values. The next statementfahrenheit = lower;
assigns the value of the variable lower to the variable fahrenheit using the assignment operator=
. The next statement is awhile
statement which has the general form:while (condition) statementwhile
first evaluates condition as a primitive boolean value (true
orfalse
) and will execute statement so long as condition istrue
. If condition is initiallyfalse
, statement will not be executed.while
is an example of an iterative or looping statement. Other examples of iterative statements in JavaScript arefor
anddo while
. Ourwhile
statement looks like:while (fahrenheit <= upper) { celsius = Fahrenheit2Celsius(fahrenheit); msg(fahrenheit + '°F is ' + celsius + '°C'); fahrenheit = fahrenheit + step; }
The condition isfahrenheit <= upper
.<=
is a comparison operator which returnstrue
when the left operand ( fahrenheit in our example ) is less than or equal to the right operand ( upper in our example ). The statement is the block statement{ celsius = Fahrenheit2Celsius(fahrenheit); msg(fahrenheit + '°F is ' + celsius + '°C'); fahrenheit = fahrenheit + step; }
consisting of all statements between the braces{
and}
. Thiswhile
statement generates the conversion table by repeatedly executing (looping over) the set of statements contained in the block statement as long as the conditionfahrenheit <= upper
istrue
. The three statements inside of the block statement of thewhile
:- call the function
Fahrenheit2Celsius
with the value of the argument fahr set to the value of the variable fahrenheit then set the value of the variable celsius to thereturn
value of the function. - output a message by calling the function
msg
with the value of the argument set to a primitive string consisting of the concatenation of the fahrenheit value, the string value'°F is '
, the celsius value and the string value'°C'
. JavaScript creates this string value by automatically converting the primitive number values in fahrenheit and celsius to string values and the applying the string concatenation operator+
. Note that this automatic conversion behavior is dramatically different from other languages. - increment the value of the fahrenheit variable by the value of the variable step.
while
loop will terminate as soon as fahrenheit is greater than the variable upper. The final part of the program is the definition of the functionFahrenheit2Celsius
with argumentfahr
.function Fahrenheit2Celsius(fahr) { var cels = (5/9)*(fahr - 32); return cels; }
The body of the function consists of the two statements contained within the braces{
and}
. Each time the function is called, the argument is initialized to the value passed by the caller and the body of the function is executed. Thereturn
value of the function is used as the value of the function in whatever expression the function call occured. The first statement ofFahrenheit2Celsius
declares the variable cels in the scope of the function which is initialized by the value of the expression(5/9)*(fahr - 32)
. The expression(5/9)*(fahr - 32)
is evaluated by first calculating the contents of the first parentheses(5/9)
by dividing the number5
by the number9
, then calculating the value of the second parentheses(fahr - 32)
by subtracting the number32
from the value in the variable fahr, then multiplying the two results together. Note that JavaScript automatically converts the result of dividing two integers into a floating point number unlike C. The next statement returns the value of the variable cels as the value of the function. The scope of the function determines how the values of variables are determined inside the function. When a function is called, its scope consists of the variable (or variables) defined as arguments to the function along with the variables declared inside of the function. Whenever an expression in the function refers to a variable, JavaScript first tries to find the variable in the function scope and if it is found, the value of that variable is used. However if the variable is not found in the function's scope, JavaScript will attempt to find the variable in the parent scope of the function. In our example, the parent scope of the functionFahrenheit2Celsius
is the global scope of the program. The parent scope of a function is determined at compile time and does not change regardless of the scope where the function is executed. Once the function has completed executing, any variables defined in the scope of the function will cease to exist. If a variable is used inside of a function without being declared using thevar
statement, JavaScript considers the variable to part of the program's global scope. Declaring function variables helps isolate functions from side effects in programs and helps increase maintainability in programs. For example, the Venkman JavaScript debugger, available from mozilla.org, will display all variables declared in function scope in a separate "local variables" panel from the "global variables/properties". Considering the large number of global variables and properties which are defined by the browser's DOM, it is much easier to inspect the variables used in a function if they are declared as local. Note that JavaScript does not require that a function be declared or defined before it is used in a program. The functionFahrenheit2Celsius
could have been located anywhere in the program. - call the function
- Introduction to Objects
-
PropertiesJavaScript objects are named collections of properties. Properties have names and can contain primitive values such as strings, numbers or references to other Objects. C++ and Java programmers can think of a JavaScript object as similar (in their use) as an instance of a
struct
orclass
. JavaScript objects can be created either by using literal object initializers using braces ({}
) or using thenew
operator on constructors. For example, the following creates an empty object literalObject using an literal object initializer and another empty object constructedObject using thenew
operator on theObject()
constructor.var literalObject = {}; var contructedObject = new Object();
Properties are set and retrieved using the member of operators (.
) or ([]
). If variable myobject references an object, then the property named propname can be accessed in one of two ways:myobject.propname
myobject['propname']
myobject.propname
) requires that propname be an identifier, that is the characters in propname must begin with a unicode letter, an underscore (_
) or a dollar sign ($
) and the remaining characters must be unicode letters, unicode digits, underscores or dollar signs. If propname is not an identifier, the second syntax (myobject['propname']
) can still be used. For examplemyobject['this is a property name that is not an identifier']
is a valid property reference. The second syntax can also be used with a variable containing the property name (object[prop]
) which is useful in circumstances where the property name is not known until the program runs. Local versus Shared PropertiesEvery JavaScript object has a special internal property called its prototype object which is used to implement shared properties and object inheritance. To understand the role of the prototype object a little better, lets look at how JavaScript determines the value of an object's property. When you access the value of an object's propertymyobject.propname
, JavaScript first looks inmyobject
for a local property named propname. If a local property with the requested name is found, JavaScript will return the value of that property. If the property is not found, JavaScript will try to find the property in the object's prototype object. If again the property is not found, JavaScript will attempt to find the property in the prototype of the prototype and so on until either the property is found or the prototype chain ends. If the property was not found, then JavaScript will returnundefined
as the result. As a result, JavaScript objects which share prototype objects effectively share the properties of the prototype (and those of the entire prototype chain). A local property is defined when you assign a value to an object property as inmyobject.propname = value;
. The value of this property is not shared with any other instances of objects. If a property is shared via the prototype chain, any assignment to the local property shadows the shared property effectively replacing it for that object. Literal Object initializers can be used to define local properties and their initial values by listing each property name followed by a colon (:
), followed by the property value as invar literalObject = { property1: 'value1', 'property 2': 'value2' };
Each property/value pair (except the last) is terminated by a comma (,
). Note that property names which are not identifiers (property 2
in the above example) can be written as string literal values.Example Literal Object Properties // create an instance of Object using a literal initializer var literalObject = { property1: 'value1', 'property 2': 'value2' }; // display the values of the properties msg('literalObject.property1 = ' + literalObject.property1); msg('literalObject[\'property 2\'] = ' + literalObject['property 2']);To create a similar object using the
javascript default1.11.21.31.41.5 executejavascript default1.11.21.31.41.5 executeObject()
constructor, we would first create the object usingnew Object()
, then create the local properties by assigning values to them as in:Example Constructed Object Properties // create an instance of Object using a Constructor var constructedObject = new Object(); // add properties to object constructedObject.property1 = 'value1'; constructedObject['property 2'] = 'value2'; // display the values of the properties msg('constructedObject.property1 = ' + constructedObject.property1); msg('constructedObject[\'property 2\'] = ' + constructedObject['property 2']);As you can see, the only difference in these examples is the means by which the objects were created. Simple Object methodsObject properties are not limited to simple values such as strings or numbers but can also be functions which are also known as methods. For example, we can create an object which represents a circle which can report its area.
javascript default1.11.21.31.41.5 executejavascript default1.11.21.31.41.5 executeExample Simple Circle // define the method getArea function getArea() { return Math.PI * this.radius * this.radius; } // create a 'circle' with radius 1 var circle = {radius: 1}; // attach the method to the circle object // as a local property circle.getArea = getArea; msg('circle with radius ' + circle.radius + ' has area ' + circle.getArea());This program first defines a function getArea which will be used as a method of the circle object. getArea returns the value of area of the circle by calculating the square of the circle's radius multiplied by π.
javascript default1.11.21.31.41.5 executejavascript default1.11.21.31.41.5 executethis
is a special name which is used inside of methods to refer to the object which contains the method. Inside of the getArea method,this.radius
refers to circle.radius.Math
is a built-in JavaScript object which contains a number of properties and methods useful in mathematical calculations.Math.PI
is the value of the mathemetical constant PI (π). The next statement creates the circle object via an object initializer to contain a numeric property called radius representing a radius of the circle. The next statement creates a local property of the circle objectgetArea
by assigning a reference to the function getArea. Simple ConstructorsThe simple approach to creating and using JavaScript objects is useful when you have only a few objects with a small number of properties each but can be awkward when you have more objects to create. Consider the situation where you have many instances of the samekind
of object to create:function getArea() { return Math.PI * this.radius * this.radius; } var circle1 = {radius: 1}; circle1.getArea = getArea; var circle2 = {radius: 2}; circle2.getArea = getArea; var circle3 = {radius: 3}; circle3.getArea = getArea; …
The repetitive creation and initialization of the properties and methods of the various circle objects is boring and error prone. Fortunately, JavaScript provides the ability to encapsulate the creation and initialization of similar instances of objects through the use of constructors.Example Simple Constructor function Circle(radius) { this.radius = radius; this.getArea = function () { return Math.PI * (this.radius * this.radius); }; } // create an array to hold the circle objects var circles = []; var i; // loop from i == 0 to 2 creating Circle objects for (i = 0; i < 3; i++) { circles[i] = new Circle(i + 1); } for (i = 0; i < 3; i++) { msg('The area of a circle of radius ' + circles[i].radius + ' is ' + circles[i].getArea()); }The function
javascript default1.11.21.31.41.5 executejavascript default1.11.21.31.41.5 executeCircle
defines a constructor forCircle
objects. It takes one argument,radius
, which is a number representing the radius of the circle. The next statement uses an array initializer to create an emptyArray
object called circles. AnArray
is a kind of JavaScript object used to store lists of items which can be accessed by using the[]
member of operator and the numeric position (index) of the item in the list. Items inArray
s are indexed from0
. For example, if list is anArray
, thenlist[0]
is the first item in the list,list[1]
is the second item, and so on. Thefor
loop is very similar to thewhile
loop we saw in the Fahrenheit conversion example and is used to create3
instances of theCircle
object which are stored in the circles array.for
loops have the form:for (initializer; conditional; increment) statement
and are equivalent to the followingwhile
loop:initializer; while (conditional) { statement increment; }
The initializer expression is evaluated first. It is used to set up the initial values before the loop is executed. Then the conditional expression is evaluated. If it isfalse
, thefor
loop terminates and the statement following it in the program is executed. If the condition is true, the statement is executed and the initializer expression is evaluated and the whole process begins again by testing if the conditional is stilltrue
. Thenew Circle(radius)
statement creates an instance of theCircle
object by creating an empty native JavaScript object, then setting itsprototype
object to the prototype of the functionCircle
, then calls theCircle
constructor with thethis
identifier set to reference the newly created object. The constructor adds the local propertiesradius
andgetArea
to the instance.getArea
is initialized with a function expression which can be called like any other function. Since the propertiesradius
andgetArea
were created as local properties of theCircle
instance, they are created independently for each instance ofCircle
. Even though each instance of Circle has the same methodgetArea
, the compiled code is duplicated for each separate instance thus increasing the memory usage if there are many such instances created. We could have saved the extra code by defining the function separately and simply assigning a reference to the function to getArea however that would have still meant we needed an extra local property for getArea in each instance. We will see later how to save both the compiled code and the extra reference when we discuss object prototypes in more detail. Finally, the program outputs a message by concatenating the string value'The area of a circle of radius '
, the value of theradius
property of the Circle instance, the string' is '
and the value returned by calling the methodgetArea
of the Circle instance. Note that constructor functions such asCircle()
should not be called as ordinary functions unless they are specifically designed to be called that way. The reason has to do with the value of thethis
object reference inside of normal function calls does not reference the object you expect. For more details see Execution Contexts. Object InheritanceThe style of creating objects using Simple Constructors is sufficient for most cases however it fails to handle cases where differentkinds
of objects need to share properties and methods. What is needed is a way for us to create objects which share properties and methods. What we need to do is combine the use of constructors and prototypes. Remember, constructors are functions (and also objects) which thenew
operator acts upon to create instances of the object defined by the constructor. Since constructors are objects, constructors also have a prototype property which is conveniently namedprototype
. When thenew
operator acts upon a constructor, it first creates an empty native JavaScript object (called the instance), then sets the internalprototype
property of the instance to theprototype
property of the constructor, then the identifierthis
is set to point to the new instance and the constructor is called. The constructor can create local properties of the newly created object by creating the properties on thethis
object. It is possible to create chains of constructors where the prototype of one constructor is an instance of another constructor. JavaScript uses these prototype chains to implement object-oriented inheritance. Lets generalize our Circle object to be a part of a graphics program where we use families of objects to represent geometric shapes.Example Object_Inheritance /* * Circles and Squares */ // Define a Shape Object which is intended to serve as the ancestor // of all "shapes" in the program. function Shape(size) { if (size > 0) { // only define the size property as a local property // of each instance if it is non-zero. Otherwise, the // shared size property of the Shape Object's prototype // object will be used. this.size = size; } } // Add a shared sized property to Shape's prototype // Every instance of Shape has a default size of 0 // unless it is overridden by the constructor. Shape.prototype.size = 0; // Every instance of Shape has the same name. Implement it // as a shared property so that only one instance of the name // can be shared amongst all instances. Shape.prototype.name = 'Shape'; // Every instance of Shape has an area which scales as the // square of the size of the shape. Define a default getArea // method which can be shared or overridden by child classes. Shape.prototype.getArea = function _getArea() { return this.size * this.size; } /* * Squares */ // Define a Square as a kind of Shape function Square(size) { // call the Shape constructor on this // object to initialize it Shape.call(this, size); } // set Square's prototype to Shape to // share Shape's properties Square.prototype = new Shape; // override the shared name property Square.prototype.name = 'Square'; // Note that Square does not need to // override Shape's getArea method /* * Circles */ // Define Circle as a kind of Shape function Circle(size) { // call the Shape constructor on this // object to initialize it Shape.call(this, size); } // set Circle's prototype to Shape to // share Shape's properties Circle.prototype = new Shape; // override the shared name property Circle.prototype.name = 'Circle'; // override the getArea method to return the // proper area of a Circle Circle.prototype.getArea = function() { return Math.PI * Shape.prototype.getArea.call(this); }; function tellMeAbout(shape) { var list = ''; for (var propname in shape) list += propname + ', '; msg(shape.name + ' has the following properties: ' + list); msg('shape ' + ('size' in shape ? ' has ' : ' does not have ') + 'property size'); msg('shape ' + (shape.hasOwnProperty('size') ? ' has ' : ' does not have ') + 'local property size'); msg('shape ' + ('name' in shape ? ' has ' : ' does not have ') + 'property name'); msg('shape ' + (shape.hasOwnProperty('name') ? ' has ' : ' does not have ') + 'local property name'); msg('shape ' + ('getArea' in shape ? ' has ' : ' does not have ') + 'property getArea'); msg('shape ' + (shape.hasOwnProperty('getArea') ? ' has ' : ' does not have ') + 'local property getArea'); msg('shape ' + shape.name + ' ' + (shape instanceof Object ? 'is' : 'is not') + ' an instance of Object'); msg('shape ' + shape.name + ' ' + (shape instanceof Shape ? 'is' : 'is not') + ' an instance of Shape'); msg('shape ' + shape.name + ' ' + (shape instanceof Circle ? 'is' : 'is not') + ' an instance of Circle'); msg('shape ' + shape.name + ' ' + (shape instanceof Square ? 'is' : 'is not') + ' an instance of Square'); msg('The area of a ' + shape.name + ' of size ' + shape.size + ' is ' + shape.getArea()); } var shape; msg('<br>create an instance of Shape with no size<br>'); shape = new Shape; tellMeAbout(shape); msg('<br>create an instance of Circle with size 1<br>'); shape = new Circle(1); tellMeAbout(shape); msg('<br>create an instance of Square with size 2<br>'); shape = new Square(2); tellMeAbout(shape);This example is quite a bit longer than we have seen so far however it is really not any more complicated. There are four sections to the program:
javascript default1.11.21.31.41.5 executejavascript default1.11.21.31.41.5 execute- Definition of the Shape Object.
- Definition of the Square Object as a kind of Shape.
- Definition of the Circle Object as a kind of Shape.
- Creation of instances of Square and Circle and the output of messages
if
statement.if
statements are used to select which set of statements are to be executed depending on the value of a conditional test and have the form:if (condition) statement
If condition evaluates totrue
, the statement will be executed, otherwise it will be skipped. Another form allows the choice of one of two possible statements depending on the condition.if (condition) statement1 else statement2
In this case, if condition evaluates totrue
, statement1 will be executed, but if condition isfalse
, then statement2 will be executed. In our example, the condition is the testsize > 0
. If the size is greater than0
, the set of statements in the block ( the statements surrounded by the braces{}
) is executed. If the size is less than or equal to0
, the local property this.size is not defined in order to allow it to be shared as the0
value. Since in our example a Shape of0
size doesn't make much sense the trick doesn't add much to our example, but does illustrate a technique where you can save memory usage by sharing the most common value of a property and only defining the property as local if the value differs. Immediately following the Shape constructor, the shared size property is added to Shape's prototype object initialized to0
. In order to allow our Shapes to know what kind of shape they are, the next statement adds a shared property name with value'Shape'
to each instance of the Shape object. Note that even if we create 100,000 Shapes, no additional memory will be required to store the Shapes names since each will share the name property. As the final part of the definition of Shape objects, a shared method getArea is defined. Since areas scale as the square of the size of an object, I went ahead and defined the shared method as such. The second section of the program defines the Square Objects. The constructor Square is defined to take the same argument as the Shape constructor. In order to re-use the initialization code in Shape, thecall
method ofFunction
objects is used to call Shapes constructor.call
allows us to set thethis
value to point to our newly created Square while passing any required arguments. Following the definition of the Square constructor, theprototype
property of Square is initialized to be an instance of the Shape Object. This step is what makes the sharing of properties and methods between Squares and Shapes possible. If a property is not found as a local property of a Square, Square's prototype is search for the property and so on. Next the name property is overridden since we want our Squares to know they are Squares and not just Shapes. Since the area of a square is exactly the square of the length of its sides, there is no need to override the getArea method inherited from Shape. The third section creates the Circle Object in a very similar fashion to that used to define Squares. The only difference in the overriding of the getArea method to apply the correct forumula for the area of a circle. The fourth section of the program creates instances of Shape, Circle and Square and generates various reports about them. To simplify the program, a function tellMeAbout is defined to take an argument shape and then report various items about the shape such as:- list of enumerable properties in an object
- whether properties exist in objects
- whether properties are local or shared
- whether an object inherits from a particular Constructor
- the area of the shape
in
which tests if a property exists in a object either as a local property or as a property found in the object's protocol chain. For example:'propname' in object
will returntrue
ifobject.propname
exists. The operatorin
can also be used in afor
loop to enumerate each of an object's properties so long as the properties do not have the internal DontEnum attribute. For example, to iterate over the list of enumerable properties in an object:var prop; for (prop in object) { // prop is a string value // containing the name of a property }
The member functionhasOwnProperty
ofFunction
objects, is used to test if a property is local or shared.object.hasOwnProperty(propname)
returns true if propname is a local property of object. tellMeAbout also uses theinstanceof
operator to test if an instance of an object is an instance of a particular constructor. For example:object instanceof SomeConstructor
A new type of expression called the ternary or conditional expression is used throughout the function tellMeAbout. The conditional expression looks like:condition ? expression1 : expression2
The value of the conditional expression is the value of expression1 if the condition evaluates totrue
. If condition isfalse
, the value of the conditional expression is the value of expression2. This operator is convenient shorthand for:var value; if (condition) value = expression1; else value = expression2;
Part II - JavaScript (Pseudo) Reference
- JavaScript Data Types
-
Data types in JavaScript are divided into two categories:
- Primitive types whose members are primitive values. The primitive types in JavaScript consist of Undefined, Null, Boolean, Number and String.
- Object types whose members are all objects. A JavaScript object is really just an unordered collection of properties which may have attributes governing how the properties behave.
- Undefined
-
The Undefined primitive type has only one value:
undefined
which is used to represent the value a variable contains when it has not been initialized. - Null
-
The Null primitive type has only value:
null
. Whilenull
andundefined
are used in similar circumstances, the primary difference is that if a variable which has valuenull
has been intentionally initialized to contain a value whereas anundefined
value can mean the variable is uninitialized or even does not exist at all. - Boolean
-
The Boolean primitive type has two values:
true
andfalse
. Boolean primitive values are not the same as instances of Boolean Objects. - String
-
The String primitive type are sequences of characters. String primitive values are not the same as instances of String Objects. Literal primitive string values are written as a sequence of characters surrounded either by single quotes (
'
) or double quotes ("
). For example,"this is primitive string"
and'this is primitive string'
are both primitive string values. To include quotes in a string literal, you can alternate the type of quote as in"this contains a single ' quote"
or you can use character escapes to temporarily change the quote to a normal character as in'this contains a single \' quote'
. Character escapes are a means of temporarily changing the meaning of a character and are used to describe control characters as well as all quotes to be included in literal string. A character is escaped by preceding it with a\
character, for example to escape the lettera
, you would write it as\a
. Section ECMAScript 7.8.4 String Literals describes the character escapes\'
(escaped single quote),\"
(escaped double quote),\\
(escaped escape character),\b
(backspace),\f
(form feed),\n
(newline),\r
(carriage return),\t
(tab),\v
(vertical tab) which allow special characters to be included in string literals.MSIE does not support the\v
vertical tab character in literal strings. Since\v
is defined to be a white space character in Section 7.2 of the ECMAScript standard, MSIE also fails white space handling involving\v
.Example Character Escapes MSIE does not recognize vertical tab '\v' in strings.msg('\' supported ' + (String.fromCharCode(39) == '\'')); msg('\" supported ' + (String.fromCharCode(34) == '\"')); msg('\\ supported ' + (String.fromCharCode(92) == '\\')); msg('\b supported ' + (String.fromCharCode(8) == '\b')); msg('\f supported ' + (String.fromCharCode(12) == '\f')); msg('\n supported ' + (String.fromCharCode(10) == '\n')); msg('\r supported ' + (String.fromCharCode(13) == '\r')); msg('\t supported ' + (String.fromCharCode(9) == '\t')); msg('\v supported ' + (String.fromCharCode(11) == '\v'));
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute - Number
-
The Number primitive type are the lowest level representation of integers and floating point numbers. Number primitive values are not the same as instances of Number Objects. Literal primitive number values can be written as integers (
123
), as floating point with decimals (123.456
), as floating point with exponents (123.456e10
, thee
may be either case), as hexadecimal integers (0xFF
, thex
or hex digits A-F may be either case) - Objects
-
As I already mentioned, objects in JavaScript are collections of unordered properties. Each property of an object has a set of internal (not directly accessible to JavaScript programs) attributes which control how the property can be accessed: DontDelete, ReadOnly, and DontEnum.
- DontDelete
-
the property is permanent and can not be removed from the object using the
delete
operator. Any attempt to delete the property is ignored without error. - DontEnum
-
the property is not listed when the
in
operator is used in afor
loop to enumerate properties of an object. For example, for (var propname in object) { … }
will not list the property if it is DontEnum. However thein
operator can be used to test if the property exists. For example,('propname' in object)
will returntrue
ifobject.propname
exists andfalse
otherwise. - ReadOnly
- the property can not be changed through assignment and any attempt to assign to it is ignored without error.
When JavaScript1.1 or JavaScript1.2 are used in Mozilla, attempting to delete a {DontDelete} property or attempting to change a {ReadOnly} property will throw an error.try { Math.PI = 3; msg('Math.PI == ' + Math.PI); } catch(e) { msg('Error assigning to a [ReadOnly] property. ' + e.name + ': ' + e.message); } try { delete Math.PI; msg('Math.PI == ' + Math.PI); } catch(e) { msg('Error deleting a [DontDelete] property. ' + e.name + ': ' + e.message); }
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute
- Type Conversions
-
JavaScript automatically converts primitive values and object instances from one type to another depending upon the context. For example, as we have seen, when a number is added to a string using the
+
operator, JavaScript will determine that the appropriate operator is the string concatenation operator and will convert the number to a string before performing the operation.input To Boolean To Number To String To Object Undefined false
NaN
'undefined'
throw TypeError
Null false
+0
'null'
throw TypeError
Boolean no conversion 1
if input istrue
,+0
if input isfalse
'true'
if input istrue
,'false'
if input isfalse
new Boolean(input)
Number false
if input+0
,-0
, orNaN
otherwisetrue
no conversion 'NaN'
if input isNaN
'0'
if input is+0
,-0
'Infinity' if input isInfinity
otherwise a string primitive value consisting of the literal representation of the input valuenew Number(input)
String false
if string is empty, otherwisetrue
NaN
if the input does not match a literal number value, otherwise the number represented by the equivalent literal number value.no conversion new String(input)
Object true
convert the object's default value to a number convert the object's default value to a string no conversion // Convert undefined to primitive values msg('Boolean(undefined) is ' + Boolean(undefined)); msg('Boolean(null) is ' + Boolean(null)); msg('Boolean(10) is ' + Boolean(10)); msg('Boolean("42x") is ' + Boolean("42x")); msg('Number(undefined) is ' + Number(undefined)); msg('Number(null) is ' + Number(null)); msg('Number(10) is ' + Number(10)); msg('Number("42x") is ' + Number("42x")); msg('String(undefined) is ' + String(undefined)); msg('String(null) is ' + String(null)); msg('String(10) is ' + String(10)); msg('String("42x") is ' + String("42x"));One surprising result of the Object to Boolean conversion is that an instance of the
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5executeBoolean
Object with valuefalse
evaluates totrue
in conditional expressions but the Object to String conversion of the instance is the string 'false'.var bool = new Boolean(false); if (bool) { msg('new Boolean(false) is true'); } else { msg('new Boolean(false) is false'); } msg('String(new Boolean(false)) is ' + String(bool));
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5executeIn Mozilla (JavaScript1.1, JavaScript1.2),new Boolean(false)
is converted tofalse
instead oftrue
When called as a function, theNumber
constructor attempts to convert its argument to a number value. Mozilla JavaScript1.2 converts an Array object to its length. Mozilla JavaScript1.1, JavaScript1.3-JavaScript1.5 converts an empty Array to0
, an Array with one element to1
and a non-empty Array with length greater than1
toNaN
…Number(array)
is likeNumber(array.toString())
.var empty = []; var one = [1]; var nonempty = [1,2,3]; msg('Number(empty) == ' + Number(empty)); msg('Number(one) == ' + Number(one)); msg('Number(nonempty) == ' + Number(nonempty));MSIE converts all strings representing negative hexadecimal numbers to
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5executeNaN
.msg('Number("0x10") == ' + Number("0x10")); msg('Number("-0x10") == ' + Number("-0x10"));
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute - Execution Contexts
-
Before any JavaScript code is executed, a unique Global object is created which has {DontEnum} properties for the standard built-in objects (Math, String, Date, etc.) and any properties created by the host environment. The environment in which a JavaScript program is executing is maintained in a stack of objects called execution contexts. A stack, also known as a Last in First Out (LIFO) list is a list of data items where items are added (pushed) or removed (popped) from one end called the top of the stack. The execution context at the top of the stack is used by the executing program as the current context. Each execution context maintains an internal object called the variable object which is used to hold references to the variables and functions created in that context. Each variable (or function) is stored in the variable object as a property with property name equal to the variable (or function) name. Each execution context also maintains a scope chain which is a list of objects which are searched when a variable or name needs to be resolved. Whenever JavaScript needs to resolve a reference to a name, it first looks in the current object in the scope chain for a property with the same name. If it is found, the data referenced by that propery is returned as the value of the name. If the name is not found, the next object in the scope chain is searched and so on until either the name has been resolved or all objects in the scope chain have been searched. Once created for a context, the scope chain is only effected by
with
statements andcatch
clauses.Example Scope_Chain var v = 'global scope'; var o = {v: 'object scope'}; var e; msg('global this == ' + this); msg('global v == ' + v); msg('global e == ' + e); function test() { msg('function this == ' + this); msg('function v == ' + v); var v = 'function scope'; with (o) { msg('with this == ' + this); msg('with o v == ' + v); } try { throw 'string exception'; } catch(e) { msg('catch this == ' + this); msg('catch e == ' + e.name + ': ' + e.message); e = 'catch scope'; } msg('function e == ' + e); msg('function v == ' + v); } test(); msg('global v == ' + v); msg('global e == ' + e);
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5executeMSIE creates thecatch
variablee
containing the thrown exception in function scope. This means the variablee
exists after thecatch
clause has finished executing but ceases to exist after the function where thecatch
clause was located exits. This is not the same as Mozilla which does not define the catch variable outside of thecatch
clause.Both MSIE and Mozilla bind the initial scope to a function when it is created as a function expression. In the following example,Each execution context maintains a special value called thefunction f1()
is bound to a scope consisting of the global object whilefunction f2()
is defined inside awith
clause which adds the objecto
to the beginning of the scope followed by the global object.var v = 'value 1'; var o = {v: 'value 2'}; var f1 = function () { msg('v == ' + v); }; with (o) { var f2 = function () { msg('v == ' + v); }; } // call with the initial values f1(); f2(); // now modify the values v = 'modified value 1'; o.v = 'modified value 2'; f1(); f2();However when the function is defined using a function declaration, MSIE differs from Mozilla and binds the function to the global scope regardless of any scope changes introduced by
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5executewith
clauses.var v = 'value 1'; var o = {v: 'value 2'}; function f1() { msg('v == ' + v); }; with (o) { function f2() { msg('v == ' + v); }; } // call with the initial values f1(); f2(); // now modify the values v = 'modified value 1'; o.v = 'modified value 2'; f1(); f2();
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5executethis
value which is determined by how the context was created and the type of code being executed. Thethis
value can not be changed to point to a different object, although properties can be added or removed from it.- Global Execution Context
-
Whenever a JavaScript program begins, a Global execution context is created and pushed onto the top of the stack. The scope chain is initialized to contain just the global object and the
this
value is set to point to the global object. Variables are created as {DontDelete} properties of the global object.Example Global_Execution_Context var globalVar = 'this is a global variable'; msg('globalVar = ' + globalVar); msg('this.globalVar = ' + globalVar); try { // it should not be possible delete the variable // but no error should be thrown. delete this.globalVar; msg('this.globalVar after delete = ' + this.globalVar); } catch(e) { msg('An unexpected error occured deleting a globalVar variable ' + e.name + ': ' + e.message); }
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5executeMozilla (JavaScript1.1, JavaScript1.2) will throw an error when deleting a global variable since it is defined as {DontDelete}. Note that Mozilla JavaScript1.3 and later do not have the behavior and that Mozilla JavaScript1.1, JavaScript1.2 do not throw errors when deleting function local variables even though they are also {DontDelete}. - Eval Code Context
-
Whenever JavaScript code is compiled using the
eval
function, an eval execution context is created and pushed onto the stack until the eval'd code completes when the eval execution context is removed from the stack. The calling execution context determines the scope chain, the variable object and thethis
value for the eval execution context. If there is no calling context, the scope chain, variable object and thethis
value are determined in the same way as for the global execution context.Example Eval_Execution_Context eval("var evalVar = 'this is an eval variable'"); msg('evalVar = ' + evalVar); msg('this.evalVar = ' + evalVar); try { // it should be possible delete the variable // and no error should be thrown. delete this.evalVar; msg('this.evalVar after delete = ' + this.evalVar); } catch(e) { msg('An unexpected error occured deleting a global variable ' + e.name + ': ' + e.message); }
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute - Function Execution Context
-
Each time a function call is performed, a function execution context is created and pushed onto the top of the stack and then removed from the stack when the function call ends. An Activation Object is created in the execution context for each function call and is treated as the variable object for the execution context. The scope chain for the context is created by placing the activation object in front of the scope chain of the calling execution context. An
arguments
object is added as a {DontEnum} property to the variable. Thearguments
object is initialized with the following properties:-
callee
- a {DontEnum} property which points to the function object being executed.
-
caller
(non-standard)
-
-
In Mozilla and MSIE, the non-standard
caller
property was used to point to the function which called the currently executing function. This property has been removed from recent releases of both browsers due to security considerations.function Caller() { msg('Caller: Caller.arguments ' + Caller.arguments); Callee(); } function Callee() { msg('Callee: arguments.caller ' + arguments.caller); } Caller();
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute -
length
- a {DontEnum} property which contains the number of actual arguments in the function call.
- a property for each argument
-
For each argument supplied, a {DontEnum} property of the same name is created in the
arguments
.Mozilla JavaScript1.1, JavaScript1.2 will allow function arguments to be enumerated as zero based indexes into the arguments list. This is not possible in Mozilla JavaScript1.3 or later.
this
value remains unchanged from that of the calling context however in the context of a constructor call (new SomeFunction()
), the this
value is set to the newly created JavaScript object. An example of a normal function call…
Example Function_Call_Context var global = this; var avar = 'this is a global variable'; func('this is arg0', 'this is arg1'); msg('After func this === global is ' + (this === global)); msg('After func avar should be unchanged ' + avar); function func(arg0, arg1, arg2) { // the this value should point to the global object msg('Inside func this === global is ' + (this === global)); // declare a varible local to the function var avar = 'this is a local variable'; msg('Inside func avar == ' + avar); // attempt to delete the local variable try { msg('delete avar == ' + (delete avar)); } catch(e) { msg('an error occured during delete avar ' + e.name + ': ' + e.message); } msg('typeof avar == ' + typeof avar); // the length of the function should be the number // of defined arguments. In this case 3. msg('func.length is ' + func.length); msg('arguments ' + arguments); // the length of the arguments object should be the // number of actual arguments the function was called with. // In this example it should be 2. msg('arguments.length is ' + arguments.length); // this function msg('arguments.callee <pre>' + arguments.callee + '</pre>'); // the caller function which will be undefined. msg('arguments.caller <pre>' + arguments.caller + '</pre>'); // the properties of the arguments object should be {DontEnum} // so this should output the empty string. var arglist = ''; for (var arg in arguments) { arglist += arg + ', '; } msg('Enumerable properties of arguments ' + arglist); }
An example of a constructor function call…
javascript default1.11.21.31.41.5execute
javascript default1.11.21.31.41.5execute
Example Constructor_Call_Context var global = this; var avar = 'this is a global variable'; var instance = new func('this is arg0', 'this is arg1'); msg('After func this === global is ' + (this === global)); msg('this.propname should be undefined ' + this.propname); msg('instance.propname should be defined ' + instance.propname); function func(arg0, arg1, arg2) { // the this value should point to the newly created object // and _not_ the global object. msg('Inside func this === global is ' + (this === global)); // add a property to this instance this.propname = 'a property in our new object'; // attempt to delete the local variable try { msg('delete avar == ' + (delete avar)); } catch(e) { msg('an error occured during delete avar ' + e.name + ': ' + e.message); } msg('typeof avar == ' + typeof avar); // the length of the function should be the number // of defined arguments. In this case 3. msg('func.length is ' + func.length); msg('arguments ' + arguments); // the length of the arguments object should be the // number of actual arguments the function was called with. // In this example it should be 2. msg('arguments.length is ' + arguments.length); // this function msg('arguments.callee <pre>' + arguments.callee + '</pre>'); // the caller function which will be undefined. msg('arguments.caller <pre>' + arguments.caller + '</pre>'); // the properties of the arguments object should be {DontEnum} // so this should output the empty string. var arglist = ''; for (var arg in arguments) { arglist += arg + ', '; } msg('Enumerable properties of arguments ' + arglist); }
javascript default1.11.21.31.41.5execute
javascript default1.11.21.31.41.5execute
- Identifiers
-
An identifier is a sequence of characters beginning with either
$
(dollar sign),_
(underscore) or a unicode letter followed by unicode letters, unicode digits, underscores (_
) or dollar signs ($
). The characters can also be written using unicode escape sequences. Note that identifiers are not restricted to the normal latin character set, but are instead allowed to have letters and digits from the unicode character set.// Valid Identifiers // latin type variable identifiers var _foo123; var $foo123; var foo123; var foo_123$ // hindi variable identifier using unicode escapes var \u092F\u0942\u0928\u093F\u0915\u094B\u0921 = 'unicode'; msg('\u092F\u0942\u0928\u093F\u0915\u094B\u0921 == ' + \u092F\u0942\u0928\u093F\u0915\u094B\u0921); // hindi variable identifier using unicode characters var यूनिकोड = 'unicode'; msg('यूनिकोड == ' + यूनिकोड); msg('Test passed');
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute// Invalid Identifiers // Mozilla will fire a window.onerror or exception handler // for compile time errors, however MSIE will not. try { eval('var 0foo;'); // the next statement is an error // the next statement should not be executed msg('Test failed: invalid identifier 0foo == ' + 0foo); } catch(e) { msg('Test passed: 0foo is an invalid identifier ' + e.name + ': ' + e.message); }
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute - Reserved Words
-
Keywords are identifiers which have special meanings in JavaScript and should not be used as variable or property names. Reserved words are identifiers which may be used as keywords in future versions of JavaScript and should not be used as variable or property names.
Example 7.5.1 - Reserved Words// test if a word can be declared as var function testvar(words) { var e; for (var i = 0; i < words.length; i++) { var word = words[i]; try { eval('var ' + word + ';'); msg('test failed: ' + word + ' is declarable'); } catch(e) { msg('test passed: ' + word + ' is not declarable ' + e.name + ': ' + e.message); } } } // test if a word can be assigned to function testwrite(words) { var e; for (var i = 0; i < words.length; i++) { var word = words[i]; try { eval(word + ' = "foo";'); msg('test failed: ' + word + ' is writable'); } catch(e) { msg('test passed: ' + word + ' is not writable ' + e.name + ': ' + e.message); } } } // keywords var keywords = ['break', 'else', 'new', 'var', 'case', 'finally', 'return', 'void', 'catch', 'for', 'switch', 'while', 'continue', 'function', 'this', 'with', 'default', 'if', 'throw', 'delete', 'in', 'try', 'do', 'instanceof', 'typeof']; // future reserved words var reserved = ['abstract', 'enum', 'int', 'short', 'boolean', 'export', 'interface', 'static', 'byte', 'extends', 'long', 'super', 'char', 'final', 'native', 'synchronized', 'class', 'float', 'package', 'throws', 'const', 'goto', 'private', 'transient', 'debugger', 'implements', 'protected', 'volatile', 'double', 'import', 'public']; testvar(keywords); testvar(reserved); testwrite(keywords); testwrite(reserved);
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5executeMSIE incorrectly allows the following to be declared as variables and assigned values:abstract
,int
,short
,boolean
,interface
,static
,byte
,long
,char
,final
,native
,synchronized
,float
,package
,throws
,goto
,private
,transient
,implements
,protected
,volatile
,double
,public
. In Mozilla 1.7 (Firefox 1.0) JavaScript 1.1, JavaScript 1.2 instanceof, enum, export, debugger are declarable and writable however in Mozilla 1.7 (Firefox 1.0) for JavaScript 1.3 and later the other keywords and reserved words are not declarable or writable. Mozilla 1.8 (Firefox 1.1) and later (Bugzilla 240317) relax the declaration and assignment of reserved identifiers to improve MSIE compatibility. The following words will no longer throw errors but will still issue JavaScript warnings:abstract
,enum
,int
,short
,boolean
,interface
,static
,byte
,extends
,long
,super
,char
,final
,native
,synchronized
,class
,float
,package
,throws
,goto
,private
,transient
,implements
,protected
,volatile
,double
,public
- Function Expressions
-
Mozilla can define functions in conditionals. If the code branch is not executed due to the conditional the function is not defined. MSIE however uses the definition of the last occurence of the function. Both Mozilla and MSIE can conditionally define function expressions.// works in Mozilla, not MSIE if (true) { function f() { return 'true'; }; } else { function f() { return false; }; } msg('Conditional Function: ' + f());
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute// works in Mozilla and MSIE var f; if (true) { f = function () { return 'true'; }; } else { f = function () { return false; }; } msg('Conditional Function: ' + f());
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5executeMSIE violates the ECMSAcript standard since it can reference a function name outside of the function expression.f = function foo(){alert('foo');}; foo();
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute
Description | Operator | Associativity |
---|---|---|
member of | [] . |
left to right |
(grouping | function call), create instance | () new |
right to left |
unary | ! ~ ++ -- + - typeof void delete |
right to left |
multiplicative | * / % |
left to right |
addition | + - |
left to right |
bitwise shift | << >> >>> |
left to right |
relational | < <= > >= in instanceof |
left to right |
equality | == === != !== |
left to right |
bitwise and | & |
left to right |
bitwise xor | ^ |
left to right |
bitwise or | | |
left to right |
logical and | && |
left to right |
logical or | || |
left to right |
conditional | ?: |
right to left |
assignment | = *= /= %= -= <<= >>= >>>= &= ^= |= |
right to left |
comma | , |
left to right |
- Member of Operators
-
Mozilla has the ability to define getter and setter methods for user defined objects. Note that Mozilla introduced this feature in JavaScript 1.5, however it is available for all language versions in Mozilla.
- deprecated - can only create getters and setters as local properties.{_prop: stuff, get prop() {...}, set prop() {...}}
or instance.propname getter = function(arglist) {...};
or instance.propname setter = function(arglist) {...}; - recommended - can create getters and setters as shared properties.someObject.prototype.__defineGetter__('propname', function(arglist) ) someObject.prototype.__lookupGetter__('propname');
and someObject.prototype.__defineSetter__('propname', function(arglist) ) someObject.prototype.__lookupSetter__('propname');
var deprecated_1 = { _prop: 'default value', get prop() { return this._prop; }, set prop(v) { return this._prop = v; } } msg('deprecated_1.prop == ' + deprecated_1.prop); deprecated_1.prop = 'foo'; msg('deprecated_1.prop == ' + deprecated_1.prop); var deprecated_2 = { _prop: 'default value' }; deprecated_2.prop getter = function() { return this._prop; }; deprecated_2.prop setter = function(v) { return this._prop = v; }; msg('deprecated_2.prop == ' + deprecated_2.prop); deprecated_2.prop = 'foo'; msg('deprecated_2.prop == ' + deprecated_2.prop); function NonDeprecated(v) { this.prop = v; } NonDeprecated.prototype.__defineGetter__('prop', function() { return this._prop; } ); NonDeprecated.prototype.__defineSetter__('prop', function (v) { return this._prop = v; } ); var nondeprecated = new NonDeprecated('initial value'); // call getter msg('nondeprecated.prop == ' + nondeprecated.prop); // call setter nondeprecated.prop = 'foo'; msg('nondeprecated.prop == ' + nondeprecated.prop); // lookup getter msg('nondeprecated.__lookupGetter__(\'prop\') == ' + nondeprecated.__lookupGetter__('prop')); // lookup setter msg('nondeprecated.__lookupSetter__(\'prop\') == ' + nondeprecated.__lookupSetter__('prop'));
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5executeThe__noSuchMethod__
handler was introduced in Mozilla 1.6 in Bug 196097 '__noSuchMethod__' handler for trapping calls to undefined object methods.// define on an object instance var obj = {}; obj.__noSuchMethod__ = function(id, args) { msg('Undefined method ' + id + ' called with arguments (' + args.join(', ') + ')'); }; obj.foo('bar'); // define on an object prototype Object.prototype.__noSuchMethod__ = function(id, args) { msg('Undefined method ' + id + ' called with arguments (' + args.join(', ') + ')'); }; var date = new Date(); date.baz('foobar');
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute - deprecated - can only create getters and setters as local properties.{_prop: stuff, get prop() {...}, set prop() {...}}
-
Member of (
[]
) Operator -
Syntaxexpression[propertyexpression]
- Access Object Properties
-
Returns the value of a property from an instance of an object. The result of evaluating expression must be or be convertable to an instance of an object, otherwise a
TypeError
is thrown. For example, it is aTypeError
to attempt to access or set a property onundefined
ornull
values.try { null['prop'] = 'foo'; } catch(e) { msg(e.name + ': ' + e.message) }The name of the property is obtained by evaluating propertyexpression and converting the result to a string primitive value. There is no restriction on the characters which can be used as part of the property name.
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5executevar object = {}; object['0' + Math.PI] = 'bar';If the property exists in the object, the values is returned, otherwise
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5executeundefined
is returned.var object = {foo: 'bar'}; msg('object["foo"] == ' + object["foo"]); msg('object["fu"] == ' + object["fu"]);
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute - Access Array items
-
Instances of
Array
Objects treat the numeric index (position) values of items in the array as special object property values which must be less than 232. If an item does not exist at the specified position in the array,undefined
is returned.Neither Mozilla nor MSIE appear to limit the index values to less than 232.var array = [0, 1, 2]; msg('array[0] == ' + array[0]); msg('array[1] == ' + array[1]); msg('array[2] == ' + array[2]); msg('array[3] == ' + array[3]); var exponents = [32, 64, 128, 256]; for (var i = 0; i < exponents.length; i++) { var exponent = exponents[i]; var index = Math.pow(2,exponent); try { array[index] = index; msg('array[' + index + '] == ' + array[index]); } catch(e) { msg('Exception attempting to set array item at index ' + index + ' ' + e.name + ': ' + e.message); } }
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute - Access characters in Strings
-
Mozilla extends the
[]
operator to allow it to access characters from string values as if the string were an array of characters. This is not supported in MSIE.var string = "abc"; msg('string[0] == ' + string[0]); msg('string[1] == ' + string[1]); msg('string[2] == ' + string[2]); msg('string[3] == ' + string[3]);
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute
-
Member of (
.
) Operator - .
-
Grouping (
()
) Operator - grouping and function call
-
Create instance (
new
) Operator -
// new Operand, Operand must be an Object with Constructor else // throws TypeError try { var o = new 'foo'; } catch(e) { msg('Test passed : ' + e.name + ': ' + e.message); if (e instanceof TypeError) { msg('Error Object is a TypeError'); } else { msg('Error: Error Object is not a TypeError'); } }
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute - Unary Operators
- .
-
>Unary Logical Not (
!
) Operator -
Unary Logical Not (
!
) converts the value to boolean, then returnsfalse
if the value wastrue
andtrue
otherwise. -
Unary Bitwise Complement (
~
) Operator -
Unary Bitwise Complement
~
converts its operand to a 32-bit integer, then performs bitwise complement (switching 0 ↔ 1). Non-numeric values are converted to -1 (the complement of0
).Example Unary_Bit_Negation msg('~(+1) == ' + ~(+1)) msg('~(-1) == ' + ~(-1)); msg('~0x0f) == ' + ~0x0f); msg('~(NaN) == ' + ~(NaN)); msg('~(0) == ' + ~(0)); msg('~(\'1\') == ' + ~('1')); msg('~(\'a\') == ' + ~('a'));
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute -
Increment (
++
) Operator -
The increment operator (
++
) is used to add the number1
to a variable or object property. It can be applied either in prefix (++variable
) or postfix (variable++
) forms. When used as a prefix,++variable
, it first converts the value to a primitive number value, increments the value and then returns the new value as a primitive number value for use in the expression. When used as a postfix,variable++
, it increments the value but returns the original value for use in the expression.++
can only be used on named instances containing values which can be converted to number primitive values.Example Increment_Operator var value = 0; msg('before: value == ' + value + ', during: ++value == ' + ++value + ', after: value == ' + value); value = 0; msg('before: value == ' + value + ', during: value++ == ' + value++ + ', after: value == ' + value); // instances of Number Objects are converted to primitive number values value = new Number(0); msg('before: typeof value == ' + typeof value + ', value == ' + value + ', during: value++ == ' + value++ + ', after: typeof value == ' + typeof value + ', value == ' + value); // instances of strings are converted to primitive number values value = '0'; msg('before: typeof value == ' + typeof value + ', value == ' + value + ', during: value++ == ' + value++ + ', after: typeof value == ' + typeof value + ', value == ' + value);
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5executeExample Increment_Operator_Errors try { // attempt to increment a literal is a compile time error // use eval to force runtime error. eval('++1;'); msg('Test failed. ++1 == ' + eval('++1')); } catch (e) { msg('The operand of ++ can not be a literal'); } try { // It is an error to increment a string if it can // not be converted to a primitive number value. var s = 'string'; eval('++s;'); msg('Test failed. ++s == ' + string); } catch (e) { msg('The operand of ++ must convertable to a number'); }
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute -
Decrement (
--
) Operator -
The increment operator (
--
) is used to subtract the number1
from a variable or object property. It can be applied in prefix (--variable
) or postfix (variable--
) forms. When used as a prefix,--variable
, it first converts the value to a primitive number value, increments the variable and then returns the new value as a primitive number value for use in the expression. When used as a postfix,variable--
, it increments the value but returns the original value for use in the expression.--
can only be used on named instances containing values which can be converted to number primitive values. -
Unary (
+
) Operator -
unary
+
operator converts its single operand to a primitive number value. If the operand can not be converted to a number, the valueNaN
is returned.var before = '1'; var after = +before; msg('typeof before == ' + typeof before + ', before == ' + before); msg('typeof after == ' + typeof after + ', after == ' + after); before = 'a'; after = +before; msg('typeof before == ' + typeof before + ', before == ' + before); msg('typeof after == ' + typeof after + ', after == ' + after);
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute -
Unary (
-
) Operator -
unary
-
operator converts its single operand to a primitive number value and then returns the negative of that value. If the operand can not be converted to a number, the valueNaN
is returned.var before = '1'; var after = -before; msg('typeof before == ' + typeof before + ', before == ' + before); msg('typeof after == ' + typeof after + ', after == ' + after); before = 'a'; after = -before; msg('typeof before == ' + typeof before + ', before == ' + before); msg('typeof after == ' + typeof after + ', after == ' + after);
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute -
Typeof (
typeof
) Operator -
The
typeof
operator returns a string value representing the primitive type of its operand.typeof operator results Input Type Output undefined 'undefined' null 'object' primitive boolean 'boolean' primitive number 'number' primitive string 'string' any native object 'object' any native function 'function host object implementation-dependent Example typeof Operator msg('typeof undefined == ' + typeof undefined); msg('typeof null == ' + typeof null); msg('typeof true == ' + typeof true); msg('typeof 1 == ' + typeof 1); msg('typeof \'s\' == ' + typeof 's'); msg('typeof new Boolean == ' + typeof new Boolean); msg('typeof new Number == ' + typeof new Number); msg('typeof new String == ' + typeof new String); msg('typeof new Object == ' + typeof new Object); msg('typeof function f(){} == ' + typeof function f(){});
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute -
Void (
void
) Operator -
The
void
operator evaluates an expression but discards any return value and returnsundefined
.Example void Operator msg('void (1+2) == ' + void (1+2));
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute -
Delete property (
delete
) Operator -
The
delete
operator removes a property from an Object and returnstrue
if the variable does not exist after being removed. Note thatdelete
has no effect on JavaScript object properties which are defined to be {DontDelete}.Example Delete Operator // attempt to delete a declared variable // which should fail without an error var value = 'a value'; var before = value; var result = delete value; var after = value; msg('before: value == ' + before + ' result: ' + result + ' after: value == ' + after); // attempt to delete an undeclared variable // which should succeed undeclared = 'a value'; var before = undeclared; var result = delete undeclared; var after = typeof(undeclared); msg('before: undeclared == ' + before + ' result: ' + result + ' after: undeclared == ' + after); // attempt to delete a property from a user defined object var object = {property: 'value'} var before = object.property; var result = delete object.property; var after = object.property; msg('before: object.property == ' + before + ' result: ' + result + ' after: object.property == ' + after); // attempt to delete a property that does not exist before = object.foo; result = delete object.foo; after = object.foo; msg('before: object.foo == ' + before + ' result: ' + result + ' after: object.foo == ' + after); // attempt to delete a {DontDelete} property before = Math.PI; result = delete Math.PI; after = Math.PI; msg('before: Math.PI == ' + before + ' result: ' + result + ' after: Math.PI == ' + after);
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute -
Multiplication (
*
) Operator -
Multiplication
*
operator converts its operands to number values, then returns the product of the two values as the result. If the conversion results inNaN
, the result isNaN
.Example Multiplication_Operator msg('2 * 2 == ' + (2*2)); msg('"2" * "2" == ' + ("2" * "2")); msg('"a" * "b" == ' + ("a" * "b"));
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute -
Division (
/
) Operator -
Division
/
operator converts its operands to number values, then returns the quotient of the two values as a result. If the divisor is0
,Infinity
is returned. If the conversion results inNaN
, the result inNaN
.Example Division_Operator msg('1 / 2 == ' + (1 / 2)); msg('1 / 0 == ' + (1 / 0)); msg('"1" / "2" == ' + ("1" / "2")); msg('"a" / "b" == ' + ("a" / "b"));
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute -
Modulus (
%
) Operator -
The Modulus
%
operator converts it operands to number values, then returns the remainder of a division of its left operand by its right. UnlikeC
,%
can operate on non-integers.- If the conversion of either operand results in
NaN
, the result inNaN
. - If the left operand is
Infinity
, or the right operand is0
, the result isNaN
. - If the left operand is
0
and the right operand is notInfinite
, the result is0
. - otherwise the sign of the result equals the sign of the left operand and the result is
left*right*q
for the largest integerq
which has the same sign ofleft/right
such thatq <= left/right
.
Example Modulus Operator msg('"a" % 2 == ' + "a" % 2); msg('2 % "a" == ' + 2 % "a"); msg('Infinity % 2 == ' + Infinity % 2); msg('0 % Infinity == ' + 0 % Infinity); msg('1 % Infinity == ' + 1 % Infinity); msg('3 % 0 == ' + 3 % 0); msg('3 % 2 == ' + 3 % 2); msg('(-3) % 2 == ' + (-3) % 2); msg('3 % (-2) == ' + 3 % (-2)); msg('3.5 % 2.5 == ' + 3.5 % 2.5); msg('Math.PI % 3 == ' + Math.PI % 3);
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute - If the conversion of either operand results in
-
Addition (
+
) Operator -
Depending on the types of its operands,
+
either performs numeric addition or string concatenation. If either operand is a string (or convertable to a string), the+
operator performs string concatenation. If both operands are numbers (or convertable to numbers), the+
operator performs numeric addition.Example Addition Operator // string concatenation msg('"1" + "2" == ' + ("1" + "2")); msg('"1" + 2 == ' + ("1" + 2)); msg('1 + "2" == ' + (1 + "2")); msg('"a" + "2" == ' + ("a" + "2")); msg('"a" + 2 == ' + ("a" + 2)); msg('1 + "a" == ' + (1 + "a")); // numeric addition // note how the grouping operator () forces the intermediate result // of (1 + 2) to be calculated as a numeric addition msg('1 + 2 == ' + (1 + 2)); // without the grouping operator string concatenation would have // been performed msg('1 + 2 == ' + 1 + 2);
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute -
Subtraction (
-
) Operator -
The subtraction
-
operator converts its operands to number values, then returns the result of subtracting the right operand from the left.// subtract a number from a number msg('2 - 1 == ' + (2 - 1)); // note how the grouping operator forces the intermediate result // of ("2" - "1") to be calculated as numeric subtraction. msg('"2" - "1" == ' + ("2" - "1")); // without the grouping operator, the expression attempts // to subtract a string value from a string, resulting in NaN msg('"2" - "1" == ' + "2" - "1");
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute - Bit Operators
- .
-
<" >Left Shift (
<<
) Operator -
Left Shift
<<
converts its operands to 32 bit integer values, then shifts the bits in the left operand to the left by the number of bits specified in the right operand and filling the new positions with0
.Example Left Shift Operator msg('(1 << 1) == ' + (1 << 1)); msg('(-1 << 1) == ' + (-1 << 1)); msg('(2.6 << 2) == ' + (2.6 << 2)); msg('(Math.PI << 3) == ' + (Math.PI << 3)); msg('(NaN << 1) == ' + (NaN << 1)); msg('(Infinity << 1) == ' + (Infinity << 1)); msg('("a" << 1) == ' + ("a" << 1));
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute -
>" >Signed Right Shift (
>>
) Operator -
Signed Right Shift
>>
converts its operands to 32 bit integer values, then shifts the bits in the left operand to the right by the number of bits specified in the right operand and filling the new positions with the bit in the left most position.Example Signed Right Shift Operator msg('(1 >> 1) == ' + (1 >> 1)); msg('(-1 >> 1) == ' + (-1 >> 1)); msg('(2.6 >> 2) == ' + (2.6 >> 2)); msg('(Math.PI >> 3) == ' + (Math.PI >> 3)); msg('(NaN >> 1) == ' + (NaN >> 1)); msg('(Infinity >> 1) == ' + (Infinity >> 1)); msg('("a" >> 1) == ' + ("a" >> 1));
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute -
>>" >Unsigned Right Shift (
>>>
) Operator -
UnSigned Right Shift
>>>
converts its operands to 32 bit integer values, then shifts the bits in the left operand to the right by the number of bits specified in the right operand and filling the new positions with0
.Example Unsigned Right Shift Operator msg('(1 >>> 1) == ' + (1 >>> 1)); msg('(-1 >>> 1) == ' + (-1 >>> 1)); msg('(2.6 >>> 2) == ' + (2.6 >>> 2)); msg('(Math.PI >>> 3) == ' + (Math.PI >>> 3)); msg('(NaN >>> 1) == ' + (NaN >>> 1)); msg('(Infinity >>> 1) == ' + (Infinity >>> 1)); msg('("a" >>> 1) == ' + ("a" >>> 1));
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute - Relational and Logical Operators
- .
-
<" >Less than (
<
) Operator -
Performs either a numeric or string comparison returning
true
if the left operand is less than the right operand andfalse
otherwise. If at least one of the operands is a string, then a string comparison is performed, otherwise a numeric comparison is performed. If during the numeric comparison, one of the operands evaluates toNaN
, thenundefined
is returned which is equivalent tofalse
.Example Less Than Operator msg('1 < 2 == ' + (1 < 2)); msg('NaN < 1 == ' + (NaN < 1)); msg('1 < Infinity == ' + (1 < Infinity)); msg('"10" < 2 == ' + ("1" < 2)); msg('1 < "a" == ' + (1 < "a")); msg('"a" < "b" == ' + ("a" < "b"));It appears that step 3 in ECMAScript 11.8.5 The Abstract Relational Comparison Algorithm is incorrect, since both Mozilla and MSIE appear to use or instead of and when deciding to perform string comparison.
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute -
" >Greater than (
>
) Operator -
Performs either a numeric or string comparison returning
true
if the left operand is greater than the right operand andfalse
otherwise. If at least one of the operands is a string, then a string comparison is performed, otherwise a numeric comparison is performed. -
<=" >Less than or equal (
<=
) Operator -
Performs either a numeric or string comparison returning
true
if the left operand is less than or equal to the right operand andfalse
otherwise. If at least one of the operands is a string, then a string comparison is performed, otherwise a numeric comparison is performed. -
=" >Greater than or equal (
>=
) Operator -
Performs either a numeric or string comparison returning
true
if the left operand is greater than or equal to the right operand andfalse
otherwise. If at least one of the operands is a string, then a string comparison is performed, otherwise a numeric comparison is performed. -
Instanceof (
instanceof
) Operator -
Tests if the left operand is an object instance which has the right operand as an
ancestor
object. In other words, tests if the left operand is an object instance which has the prototype of the right operand in its prototype chain.Example instanceof Operator // all JavaScript Native Objects are instances of Object var date = new Date(); msg('date instanceof Object == ' + (date instanceof Object)); // throw a TypeError if the right operand is not an object try { msg('date instanceof "foo" == ' + (date instanceof "foo")); msg('Test failed. Should have thrown TypeError'); } catch(e) { msg('Right operand of instanceof must be an object ' + e.name + ': ' + e.message); }
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5executeinstanceof
is not supported in Mozilla JavaScript1.1, JavaScript1.2 but is supported in Mozilla JavaScript1.3 and later. -
In (
in
) Operator -
Tests if the left operand (after conversion to a primitive string value) is the name of a property in the object named in the right operand. The property can be a shared property which exists only in the right operands prototype chain. Throws a TypeError if the right operand is not an object.
Example
in
Operator // test local properties var object = { propname: "value" }; // test using primitive string name msg('"propname" in object == ' + ("propname" in object)); // test using String object msg('(new String("propname")) in object == ' + ((new String("propname")) in object)); // test TypeError try { msg('"propname" in "foo" == ' + ("propname" in "foo")); msg('Test Failed.'); } catch(e) { msg('Test Passed. Right operand of in must be an object. ' + e.name + ': ' + e.message); }
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute -
Equals (
==
) Operator -
Returns
true
if its two operands areequal
as defined below.The following discussion usesx == y
as the example equality test expression.x != y
is equivalent to!(x == y)
x == y
is equivalent toy == x
(neglecting side effects of evaluation)"" + x == "" + y
forces string comparisonx - 0 == y - 0
forces numeric comparison!x == !y
forces boolean comparison
-
undefined == undefined
-
return
true
msg('undefined == undefined ' + (undefined == undefined));
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute -
null == null
-
return
true
msg('null == null ' + (null == null));
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute -
null == undefined
orundefined == null
-
return
true
msg('null == undefined ' + (null == undefined)); msg('undefined == null ' + (undefined == null));
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute -
typeof x
,typeof y
are both"string"
-
return
true
if x and y consist of the exact same sequence of characters otherwise returnfalse
.msg('"abc" == "abc" ' + ("abc" == "abc")); msg('"abc" == "abcd" ' + ("abc" == "abcd")); msg('"abc == "ABC" ' + ("abc" == "ABC"));
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute -
typeof x
,typeof y
both are "number" -
- if x or y is
NaN
, returnfalse
- if x is
+0
and y is-0
(or vice-versa), returntrue
- if x and y is the same number, then return
true
otherwise returnfalse
NaN
, use the functionisNaN(n)
.msg('NaN == NaN ' + (NaN == NaN)); msg('NaN == 1 ' + (NaN == 1)); msg('1 == NaN ' + (1 == NaN)); msg('isNaN(NaN) ' + isNaN(NaN)); msg('+0 == -0 ' + (+0 == -0)); msg('-0 == +0 ' + (-0 == +0)); msg('12e5 == 12e5 ' + (12e5 == 12e5)); msg('1 == 2 ' + (1 == 2));
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute - if x or y is
-
typeof x
,typeof y
are both"boolean"
-
return
true
if x and y are either bothtrue
or bothfalse
otherwise returnfalse
.msg('true == true ' + (true == true)); msg('false == false ' + (false == false)); msg('true == false ' + (true == false)); msg('false == true ' + (false == true));
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute -
typeof x
,typeof y
are both"object"
-
return
true
if x and y refer to the same object. Note that different objects with the same value do not compare as equal thus==
is not a transitive operator and==
does not form an equivalence relation.var o1 = new Object(); var o2 = o1; var o3 = new Object(); msg('o1 == o2 ' + (o1 == o2)); msg('o1 == o3 ' + (o1 == o3)); var s1 = "abc"; var s2 = new String("abc"); var s3 = new String("abc"); msg('s1 == s2 ' + (s1 == s2)); msg('s1 == s3 ' + (s1 == s3)); msg('s2 == s3 ' + (s2 == s3));
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute -
vice-versa"
typeof x
is"number"
andtypeof y
is"string"
or vice-versa -
convert the
"string"
value to a primitive number value and return the result of comparing the two numbers.msg('"1" == 1 ' + ("1" == 1)); msg('2 == "2" ' + (2 == "2"));
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute -
typeof x
is"boolean"
andtypeof y
is not"boolean"
or vice versa -
convert the
"boolean"
value to a primitive number value and compare the result.msg('true == 1 ' + (true == 1)); msg('false == 0 ' + (false == 0)); msg('true == NaN ' + (true == NaN)); msg('false == NaN ' + (false == NaN)); msg('true == 10 ' + (true == 10)); msg('false == 10 ' + (false == 10)); msg('true == "1" ' + (true == "1")); msg('false == "0" ' + (false == "0")); msg('true == "10" ' + (true == "10")); msg('false == "10" ' + (false == "10")); msg('true == null ' + (true == null)); msg('false == null ' + (false == null)); msg('true == undefined ' + (true == undefined)); msg('false == undefined ' + (false == undefined)); msg('true == new Object() ' + (true == new Object())); msg('false == new Object() ' + (false == new Object()));
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute -
typeof x
is either"string"
or"number"
andtypeof y
is"object"
or vice-versa -
convert the
"object"
value to a primitive value and compare the result.var s1 = "abc"; var s2 = new String("abc"); var n1 = 123; var n2 = new Number(123); msg('s1 == n2 ' + (s1 == n2)); msg('n1 == s2 ' + (n1 == s2));
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute
Mozilla JavaScript 1.2 only behaves as if strict equality === specifiedvar result = (1 == "1"); msg ('Test ' + (result?'Passed':'Failed') + ': (1 == "1") == ' + result);
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute -
Does not equal (
!=
) Operator -
return
false
ifleft == right
istrue
otherwise returntrue
Mozilla JavaScript 1.2 only behaves as if strict in-equality !== specifiedvar result = (null != undefined); msg ('Test ' + (result?'Failed':'Passed') + ': (null != undefined) == ' + result);
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute -
Strict Equals (
===
) Operator -
Performs a strict equality comparison on it operands as defined below.
The following discussion uses
x === y
as the example equality test expression.-
if
typeof x
differs fromtypeof y
-
return
false
-
undefined === undefined
-
return
true
msg('undefined === undefined ' + (undefined === undefined));
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute -
null === null
-
return
true
msg('null === null ' + (null === null));
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute -
typeof x
,typeof y
are "number" -
- if x or y is
NaN
, returnfalse
- if x is
+0
and y is-0
(or vice-versa), returntrue
- if x and y is the same number, then return
true
otherwise returnfalse
msg('NaN === NaN ' + (NaN === NaN)); msg('NaN === 1 ' + (NaN === 1)); msg('1 === NaN ' + (1 === NaN)); msg('isNaN(NaN) ' + isNaN(NaN)); msg('+0 === -0 ' + (+0 === -0)); msg('-0 === +0 ' + (-0 === +0)); msg('12e5 === 12e5 ' + (12e5 === 12e5)); msg('1 === 2 ' + (1 === 2));
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute - if x or y is
-
typeof x
,typeof y
are both"boolean"
-
return
true
if x and y are either bothtrue
or bothfalse
otherwise returnfalse
.msg('true === true ' + (true === true)); msg('false === false ' + (false === false)); msg('true === false ' + (true === false)); msg('false === true ' + (false === true));
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute
-
if
-
Strict Does not equal (
!==
) Operator -
return
false
ifleft === right
istrue
otherwise returntrue
. -
Binary And (
&
) Operator -
Binary And
&
converts its operands to 32 bit integers, then performs a bitwise And&
on the corresponding bits where1 & 1
is1
and0
otherwise.Example Binary And msg('1 & 3 == ' + (1 & 3)); msg('1 & 2 == ' + (1 & 2)); msg('0x0f & 0xf0 == ' + (0x0f & 0xf0)); msg('NaN & 1 == ' + (NaN & 1)); msg('Math.PI & Math.PI == ' + (Math.PI & Math.PI));
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute -
Binary XOR (
^
) Operator -
Binary XOR
^
converts its operands to 32 bit integers, then performs a bitwise XOR^
on the corresponding bits where1 ^ 1
and0 ^ 0
is0
and1
otherwise.Example Binary XOR msg('1 ^ 3 == ' + (1 ^ 3)); msg('1 ^ 2 == ' + (1 ^ 2)); msg('0x0f ^ 0xf0 == ' + (0x0f ^ 0xf0)); msg('NaN ^ 1 == ' + (NaN ^ 1)); msg('Math.PI ^ Math.PI == ' + (Math.PI ^ Math.PI));
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute -
Binary Or (
|
) Operator -
Binary Or
|
converts its operands to 32 bit integers, then performs a bitwise Or|
on the corresponding bits where0 ^ 0
is0
and1
otherwise.Example Binary Or msg('1 | 3 == ' + (1 | 3)); msg('1 | 2 == ' + (1 | 2)); msg('0x0f | 0xf0 == ' + (0x0f | 0xf0)); msg('NaN | 1 == ' + (NaN | 1)); msg('Math.PI | Math.PI == ' + (Math.PI | Math.PI));
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute -
Logical And (
&&
) Operator -
returns
true
if both operands evaluate totrue
. Note that if the left operand evaluates tofalse
, the right operand is not evaluated (short-circuit evaluation).msg('true && true ' + (true && true)); msg('true && false ' + (true && false)); msg('false && true ' + (false && true)); // test short-circuit evaluation var v = 'before'; msg('v == ' + v); msg('false && ((v = "after") == "after") ' + (false && ((v = "after") == "after"))); msg('v == ' + v);
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute -
Logical Or (
||
) Operator -
returns
true
if either operand evaluate totrue
. Note that if the left operand evaluates totrue
, the right operand is not evaluated (short-circuit evaluation).msg('true || true ' + (true || true)); msg('true || false ' + (true || false)); msg('false || true ' + (false || true)); // test short-circuit evaluation var v = 'before'; msg('v == ' + v); msg('true || ((v = "after") == "after") ' + (true || ((v = "after") == "after"))); msg('v == ' + v);
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute -
Conditional (
?:
) Operator -
The conditional operator takes three arguments:condition ? value1 : value2
and returns the value of the expressionvalue1
ifcondition
evaluates totrue
, otherwise it returns the value of the expressionvalue2
. The precedence of?:
is lower than all other operators except the assignment, compound assignment and the comma operators it is therefore important to properly use the grouping operators (()
) to ensure the total expression is evaluated as intended.// the conditional operator msg(' ( (0 % 2) ? true : false) ' + ( (0 % 2) ? true : false)); msg(' ( (1 % 2) ? true : false) ' + ( (1 % 2) ? true : false)); // the equivalent results using if..else var value; if (0 % 2) { value = true; } else { value = false; } msg('0 % 2 is ' + value); if (1 % 2) { value = true; } else { value = false; } msg('1 % 2 is ' + value);
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute - Assignment Operators
- .
-
Simple Assignment (
=
) Operator -
The assignment operator
=
sets the value of its left operand to the value of its right operand. If the left operand has not already been declared or created, it is created at the time of the assigment. Variable created via an assignment without avar
declaration do not have {DontDelete} and can be deleted via operatordelete
.If the assignment operator is used in a conditional, e.g.if (a = b)
, Mozilla JavaScript 1.1 - JavaScript 1.2 will treat the=
as if it were==
.var a = 0; var b = 0; var result = false; if (a = b) { result = true; } msg('(a = b) when a == 0, b ==0 is ' + result); a = 0; b = 1; result = false; if (a = b) { result = true; } msg('(a = b) when a == 0, b == 1 is ' + result); msg('afterwards a == ' + a + ', b == ' + b);
javascript default1.11.21.31.41.5 executejavascript default1.11.21.31.41.5 execute -
Compound Assignment (
op=
) Operators -
The compound assignment
left op= right
is the equivalent for the expressionleft = left op right
where op is one of*
,/
,%
,-
,<<
,>>
,>>>
,&
,^
or|
. -
Comma (
,
) Operator -
The comma operator
,
is used to evaluate a sequence of expressions, returning the value of the last expression as the value of the entire comma expression. For example, if the expression isexpr1, expr2, expr3
,expr1
is evaluated,expr2
is evaluated thenexpr3
is evaluated and the value ofexpr3
is returned.var value = 0; msg('The value of (value += 1, value += 2, value += 3) is ' + (value += 1, value += 2, value += 3));
javascript default1.11.21.31.41.5 executejavascript default1.11.21.31.41.5 execute
- Block Statement
-
var
Statement -
const
Statement - Empty Statement
- Expression Statement
- Conditional Statements
-
if
Statement -
switch
Statement
-
- Iteration Statements
-
while
Statement -
do-while
Statement -
for
Statement -
for-in
Statement
-
- Labelled Statements
-
continue
Statement -
break
Statement
-
- Exception Statements
-
try
,catch
andfinally
Statements -
throw
Statement
-
- Block Statement
-
A Block statement is a set of one or more other statements which are surrounded by braces
{}
in order to be treated as a group of statements. Block statements can be used anywhere a single statement can be used.{ statement1 statement2 … }
Block statements are typically used as the bodies offor
,while
, orif
statements. Note that unlike C or Java, there is no block scope in JavaScript. Variables declared inside of block statements do not hide variables declared outside of the block nor do variables declared inside of block statements cease to exist when the block statement is exited.// declare and initialize a variable outside of the // block statement. var variable = 'outside'; if (true) { // declare the same variable inside of the block // statement. This does not hide the outside variable // which remains unchanged from the outside value. var variable; msg('variable inside block == ' + variable); }
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5execute - var Statement
-
A
var
statement creates variables in the current execution scope. If thevar
statement occurs inside of a function, the declared variables are created in function scope with property attribute {DontDelete}, otherwise they are created in global scope with property attribute attribute {DontDelete}. Variables created via theeval
function are created with empty property attributes. Seedelete
Operator for implementation differences in thedelete
operator. Note that thewith
statement does not affect the scope when creating variables. Thevar
statement is written as a comma-separated list of variable names and optional initializers which is terminated by a semi-colon (;
).// simple variable declaration of name1, // initialized to undefined var name1; // simple variable declaration of name2, // initialized to 'value2' var name2 = 'value2'; // declaration of the variables name3, name4, name5 // with the value of name4 initialized to 'value4' var name3, name4 = 'value4', name5;
Example Delete Global Scope Variablevar globalVar = 'value'; msg('typeof globalVar == ' + (typeof globalVar)); msg('delete globalVar == ' + (delete globalVar)); msg('typeof globalVar == ' + (typeof globalVar));
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5executeGlobal variables have property attribute {DontDelete} which means that they can not be deleted however any such attempt should not cause an errorMozilla JavaScript1.1 and JavaScript1.2 will throw an error when attempting to delete a global variable.Example Delete Function Scope Variablefunction testFunctionVarDelete() { var functionVar = 'value'; msg('typeof functionVar == ' + (typeof functionVar)); msg('delete functionVar == ' + (delete functionVar)); msg('typeof functionVar == ' + (typeof functionVar)); } testFunctionVarDelete();
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5executeVariables created in function scope have property attribute {DontDelete} which means that they can not be deleted and any such attempt should not cause an error. Note that Mozilla JavaScript1.1 and JavaScript1.2 do not throw an error when an attempt to delete a function scope variable is made.Example Delete Eval Scope Variableeval('var evalVar = "value";'); msg('typeof evalVar == ' + (typeof evalVar)); msg('delete evalVar == ' + (delete evalVar)); msg('typeof evalVar == ' + (typeof evalVar))
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5executeVariables created in viaeval
have empty internal attributes which means that they can be deleted.Note that Mozilla JavaScript1.1, JavaScript1.2 successfully delete eval scope variables however returnsundefined
fordelete
instead of boolean. - const Statement
-
Mozilla OnlyA
const
statement creates variables in the current execution scope with property attribute {ReadOnly} which means it can not be changed. If theconst
variable is created in global or function scope it also has property attribute {DontDelete} which means it can not be deleted.Example Modifiy Consttry { eval('const a = 1;'); msg('const a == ' + a); try { a = 2; msg('a should still be 1, a == ' + a); } catch(e) { msg('Error assigning to const var.' + e.name + ': ' + e.message); } } catch(e) { msg('Error during const declaration.' + e.name + ': ' + e.message); }
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5executeNote that Mozilla JavaScript1.1 and JavaScript1.2 will throw an error if aconst
is the target of an assignment however Mozilla JavaScript1.3 and later will not.Example Delete Global Scope Const Variableconst globalVar = 'value'; msg('typeof globalVar == ' + (typeof globalVar)); msg('delete globalVar == ' + (delete globalVar)); msg('typeof globalVar == ' + (typeof globalVar));
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5executeGlobalconst
variables have property attributes {ReadOnly} and {DontDelete} which means that they can not be changed or deleted however any such attempt should not cause an error however Mozilla JavaScript1.1 and JavaScript1.2 will throw an error.Example Delete Function Scope Const Variablefunction testFunctionConstDelete() { const functionVar = 'value'; msg('typeof functionVar == ' + (typeof functionVar)); msg('delete functionVar == ' + (delete functionVar)); msg('typeof functionVar == ' + (typeof functionVar)); } testFunctionConstDelete();
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5executeConstant Variables created in function scope have property attribute {ReadOnly} and {DontDelete} which means that they can not be changed or deleted and any such attempt should not cause an error. Note that Mozilla JavaScript1.1 and JavaScript1.2 do not throw an error when an attempt to delete a function scope variable is made.Example Delete Eval Scope Const Variableeval('const constVar = "value";'); msg('typeof evalVar == ' + (typeof evalVar)); msg('delete evalVar == ' + (delete evalVar)); msg('typeof evalVar == ' + (typeof evalVar));
javascript default1.11.21.31.41.5executejavascript default1.11.21.31.41.5executeConst variables created viaeval
have property attribute {ReadOnly} which means that they can not be changed but can be deleted. Note that Mozilla JavaScript1.1, JavaScript1.2 successfully delete eval scope variables however returnsundefined
fordelete
instead of boolean.