NOTE

THIS MODULE IS STILL A DRAFT.

In JavaScript functions may be defined as in other languages like C and PhP.

 function square(x) = {return x * x}

However in addition in JavaScript functions are objects. They may be defined as anonymous functions.

Definition

Wikipedia: In programming language theory, an anonymous function is a function (or a subroutine) defined, and possibly called, without being bound to an identifier.

This means that the function expression does not need an identifier or name. In JavaScript an object is created with the function expression.

Form

An anonymous function looks like this: function() { // statements } or function(x) { // statements }

An example of an anonymous function expression function(x) {return x * x} . Compare this to above where we had given square as the function identifier.

Assigning the function expression to a variable

The anonymous function expression may be assigned to a variable. var square = function (x) { return x * x}

Test

square(8) gives back 64. The function object may be referenced by another variable var sq = square; . Note that there are no invocation () brackets. sq(9) gives back 81.

Method definition with an anonymous function

A method is a property whose value is a function.

var myObj = {};
myObj.lengthOfSide = 9;
myObj.area = function() {return this.lengthOfSide * this.lengthOfSide};

With var myObj = {} a new object is created. With myObj.lengthOfSide = 9; a data property is assigned to it. And with myObj.area = function() {return this.lengthOfSide * this.lengthOfSide}; a method is assigned.

console.log(myObj.area()) puts 81 to the log.

console.log(myObj.area) gives back the function object(function () {return this.lengthOfSide * this.lengthOfSide;}).

Using an anonymous function as an event handler

In the following example we get access to a button element by its name mySaveButton. This element has an onclick property. We use an anonymous function to assign an action which will be executed when the user clicks the button.

var button = document.getElementById("mySaveButton");
button.onclick = function() {monthTable.save()};

We want to add a button to the template of the HTML5 module.

var myButton = document.getElementById("myButton");

// assign an anonymous function to the onclick handler of the button

myButton.onclick = function() {
	var list = document.getElementById("beverages");
	var listlength = list.children.length;
	var note = document.getElementById("note");
	note.textContent = listlength + " types of beverages";
	}

To make the example work we have to add HTML code for the button

< type="button" id="myButton" value="count" />

XMLHttpRequest

When using an XHMLHttpRequest in AJAX applications an anonymous function may be used to define what to do when the requested data arrives:

var objXHR = new XMLHttpRequest();  
objXHR.open("GET", "http://www.mozilla.org/", true);  
objXHR.onreadystatechange = function (oEvent) {  
  if (objXHR.readyState === 4) {  
    if (objXHR.status === 200) {  
      console.log(objXHR.responseText)  
    } else {  
      console.log("Error", objXHR.statusText);  
    }  
  }  
};  
objXHR.send(null);  

window.onload

The window.onload event is fired when the document with all images has finished loading. Then some JavaScript code may be executed. This can be done with an anonymous function.

window.onload = function() {

   // execute JavaScript code her which works on the DOM

}

Immediately-Invoked Function Expression (IIFE)

An anonymous function may be invoked immediately after being defined.

Note by John Resig

John Resig suggests to beginning JavaScript programmers to use var getData = function() { }; instead of function getData() { }.

JavaScript Garden

Function declarations and expressions

David Flanagan

JavaScript, The Definitive Guide, 6th edition, 2011; chapter 8.4 Functions as values

Wikipedia

Uses and examples in other languages.