Recently, I was streamlining some JavaScript code for one of our clients SharePoint and Dynamics CRM integrations, and I came across some legacy code that took me back to my college coding class days. There seems to be some confusion out there about how to define a JavaScript function, so in today's blog I'll review the different options and ways you can define JavaScript functions.

Defining JavaScript functions for SharePoint and Dynamics CRM

JavaScript Function Definitions

As a developer, I typically define a function using the syntax function “<FunctionName>()”. So when I was reviewing some code it was quite unusual for me to see the function definition as “var <FunctionName> = function()”. This is the difference between a function declaration and an anonymous function expression.

At first I remembered this concept and syntax back while in college but never have had chance to use it. After I dug into it further, it wasn't surprising that while they are totally different it was very informative to understand how it can affect code architecture.

JavaScript Function Definition Example:

Type 1: This the typical way of defining a function (also known as function declaration)

1
2
3
4
5
6
7
8
9
 
function setAttValue()

{

// Sets the title to 'Test'

Xrm.Page.getAttribute("title").setValue("Test");

}

Type 2: This is a more unusual way of defining a function (also known as anonymous function expression)

1
2
3
4
5
6
7
8
9
 
var setAttValue= function()

{

// Sets the title to 'Test'

Xrm.Page.getAttribute("title").setValue("Test");

}


Calling the JavaScript Function

Though, there is only one way of calling functions that I defined above, there is a spectacular difference in one thing. Let's take a look.

  1. What if I try to execute my JavaScript like this:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
 
setAttValue();

function setAttValue()

{

// Sets the title to 'Test'

Xrm.Page.getAttribute("title").setValue("Test");

}

 

As you would expect, the function will run fine.

But when I try to execute my JavaScript like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
 
setAttValue();

var setAttValue= function()

{

// Sets the title to 'Test'

Xrm.Page.getAttribute("title").setValue("Test");

}


We got an error: setAttValue() is not defined! What's going on here?

Why Do We Get This Error?

When the functions are declared at Type 1 above, the JavaScript interpreter moves the function declarations to the top of the JavaScript scope. This concept is also known as hoisting. Therefore the whole function body is lifted by the interpreter.

When the Type 2 syntax is used on the other hand, there is no hoisting for the function. Instead variable hoisting takes place and therefore it is undefined which causes the error.

How Do I Use the Type 2 Method?

It's simple: Write the function Expression before you call the function. Here's a quick example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
 
var setAttValue= function()

{

// Sets the title to 'Test'

Xrm.Page.getAttribute("title").setValue("Test");

}

setAttValue();


See the difference?

In a nutshell, function declarations are loaded before JavaScript starts executing while function expressions are executed only when Interpreter hits that line. In JavaScript if you have too many functions and not all are necessary to be called at a particular instance, you should use function expressions. Otherwise it is always recommended to use the common function declaration which is less confusing.