Custom Functions

© Copyright 2014, Fred McClurg All Rights Reserved

2

What is a Function?

Description:A function is a named block of code that performs a task or an action. A function is executed when it’s name is invoked or called.

It is useful for reducing code rewrite, making the code more encapsulated (self-contained), easier to maintain and more reusable.

3

Function SyntaxFunction Definition Syntax:function funcName( p1, ... ) { ...; // function body return( returnVal );}

Function Call Syntax:var retVal = funcName( p1, ... );

4

Function ExampleFunction Definition Example:function increment( value ) { value++; return( value );}

Function Call Example:var num = increment( 3 );console.log( num );

5

Internal FunctionsFunction definition and function call in the same file “internalFunct.html”:

<script>// function definitionfunction increment( value ) { value++; return( value );}

// function callvar num = increment( 3 );console.log( num );</script> internalFunct.html

6

External FunctionsFunction Definition in file “externalFunct.js”:

function increment( value ) { value++; return( value );}

Function Call in file “externalFunct.html”:<script src="externalFunct.js"></script>

<script> var num = increment( 3 ); console.log( num );</script> externalFunct.html

externalFunct.js

7

Function Definition: randomInt()/** * Random integer within a range * * @param min Start of range * @param max End of range * @return rndInt Random integer between * min and max inclusive */function randomInt( min, max ) {

var rndInt = Math.floor( ( Math.random() * max ) + min );

// value returned to function call return( rndInt );} randomInt.html

8

Function Call: randomInt()/* * Generate 10 random numbers */for ( var i = 0; i < 10; i++ ) {

// function call var rndNum = randomInt( 1, 10 );

console.log( i + ": " + rndNum );}

randomInt.html

9

Function Definition: fuddify()/** * Converts string to Elmer Fudd speech * * @param origSpeak Original text * @return fuddSpeak Converted text */function fuddify( origSpeak ) { var fuddSpeak = origSpeak; if ( typeof( origSpeak ) != "string" ) fuddSpeak = "Can't Fuddify: " + origSpeak;

fuddSpeak = fuddSpeak.replace( /r/g, 'w' ); fuddSpeak = fuddSpeak.replace( /R/g, 'W' ); return( fuddSpeak );} fuddify.html

10

Function Call: fuddify()var quote = "Shhh.\n" + "Be very very quiet.\n" + "I'm hunting rabbits.";

// function callvar fuddTalk = fuddify( quote );

alert( fuddTalk );fuddify.html

11

Function Definition: isEven ()/** * Determine if number is even * * @param num Passed parameter * @return retVal True if parameter is even */function isEven( num ) { var retVal;

if ( ( num % 2 ) == 0 ) // evenly divisible by 2 retVal = true; else retVal = false; return( retVal ); // ta senda}

evenOdd.html

12

Function Definition: isOdd ()/** * Determine if number is odd * * @param num Passed parameter * @return True if param odd */function isOdd( num ) { // call function and negate return( ! isEven( num ) );}

evenOdd.html

13

Function Call: isEven() & isOdd()

var str;

for ( var i = 0; i < 10; i++ ) { str = "isEven(" + i + "): " + isEven(i) + " " + "isOdd(" + i + "): " + isOdd(i);

console.log( str );}

evenOdd.html

14

Default Parameters via DefinitionA function can default to a certain value if the passed arguments are missing.

/** * Calculate the area of rectangle * * @param height Rectangle height * @param width Rectangle width (optional) * @return area Rectangle area */function areaRectangle( height, width ) { var area;

// check if parameter is specified if ( typeof( width ) != 'undefined' ) area = height * width; else area = height * height; return( area );}

defParam.html

15

Default Arguments via CallThe function can be called with two or one argument:

var height = 5;var width = 10;var areaRt, areaSq;

// pass two argumentsareaRt = areaRectangle( height, width );console.log( areaRt );

// pass one argumentareaSq = areaRectangle( width );console.log( areaSq ); defParam.html

16

Variable Length Parameter Definition A function can be made to handle any number of arguments.

/** * Sum the passed arguments * * @param arguments Any number of arguments * @return total Summation of arguments */function add() { var total = 0;

for ( var i = 0; i < arguments.length; i++ ) { var num = arguments[i]; if ( typeof( arguments[i] ) == 'number' ) total += num; } return( total );} varLenArgs.html

17

Variable Length Argument CallA function can be designed to pass any number of arguments.

var sum;

sum = add( 1 ); // pass one argsconsole.log( sum );

sum = add( 1, 2 ); // pass two argsconsole.log( sum );

sum = add( 1, 2, 3 ); // pass three argsconsole.log( sum ); varLenArgs.html