Tuesday, 15 November 2016

Revisiting concepts of JavaScript for SharePoint / Office 365 developer - Part 1 - JavaScript variables

Hi All,

In this article I’ll go through the basics of JavaScript variables, important points, which should know for SharePoint / Office 365 developer who uses the JavaScript Object Model(JSOM) for SharePoint / Office 365 development.

Background: While working on one of the SharePoint online project I realized that its not sufficient only knowing the SharePoint and respective SDKs. Now a days In development of SharePoint / Office 365 importance of JavaScript is increased a lot, in order to avoid custom server side coding, sand box solutions are deprecated, new App model development, performance, migration becomes easy etc.  
One important scenario which I found where we have added two JSOM web parts (content editor with JSOM) on one of the our SharePoint online page and both the webparts stopped working. When we have only any one web part on the page it was working fine but when we have both the web parts on the page, none of the web part is working. After looking into details it found that its JavaScript issue, same variable names in both the web parts .JS file, JavaScript namespaces are not used, “Strict” keyword is not used etc.
So I thought why not to share the basics of JavaScript which SharePoint /Office 365 developer should aware at least. I’ll start with very simple, JavaScript variables (though this is very important point) and in coming articles with move ahead with advanced topics which are useful for SharePoint / Office 365 development.

JavaScript variables:

  1. JavaScript variables are declared with “var” keyboard like
    var counter=0;
    JavaScript dosent have specific data type keyword.
  2. If there is no specific custom namespace specified or variable is defined outside the function then variable is defined in global namespace. Its a global variable. But if variable is defined in any function then its local variable.
  3. The scope of Global variable is till the our page is loaded where script is added. As we move on another page scope of global variable ends. If we reload the page again all our global variables scope ends and created again.
  4. If we use variable without declaring those then these variables are global variables. That means if we use variable in function without declaring it, till variable is available outside the function. So its really important to declare the variables.
  5. Its best practice to use local variables unless and until we requires global variables. Or at least we must specify custom namespaces as explained in point 6.
  6.  We can define the variable in custom namespace as
     <script type= "text/javascript">
    "use strict";
    //Custom NameSpace
     var MyCustomNameSpace = window.MyCustomNameSpace || {};
     var MyCustomNameSpace .cssFileURL = "CSS File URL";
       Here, we have created custom namespace “MyCustomNameSpace ” and defined variable “cssFileURL” in the namespace.
    We can access above variable directly as - MyCustomNameSpace .cssFileURL
  7. Its really very important to use proper namespace name as per the functionality whenever using the JSOM. It avoids collision of variables if two JSOM web parts are added on the same page and variable names are same.
  8. typeof operator is used to get the variable type as
    alert(typeof MyCustomNameSpace .cssFileURL);
Above line will return the ”string” type of MyCustomNameSpace .cssFileURL variable as
Figure 1 : Using typeof operator
typeof operator returns one of the following types

9. JavaScript variables are case sensitive. Not only variables but function names, keywords etc. are also case sensitive. This means variable item is different than variable Item. So it really matters to user proper variable naming conventions when we use variables.

Here I try to cover all the required details regarding JavaScript variables. If you think any more important point which is missed here then please include in comments section.
Enjoy Reading :)
As usual any comment / suggestions / feedback / questions always welcome :)


Prasham Sabadra said...

Thanks for your kind reply.

Mahalyasree said...

This idea is mind blowing. I think everyone should know such information like you have described on this post. Thank you for sharing this explanation.Your final conclusion was good. We are sowing seeds and need to be patiently wait till it blossoms.
Architects in Chennai