JavaScript 101 - Functions
Functions, Objects and Methods, Oh My!
By nature developers are “efficient” workers. We don’t like having to type things more that absolutely necessary. Thus Functional Groups were created. Functional Groups are constructs that allow us to reuse bits of code by a name. They are like variables for actions. Generally speaking there are three type of Functional Groups: Functions, Objects and Methods.
Functions
Functions are the work horse of programming. They can accept multiple parameters (inputs) separated by
commas, but can only have one return
value.
function functionName( param, para2 ){
//Do stuff here.
//param and para2 are accessible here.
return stuff;
}
//NOTE: Javascript does not have default values or typing in function definitions.
function functionName( string param = NULL){} //DOES NOT WORK
To call a function, you simply use its name and pass the necessary parameters. In the example above to call the
function you would functionName( 14, "hello");
to execute the function. Since function can return
a value you can use
that to set a variable to the returned value bar = functionName( 14, "hello");
. bar
is now set to the value
returned by functionName()
.
Function Declaration, Function Expression and Function Constructor
There are three ways to create a function is JavaScript. Function Declaration, Function Expression and Function Constructor.
Function Declaration
Function Declaration defines a function that is processed at parse time and requires an identifier. This method is marginally the fastest.
function name([param,...]){}
Function Expression
Function expression stores a function as a variable.
var variable = function [name]([param,...]){}
//NOTE if you give a function expression a name, the name is self scoped...
//You can only call it within itself by that name.
var test1 = function test2() { alert(typeof test2); }
alert(typeof(test2)); //alerts 'undefined', surprise!
test1(); //alerts 'function' because test2 is a function.
Function Constructor
Remember ultimately in JavaScript all function are objects. And as such we can construct a function using the new Function()
prototype. For the scope of this lesson Function Declaration and Function Constructor are equivlant. The function constructor allows
us to dynamically create function on the fly without eval()
.
var variable = new Function(["param", "param",...], "//Do Stuff Here");
var func = new Function("x", "y", "return x*y;");
//Is roughly equivalent to:
function f(x, y){
return x*y;
}
Anonymous Functions
Anonymous Functions are functions that have no name. They are often stored as a variable, passed as a parameter or used as a scope grouping. To immediately invoke a function expression you add a set of parentheses with appropriate parameters. This is often seen in jQuery plugins to prevent clashing.
(function(){ /* code */ }());
//or
(function(){ /* code */ })();
(function(msg){console.log(msg)})('Hello');
//Output Hello to the console.
Objects
Objects are a special type of Functional Grouping that is able to store variables as well as code. This distinction is a lot more difficult to explain in the context of prototyped languages such as JavaScript, because everything is an object in them.
function MyObject() {} // a first class functional object
MyObject.prototype.test = function() { alert('OK'); } // OK
Methods
Methods are simply functions inside of objects. In class based languages (PHP) they often divided into levels of access. eg. public, private and protected.
Public methods can be accessed directly by referencing them in the object $object->method();
. Protected methods can be accessed by any of the object’s children directly, and
protected methods can only be accessed from within a class(object). JavaScript does not have private methods. Though it is standard practice to denote
non-public methods and variable with an _ or __. That lets developers know that these are internal methods and may change at any version release.