CHAPTER 8
Functions
A function is a block of JavaScript code that is defined once but may be executed, or
invoked, any number of times. You may already be familiar with the concept of a func-
tion under a name such as subroutine or procedure. JavaScript functions are parame-
terized: a function definition may include a list of identifiers, known as parameters, that
work as local variables for the body of the function. Function invocations provide val-
ues, or arguments, for the function’s parameters. Functions often use their argument
values to compute a return value that becomes the value of the function-invocation
expression. In addition to the arguments, each invocation has another value—the
invocation context—that is the value of the 
this
keyword.
If a function is assigned to the property of an object, it is known as a method of that
object. When a function is invoked on or through an object, that object is the invocation
context or 
this
value for the function. Functions designed to initialize a newly created
object are called constructors. Constructors were described in §6.1 and will be covered
again in Chapter 9.
In JavaScript, functions are objects, and they can be manipulated by programs. Java-
Script can assign functions to variables and pass them to other functions, for example.
Since functions are objects, you can set properties on them, and even invoke methods
on them.
JavaScript function definitions can be nested within other functions, and they have
access to any variables that are in scope where they are defined. This means that Java-
Script functions are closures, and it enables important and powerful programming
techniques.
163
Pdf edit hyperlink - insert, remove PDF links in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Free C# example code is offered for users to edit PDF document hyperlink (url), like inserting and deleting
add links pdf document; pdf links
Pdf edit hyperlink - VB.NET PDF url edit library: insert, remove PDF links in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Help to Insert a Hyperlink to Specified PDF Document Page
adding links to pdf in preview; add hyperlink to pdf in
8.1  Defining Functions
Functions are defined with the 
function
keyword, which can be used in a function
definition expression (§4.3) or in a function declaration statement (§5.3.2). In either
form,  function  definitions  begin  with  the  keyword 
function
followed  by  these
components:
• An identifier that names the function. The name is a required part of function
declaration statements: it is used as the name of a variable, and the newly defined
function object is assigned to the variable. For function definition expressions, the
name is optional: if present, the name refers to the function object only within the
body of the function itself.
• A pair of parentheses around a comma-separated list of zero or more identifiers.
These identifiers are the parameter names for the function, and they behave like
local variables within the body of the function.
• A pair of curly braces with zero or more JavaScript statements inside. These state-
ments are the body of the function: they are executed whenever the function is
invoked.
Example 8-1 shows some function definitions using both statement and expression
forms. Notice that a function defined as an expression is only useful if it is part of a
larger expression, such as an assignment or invocation, that does something with the
newly defined function.
Example 8-1. Defining JavaScript functions
// Print the name and value of each property of o.  Return undefined.
function printprops(o) {
for(var p in o) 
console.log(p + ": " + o[p] + "\n"); 
}
// Compute the distance between Cartesian points (x1,y1) and (x2,y2).
function distance(x1, y1, x2, y2) {
var dx = x2 - x1;
var dy = y2 - y1;
return Math.sqrt(dx*dx + dy*dy);
}
// A recursive function (one that calls itself) that computes factorials
// Recall that x! is the product of x and all positive integers less than it.
function factorial(x) {
if (x <= 1) return 1;
return x * factorial(x-1);
}
// This function expression defines a function that squares its argument.
// Note that we assign it to a variable
var square = function(x) { return x*x; }
// Function expressions can include names, which is useful for recursion.
164 | Chapter 8: Functions
How to C#: Basic SDK Concept of XDoc.PDF for .NET
XDoc.PDF for .NET allows C# developers to edit hyperlink of PDF document, including editing PDF url links and quick navigation link in bookmark/outline.
check links in pdf; pdf hyperlink
VB.NET PDF: Basic SDK Concept of XDoc.PDF
XDoc.PDF for .NET allows VB.NET developers to edit hyperlink of PDF document, including editing PDF url links and quick navigation link in bookmark/outline.
pdf hyperlinks; add a link to a pdf in preview
var f = function fact(x) { if (x <= 1) return 1; else return x*fact(x-1); };
// Function expressions can also be used as arguments to other functions:
data.sort(function(a,b) { return a-b; });
// Function expressions are sometimes defined and immediately invoked:
var tensquared = (function(x) {return x*x;}(10));
Note that the function name is optional for functions defined as expressions. A function
declaration statement actually declares a variable and assigns a function object to it. A
function definition expression, on the other hand, does not declare a variable. A name
is allowed for functions, like the factorial function above, that need to refer to them-
selves. If a function definition expression includes a name, the local function scope for
that function will include a binding of that name to the function object. In effect, the
function name becomes a local variable within the function. Most functions defined as
expressions do not need names, which makes their definition more compact. Function
definition expressions are particularly well suited for functions that are used only once,
as in the last two examples above.
Function Names
Any legal JavaScript identifier can be a function name. Try to choose function names
that are descriptive but concise. Striking the right balance is an art that comes with
experience. Well-chosen function names can make a big difference in the readability
(and thus maintainability) of your code.
Function names are often verbs or phrases that begin with verbs. It is a common con-
vention to begin function names with a lowercase letter. When a name includes multiple
words, one convention is to separate words with underscores 
like_this()
; another
convention is to begin all words after the first with an uppercase letter 
likeThis()
.
Functions that are supposed to be internal or hidden (and not part of a public API) are
sometimes given names that begin with an underscore.
In some styles of programming, or within well-defined programming frameworks, it
can be useful to give frequently used functions very short names. The client-side Java-
Script framework jQuery (covered in Chapter 19), for example, makes heavy use in its
public API of a function named 
$()
(yes, just the dollar sign). (Recall from §2.4 that
dollar signs and underscores are the two characters besides letters and numbers that
are legal in JavaScript identifiers.)
As described in §5.3.2, function declaration statements are “hoisted” to the top of the
enclosing script or the enclosing function, so that functions declared in this way may
be invoked from code that appears before they are defined. This is not true for functions
defined as expressions, however: in order to invoke a function, you must be able to
refer to it, and you can’t refer to a function defined as an expression until it is assigned
to a variable. Variable declarations are hoisted (see §3.10.1, but assignments to those
variables are not hoisted, so functions defined with expressions cannot be invoked
before they are defined.
8.1  Defining Functions | 165
Core JavaScript
VB.NET PDF Library SDK to view, edit, convert, process PDF file
processing images contained in PDF file. Please click to see details. PDF Hyperlink Edit. RasterEdge PDF SDK for .NET package offers
pdf link to email; clickable links in pdf from word
C# PDF Library SDK to view, edit, convert, process PDF file for C#
processing images contained in PDF file. Please click to see details. C#.NET: Edit PDF Hyperlink. RasterEdge PDF SDK for .NET package
pdf link open in new window; add email link to pdf
Notice that most, but not all, of the functions in Example 8-1 contain a 
return
statement
(§5.6.4). The 
return
statement causes the function to stop executing and to return the
value of its expression (if any) to the caller. If the 
return
statement does not have an
associated expression, it returns the 
undefined
value. If a function does not contain a
return
statement, it simply executes each statement in the function body and returns
the 
undefined
value to the caller.
Most of the functions in Example 8-1 are designed to compute a value, and they use
return
to return that value to their caller. The 
printprops()
function is different: its job
is to output the names and values of an object’s properties. No return value is necessary,
and the function does not include a 
return
statement. The value of an invocation of
the 
printprops()
function is always 
undefined
. (Functions with no return value are
sometimes called procedures.)
8.1.1  Nested Functions
In JavaScript, functions may be nested within other functions. For example:
function hypotenuse(a, b) {
function square(x) { return x*x; }
return Math.sqrt(square(a) + square(b));
}
The interesting thing about nested functions is their variable scoping rules: they can
access the parameters and variables of the function (or functions) they are nested with-
in. In the code above, for example, the inner function 
square()
can read and write the
parameters 
a
and 
b
defined by the outer function 
hypotenuse()
. These scope rules for
nested functions are very important, and we’ll consider them again in §8.6.
As noted in §5.3.2, function declaration statements are not true statements, and the
ECMAScript specification only allows them as top-level statements. They can appear
in global code, or within other functions, but they cannot appear inside of loops, con-
ditionals, or 
try/catch/finally
or 
with
statements.
1
Note that this restriction applies
only to functions declared as statements. Function definition expressions may appear
anywhere in your JavaScript code.
8.2  Invoking Functions
The JavaScript code that makes up the body of a function is not executed when the
function is defined but when it is invoked. JavaScript functions can be invoked in four
ways:
• as functions,
• as methods,
1. Some JavaScript implementations relax this rule. Firefox, for example, allows “conditional function
declarations” that appear within 
if
statements.
166 | Chapter 8: Functions
VB.NET Create PDF from Excel Library to convert xlsx, xls to PDF
C#.NET edit PDF digital signatures, C#.NET edit PDF sticky note Merge all Excel sheets to one PDF file in VB Change Excel hyperlink to PDF hyperlink and bookmark.
add hyperlink to pdf; convert doc to pdf with hyperlinks
C# Create PDF from Word Library to convert docx, doc to PDF in C#.
Able to get word count in PDF pages. Change Word hyperlink to PDF hyperlink and bookmark. Free online Word to PDF converter without email.
adding a link to a pdf in preview; accessible links in pdf
• as constructors, and
• indirectly through their 
call()
and 
apply()
methods.
8.2.1  Function Invocation
Functions are invoked as functions or as methods with an invocation expression
(§4.5). An invocation expression consists of a function expression that evaluates to a
function object followed by an open parenthesis, a comma-separated list of zero or
more argument expressions, and a close parenthesis. If the function expression is a
property-access expression—if the function is the property of an object or an element
of an array—then it is a method invocation expression. That case will be explained
below.  The  following  code  includes  a  number  of  regular  function  invocation
expressions:
printprops({x:1});                                 
var total = distance(0,0,2,1) + distance(2,1,3,5); 
var probability = factorial(5)/factorial(13);
In an invocation, each argument expression (the ones between the parentheses) is eval-
uated, and the resulting values become the arguments to the function. These values are
assigned to the parameters named in the function definition. In the body of the function,
a reference to a parameter evaluates to the corresponding argument value.
For regular function invocation, the return value of the function becomes the value of
the invocation expression. If the function returns because the interpreter reaches the
end, the return value is 
undefined
. If the function returns because the interpreter exe-
cutes a 
return
, the return value is the value of the expression that follows the 
return
or
undefined
if the 
return
statement has no value.
For function invocation in ECMAScript 3 and nonstrict ECMAScript 5, the invocation
context (the 
this
value) is the global object. In strict mode, however, the invocation
context is 
undefined
.
Functions written to be invoked as functions do not typically use the 
this
keyword at
all. It can be used, however, to determine whether strict mode is in effect:
// Define and invoke a function to determine if we're in strict mode.
var strict = (function() { return !this; }());
8.2.2  Method Invocation
A method is nothing more than a JavaScript function that is stored in a property of an
object. If you have a function 
f
and an object 
o
, you can define a method named 
m
of
o
with the following line:
o.m = f;
Having defined the method 
m()
of the object 
o
, invoke it like this:
o.m();
8.2  Invoking Functions | 167
Core JavaScript
Download from Wow! eBook <www.wowebook.com>
VB.NET Create PDF from Word Library to convert docx, doc to PDF in
Set File Permissions. Password: Open Document. Edit Digital Signatures. Ability to get word count of PDF pages. Change Word hyperlink to PDF hyperlink and bookmark
add links to pdf in preview; add links in pdf
.NET PDF SDK - Description of All PDF Processing Control Feastures
signature; Add signature image to PDF file. PDF Hyperlink Edit. Support outline; More about PDF Hyperlink Edit ▶. PDF Metadata Edit. Support
add links to pdf online; add links to pdf file
Or, if 
m()
expects two arguments, you might invoke it like this:
o.m(x, y);
The code above is an invocation expression: it includes a function expression 
o.m
and
two argument expressions, 
x
and 
y
. The function expression is itself a property access
expression (§4.4), and this means that the function is invoked as a method rather than
as a regular function.
The arguments and return value of a method invocation are handled exactly as descri-
bed above for regular function invocation. Method invocations differ from function
invocations in one important way, however: the invocation context. Property access
expressions consist of two parts: an object (in this case 
o
) and a property name (
m
). In
a method invocation expression like this, the object 
o
becomes the invocation context,
and the function body can refer to that object by using the keyword 
this
. Here is a
concrete example:
var calculator = {  // An object literal
operand1: 1,
operand2: 1,
add: function() {
// Note the use of the this keyword to refer to this object.
this.result = this.operand1 + this.operand2;
}
};
calculator.add();       // A method invocation to compute 1+1.
calculator.result       // => 2
Most method invocations use the dot notation for property access, but property access
expressions that use square brackets also cause method invocation. The following are
both method invocations, for example:
o["m"](x,y);   // Another way to write o.m(x,y).
a[0](z)        // Also a method invocation (assuming a[0] is a function).
Method invocations may also involve more complex property access expressions:
customer.surname.toUpperCase(); // Invoke method on customer.surname
f().m();                        // Invoke method m() on return value of f()
Methods and the 
this
keyword are central to the object-oriented programming para-
digm. Any function that is used as a method is effectively passed an implicit argument—
the object through which it is invoked. Typically, a method performs some sort of
operation on that object, and the method-invocation syntax is an elegant way to express
the fact that a function is operating on an object. Compare the following two lines:
rect.setSize(width, height);
setRectSize(rect, width, height);
The hypothetical functions invoked in these two lines of code may perform exactly the
same operation on the (hypothetical) object 
rect
, but the method-invocation syntax in
the first line more clearly indicates the idea that it is the object 
rect
that is the primary
focus of the operation.
168 | Chapter 8: Functions
Method Chaining
When methods return objects, you can use the return value of one method invocation
as part of a subsequent invocation. This results in a series (or “chain” or “cascade”) of
method invocations as a single expression. When working with the jQuery library
(Chapter 19), for example, it is common to write code like this:
// Find all headers, map to their ids, convert to an array and sort them
$(":header").map(function() { return this.id }).get().sort();
When you write a method that does not have a return value of its own, consider having
the method return 
this
. If you do this consistently throughout your API, you will enable
a style of programming known as method chaining
2
in which an object can be named
once and then multiple methods can be invoked on it:
shape.setX(100).setY(100).setSize(50).setOutline("red").setFill("blue").draw();
Don’t confuse method chaining with constructor chaining, which is described in
§9.7.2.
Note that 
this
is a keyword, not a variable or property name. JavaScript syntax does
not allow you to assign a value to 
this
.
Unlike variables, the 
this
keyword does not have a scope, and nested functions do not
inherit the 
this
value of their caller. If a nested function is invoked as a method, its
this
value is the object it was invoked on. If a nested function is invoked as a function
then its 
this
value will be either the global object (non-strict mode) or 
undefined
(strict
mode). It is a common mistake to assume that a nested function invoked as a function
can use 
this
to obtain the invocation context of the outer function. If you want to access
the 
this
value of the outer function, you need to store that value into a variable that is
in scope for the inner function. It is common to use the variable 
self
for this purpose.
For example:
var o = {                           // An object o.
m: function() {                 // Method m of the object.
var self = this;            // Save the this value in a variable.
console.log(this === o);    // Prints "true": this is the object o.
f();                        // Now call the helper function f().
function f() {              // A nested function f
console.log(this === o); // "false": this is global or undefined
console.log(self === o); // "true": self is the outer this value.
}
}
};
o.m();                              // Invoke the method m on the object o.
Example 8-5, in §8.7.4, includes a more realistic use of the 
var self=this
idiom.
2. The term was coined by Martin Fowler. See http://martinfowler.com/dslwip/MethodChaining.html.
8.2  Invoking Functions | 169
Core JavaScript
8.2.3  Constructor Invocation
If a function or method invocation is preceded by the keyword 
new
, then it is a
constructor  invocation.  (Constructor  invocations  were  introduced  in §4.6  and
§6.1.2, and constructors will be covered in more detail in Chapter 9.) Constructor
invocations differ from regular function and method invocations in their handling of
arguments, invocation context, and return value.
If a constructor invocation includes an argument list in parentheses, those argument
expressions are evaluated and passed to the function in the same way they would be
for function and method invocations. But if a constructor has no parameters, then
JavaScript constructor invocation syntax allows the argument list and parentheses to
be omitted entirely. You can always omit a pair of empty parentheses in a constructor
invocation and the following two lines, for example, are equivalent:
var o = new Object();
var o = new Object;
 constructor  invocation  creates  a  new,  empty  object  that  inherits  from  the
prototype
property of the constructor. Constructor functions are intended to initialize
objects and this newly created object is used as the invocation context, so the con-
structor function can refer to it with the 
this
keyword. Note that the new object is used
as the invocation context even if the constructor invocation looks like a method invo-
cation. That is, in the expression 
new o.m()
o
is not used as the invocation context.
Constructor functions do not normally use the 
return
keyword. They typically initialize
the new object and then return implicitly when they reach the end of their body. In this
case, the new object is the value of the constructor invocation expression. If, however,
a constructor explicitly used the 
return
statement to return an object, then that object
becomes the value of the invocation expression. If the constructor uses 
return
with no
value, or if it returns a primitive value, that return value is ignored and the new object
is used as the value of the invocation.
8.2.4  Indirect Invocation
JavaScript functions are objects and like all JavaScript objects, they have methods. Two
of these methods, 
call()
and 
apply()
, invoke the function indirectly. Both methods
allow you to explicitly specify the 
this
value for the invocation, which means you can
invoke any function as a method of any object, even if it is not actually a method of
that object. Both methods also allow you to specify the arguments for the invocation.
The 
call()
method uses its own argument list as arguments to the function and the
apply()
method expects an array of values to be used as arguments. The 
call()
and
apply()
methods are described in detail in §8.7.3.
170 | Chapter 8: Functions
8.3  Function Arguments and Parameters
JavaScript function definitions do not specify an expected type for the function pa-
rameters, and function invocations do not do any type checking on the argument values
you pass. In fact, JavaScript function invocations do not even check the number of
arguments being passed. The subsections that follow describe what happens when a
function is invoked with fewer arguments than declared parameters or with more ar-
guments than declared parameters. They also demonstrate how you can explicitly test
the type of function arguments if you need to ensure that a function is not invoked with
inappropriate arguments.
8.3.1  Optional Parameters
When a function is invoked with fewer arguments than declared parameters, the ad-
ditional parameters are set to the 
undefined
value. It is often useful to write functions
so that some arguments are optional and may be omitted when the function is invoked.
To do this, you must be able to assign a reasonable default value to parameters that are
omitted. Here is an example:
// Append the names of the enumerable properties of object o to the
// array a, and return a.  If a is omitted, create and return a new array.
function getPropertyNames(o, /* optional */ a) {
if (a === undefined) a = [];  // If undefined, use a new array
for(var property in o) a.push(property);
return a;
}
// This function can be invoked with 1 or 2 arguments:
var a = getPropertyNames(o);  // Get o's properties into a new array
getPropertyNames(p,a);        // append p's properties to that array
Instead of using an 
if
statement in the first line of this function, you can use the 
||
operator in this idiomatic way:
a = a || [];
Recall from §4.10.2 that the 
||
operator returns its first argument if that argument is
truthy and otherwise returns its second argument. In this case, if any object is passed
as the second argument, the function will use that object. But if the second argument
is omitted (or 
null
or another falsy value is passed), a newly created empty array will
be used instead.
Note that when designing functions with optional arguments, you should be sure to
put the optional ones at the end of the argument list so that they can be omitted. The
programmer who calls your function cannot omit the first argument and pass the sec-
ond: she would have to explicitly pass 
undefined
the first argument. Also note the use
of the comment 
/* optional */
in the function definition to emphasize the fact that
the parameter is optional.
8.3  Function Arguments and Parameters | 171
Core JavaScript
8.3.2  Variable-Length Argument Lists: The Arguments Object
When a function is invoked with more argument values than there are parameter
names, there is no way to directly refer to the unnamed values. The Arguments object
provides a solution to this problem. Within the body of a function, the identifier
arguments
refers to the Arguments object for that invocation. The Arguments object is
an array-like object (see §7.11) that allows the argument values passed to the function
to be retrieved by number, rather than by name.
Suppose you define a function 
f
that expects to be passed one argument, 
x
. If you invoke
this function with two arguments, the first argument is accessible within the function
by the parameter name 
x
or as 
arguments[0]
. The second argument is accessible only
as 
arguments[1]
. Furthermore, like true arrays, 
arguments
has a 
length
property that
specifies the number of elements it contains. Thus, within the body of the function 
f
,
invoked with two arguments, 
arguments.length
has the value 2.
The Arguments object is useful in a number of ways. The following example shows
how you can use it to verify that a function is invoked with the expected number of
arguments, since JavaScript doesn’t do this for you:
function f(x, y, z)
{
// First, verify that the right number of arguments was passed
if (arguments.length != 3) {
throw new Error("function f called with " + arguments.length +
"arguments, but it expects 3 arguments.");
}
// Now do the actual function...
}
Note that it is often unnecessary to check the number of arguments like this. Java-
Script’s default behavior is fine in most cases: missing arguments are 
undefined
and
extra arguments are simply ignored.
One important use of the Arguments object is to write functions that operate on any
number of arguments. The following function accepts any number of numeric argu-
ments and returns the value of the largest argument it is passed (see also the built-in
function 
Math.max()
, which behaves the same way):
function max(/* ... */) {
var max = Number.NEGATIVE_INFINITY;
// Loop through the arguments, looking for, and remembering, the biggest.
for(var i = 0; i < arguments.length; i++)
if (arguments[i] > max) max = arguments[i];
// Return the biggest
return max; 
}
var largest = max(1, 10, 100, 2, 3, 1000, 4, 5, 10000, 6);  // => 10000
172 | Chapter 8: Functions
Documents you may be interested
Documents you may be interested