Follow Us:
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.
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.
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)
var setAttValue= function() { // Sets the title to 'Test' Xrm.Page.getAttribute("title").setValue("Test"); }
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 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:
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:
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.
The complementary paper includes over 12 years of research, recent survey results, and CRM turnaround success stories.
Request Download
This 60-second assessment is designed to evaluate your organization's collaboration readiness.
Learn how you rank compared to organizations typically in years 1 to 5 of implementation - and which areas to focus on to improve.
This is a sandbox solution which can be activated per site collection to allow you to easily collect feedback from users into a custom Feedback list.
Whether you are upgrading to SharePoint Online, 2010, 2013 or the latest 2016, this checklist contains everything you need to know for a successful transition.