Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

Functions

Functions are compartmentalized segments of code that do not run until they are called to execute by an event, timer or some other mechanism. They also serve as constructors for all JavaScript objects.

Write a basic function and call it to execute

function myFunction(){ alert("Function was called to run"); } // call the function to run myFunction();

Events can make a function run

<script> function myFunction(){ var status = document.getElementById("status"); status.innerHTML = "You just made my function run."; } </script> <input type="button" value="Click Me" onclick="myFunction()"> <h3 id="status"></h3> <script> function myFunction(){ var status = document.getElementById("status"); status.innerHTML = "The document finishing loading made my function run."; } window.addEventListener("load", myFunction); </script> <h3 id="status"></h3>

Adding arguments

Arguments are an aspect of function creation that make them much more dynamic, useful and reusable. You can apply one or more arguments to your functions, if applying multiple arguments be sure to separate each by a comma.

<script> function myFunction(v1,v2,v3){ var status = document.getElementById("status"); status.innerHTML = v2+" has known "+v1+" for "+v3+" years."; } </script> <p><input type="button" value="Click Me" onclick="myFunction('Joe','Ben',7)"></p> <h3 id="status"></h3>

Authors can optionally use the Arguments object to access arguments passed into functions. Data passed to them when they are called to run, does not need to be declared in between the parenthesis of a function.

function myFunction() { return arguments[0]+" | "+arguments[1]+" | "+arguments[2]; } var result = myFunction("dog", "cat", "bird"); alert(result);

Anonymous functions

Anonymous functions are ones that have no name following the 'function' declaration. They are most commonly used as a parameter provided to a method that expects executable code as one of its parameters. In class programming they are used to define custom methods in custom objects we create.

Provided as the second parameter to the addEventListener() method, which expects executable code as second parameter. window.addEventListener("click", function(){ alert("you clicked the window"); }); Provided as the first parameter to the setTimeout() method, which expects executable code as first parameter. setTimeout( function(){ alert("your 3 seconds are up"); }, 3000 ); Provided as the value to a custom method in a custom object. function MyClass(){ this.property1 = 25; this.method1 = function(){ alert("method 1 called to run"); } } var instance = new MyClass(); instance.method1();

Stop a function and optionally return data

The return statement is used to stop a function from processing and optionally return data back to the calling code. The function will stop processing at that point and data can be optionally passed back to the code that called the function to run.

function doIt( a, b ){ return a + b; } var result = doIt( 3, 2 ); alert(result); function doIt( x ){ if( x < 10 ){ alert("argument must be 10 or greater"); return false; } return x / 2; } var result = doIt( 7 );

JavaScript

Fundamentals

IntroductionImplementationFallback ContentDevelopment OutputSyntax GuidelinesVariablesFunctionsStatementsOperatorsEvent HandlingObjects