Revisiting Concepts Of JavaScript For SharePoint / Office 365 Developer - JavaScript Variables - Part One

Background

While working on one of my SharePoint online projects, I realized that its not sufficient only to know the SharePoint and respective SDKs. Nowadays, in the development of SharePoint / Office 365, the importance of JavaScript is increased a lot, in order to avoid custom Server side coding, that sand box solutions are deprecated, new App model development, performance, and that migration becomes easy etc.

One important scenario which I found is we have added two JSOM Web parts (content editor with JSOM) on one of our SharePoint online pages and both the Webparts stopped working. When we had 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 parts were  working. After looking into the details, I  found that it's a JavaScript issue -- the same variable names in both the Web parts .JS file, JavaScript namespaces are not used, “Strict” keyword is not used etc.

Hence, I thought why not share the basics of JavaScript, which SharePoint /Office 365 developers should be aware of. I’ll start with very simple, JavaScript variables (though this is a very important point) and in the coming articles, we move ahead with the advanced topics, which are useful for SharePoint / Office 365 development.

JavaScript variables

1. JavaScript variables are declared with “var” keyboard, as shown below.
   
   var counter=0;
   
   JavaScript does not have a specific data type keyword.
   
   
2. If there is no specific custom namespace specified or the variable is defined outside the function, the variable is defined in the global namespace. It's a global variable but if variable is defined in any function, it's a local variable.
   
   
3. The scope of the global variable is until our page is loaded, where the script is added. As we move on another page, the scope of the global variable ends. If we reload the page again, all our global variables scopes end and are created again.
   
   
4. If we use the variable without declaring those, then these variables are the global variables. This means if we use variable in function without declaring it, the variable is available outside the function. Hence, it's really important to declare the variables.
   
   
5. It's best practice to use the local variables until and unless, we require the global variables or at least we must specify the custom namespaces, as explained in point 6.
   
   
6. We can define the variable in the custom namespace, as shown below.
   

   <script type= "text/javascript">
   "use strict";
   //Custom NameSpace
   var MyCustomNameSpace = window.MyCustomNameSpace || {};
   var MyCustomNameSpace .cssFileURL = "CSS File URL";
   </script>

   Here, we have created a custom namespace “MyCustomNameSpace ” and defined a variable “cssFileURL” in the namespace.
   
   We can access the variable, mentioned above directly as - MyCustomNameSpace .cssFileURL
   
   
7. It's really very important to use the proper namespace name as per the functionality whenever using JSOM. It avoids the collision of variables, if two JSOM Web parts are added on the same page and the variable names are same.
   
   
8. typeof operator is used to get the variable type as
   alert(typeof MyCustomNameSpace .cssFileURL);
   
   The line, shown above will return the ”string” type of MyCustomNameSpace .cssFileURL variable, as shown below.
   
   
   Figure 1 : Using typeof operator
   
   typeof operator returns one of the types which are shown below.
   
   
• object 
• string
• number
• boolean
• function
• object
• Undefined
  
  
9. JavaScript variables are case sensitive. Not only variables but function names, keywords etc. are also case sensitive. This means the variable item is different than the variable Item. Hence, it's really important to use proper variable naming conventions when we use the variables.

Here, I tried to cover all the required details regarding JavaScript variables. If you think of any more important points which I missed here, please include in the comments section.