JavaScript Functions

2 Mar

There is more to declaring functions in JavaScript than you might have first thought….

Function Declaration

A basic function in JavaScript looks something like this:

function functionName() {
  do something...
}

This is called a function declaration, where we give the function a distinct identifier (aka functionName). You can then invoke the function by calling it (and passing any necessary arguments in it’s parentheses)

functionName()

An Example

This function calculates the area of a rectangle:

function rectangleArea (length, width) {
 return length * width;
}

To invoke it we call the function name (rectangleArea) and pass two parameters.

rectangleArea (10, 5) // Returns 50

You can find out how many arguments a function expects with the .length method

rectangleArea.length // Returns 2 as the rectangleArea function expects two parameters

Anonymous Function Expression

You can also declare a function in a different way, which we call a anonymous function expression. This involves assigning a unnamed/anonymous function to a named variable.

var variableName = function () {
  do something...
}

Named Function Expression

To add to the confusion you can also specify a function identifier when declaring a function expression:

var variableName = function functionName () {
  do something...
}

Now you can also call the function by referring to the function name (as well as the variable the function is assigned to).

Too see the name of a function assigned to a variable call the name method (note this wouldn’t work with a anonymous function expression)

variableName.name // Returns functionName

So What’s The Difference

The main thing to remember is that a function declaration loads before any code is executed, while anonymous function expressions only become available when the interpreter reaches that line of code.

This is a result of function ‘hoisting’ where functions are moved to the top of their scope. Essentially this means that the interpreter will not process your code in the same order you wrote it – hence you can invoke a function like this without getting an error as the interpreter ‘hoists’ the function declaration above the line where it is invoked!

functionName()

function functionName () {
  do something...
}

But if you did the same with a function expression you would get an error as the function is not hoisted and is consequently not available when the interpreter tries to invoke it. Instead you’ll get a TypeError!

functionName() // ERROR!

var functionName = function () {
  do something...
}

Another important difference is that when using function declarations the function name will appear when debugging your code (for example in Firebug debugger). A anonymous function expression which refers to an unnamed function will not.

Functions Are First Class Objects

When talking about functions in JavaScript we have to mention and understand the phrase “functions are first-class object”. Essentially this means that functions are treated as objects by JavaScript.

This means we can store functions in a variable (as demonstrated by anonymous function expression)

var foo = function () {
  return "bar";
}

var myfunction = foo();

and pass a function as a parameter to another function…

function alertArgument(word) {
  alert(word);
}

alertArgument(foo());

Note: Python treats functions as “first-class objects” too!

Variable Scope

The scope of variables in JavaScript is a pretty complicated affair, but as a general rule any variable declared inside a function has a local scope. That means it can only be referenced inside the function.

function returnArg(a) {
  var firstArg = a;
}

firstArg // Error: firstArg is not defined

I will talk more about variable scope in JavaScript another day…

Additional Reading

To learn more about function in JavaScript I recommend you read

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: