Functions JavaScript Structure Using Functions (Page 1) • Complete applications in programming consist of a hierarchical collection of functions • Working together they perform the entire programming task • Most complex tasks can be subdivided into procedures in this way (“divide and conquer”) Structure Using Functions (Page 2) • Functions are written by a programmer to define specific tasks within the larger task… ▫ Each task should be clearly identifiable • Statements defining the functions are written once in the application and may be called from more than one location in the program (reusability) • Statements and variables are hidden from other functions in program (information hiding) Advantages of Using Functions • Pre-written built-in functions (part of JavaScript language/library) simplify program development ▫ E.g. Math.random(), toFixed(), the Date object, etc. • Each piece can be written and tested separately • Smaller functions usually are easier to understand • In large professional systems programmers and programmer teams can build and share libraries of functions The Function Call (Page 1) • The function is invoked by a function call ▫ In JavaScript programmer-defined methods are called functions ▫ Transfers control to the location of the function in the program and executes it ▫ The syntax of the call specifies the function’s name ▫ Optionally the call provides the information/input (called the arguments) that the function needs for execution The Function Call (Page 2) • Format: function functionName( [argument1, argument2, … ] ); ▫ The function call will transfer control of the execution of the program to the location of the functionName • Examples: oneStar(); drawStars(3); The Function Definition (Page 1) • A program function is defined by a header (which names the function—also is called its signature) and the body enclosed in {braces} • The header begins with the keyword function followed by an programmer-defined identifier which is the function name • The function name then is followed by a set of (parentheses) inside which may be a comma-delimited parameter identifiers The Function Definition (Page 2) • Simple format: function functionName() { statements …
Page 1
JavaScript: Functions 8
9
10
11 12
13
14
15
16
statements … } • Complex format: function functionName(parameter1, parameter2, …) { statements … } The Function Definition (Page 3) • Examples: function oneStar() { … } function drawStars(stars) { … } Function Control 1. The function “call” transfers control to the named function 2. The body of that function is executed entirely 3. At the conclusion of execution of the function, control returns to point at which the function was called Try It Out • functions1.htm Passing Arguments • In function calls there may be one or more values in parentheses (called arguments) which are passed to the called function (data “sharing”) • Format: functionName(parameter1 [, parameter2, …] ); • Examples: drawStars(2); circle(x, y, radius); The Parameter List (Page 1) • The parameter list is a comma-separated list of variable declarations within the function header ▫ These sometimes are called the “argument list” but for clarity and consistency with other languages, we will use the term parameter list • Variables receive the values passed from the parameters in the function call The Parameter List (Page 2) • Format: function functionName( [parameter1, parameter2, … ] ) ▫ Each parameter in the list is a declared variable that may be used in the body of the function • Examples: function drawStars(stars) { … } function circle(x, y, radius) { … } The Parameter List (Page 3) • Parameters are local variables: ▫ They are a means for communicating information between the function call and the function itself
Page 2
JavaScript: Functions 15
16
17
18
19
20
21
function itself ▫ When the function is called, the argument values are passed and assigned to the parameter variables in the function header The Parameter List (Page 4) • The number of arguments in the function call usually is the same as the number of parameter variables in the called function header • If there are fewer arguments passed than parameter defined in the header: ▫ The additional parameters are considered optional ▫ The additions parameters are assigned the value undefined The Parameter List (Page 5) • If there are more arguments passed than parameters defined in the header: ▫ The additional arguments are assigned to the built-in arguments object ▫ These arguments are accessed like an array, e.g. arguments[index] ▫ The arguments object has a length property which might be used to test if the correct number of arguments were passed, e.g. if (arguments.length == 3) Function Call and Definition Examples • Function calls: drawStars(2); drawStars(ctr); • Function header (signature) and body function drawStars(stars) { for(int ctr; ctr
