Understanding JavaScript Concepts for SharePoint App Development

10 05 2014


Understanding JavaScript Concepts for SharePoint App Development

JavaScript has been an important ingredient while developing things ranging from simple html/html5 pages, to .net web sites/web applications to SharePoint App’s. Though with the advent of JQuery a whole new era began for shortcuts but JavaScript still plays a major role in Client Side Programming.
Keeping this in mind I present a short series of few articles to help understand JavaScript and its programming techniques.


JavaScript Namespaces

As a developer you might have written JavaScript in web pages and thus you understand that JavaScript is comprised of functions. These functions can be written directly into web pages using script tags or separate referenced files. Simply writing functions places them into global namespace which resides within window’s object.
If you are cooking for a single page than this methodology which majority of developers follow doesn’t creates fuss, but for a web part or app based development it would simply lead to a messy error prone code.
So what to do?

That’s were Namespace comes to rescue. Using proper and appropriate custom namespaces helps to isolate your code from other JavaScript in the page. Custom namespaces should be defined within global namespace and most of the variables and functions should be defined within the custom namespace. Following a simple nomenclature one can write more managed and maintainable custom JavaScript libraries.

Sample custom namespace creation code


<script type="text/javascript">
	var myNamespace = window.myNamespace || {};


The above code simply declares a global variable named “myNamespace”. It would simply refer existing myNamespace object or will create a new one if it’s not already created.


JavaScript Variables

At little more granular level we have JavaScript variables. They can be declared either in a namespace or within a function. “var” keyword is used to define a variable.
It’s not compulsion but it’s a best practice to use “var” keyword as it has its own implications as depicted below

When “var” keyword is not used the variable is automatically defined within global namespace.

When “var” keyword is used outside of a function the variable is defined within global namespace.

When “var” keyword is used inside of a function the variable is scoped to function only.


<script type="text/javascript">
    var globalVariable = "Hi this is global variable";
    function globalFunction(){
    alert("Global function in Global namespace");
        for(var i=0;i<5;i++){
            alert("Local variable scoped at function " + i);


JavaScript does not have specific datatype keywords but variables do have a type based on the values they hold. One can check the type of value hold into the variable by using “typeof” keyword. Further “typeof” keyword can also be applied to function. “typeof” may return one of the following values depicted below when applied to variable or function

  • object
  • function
  • string
  • number
  • boolean
  • undefined

JavaScript is very flexible in terms of syntax and declarations and does not apply specific strict rules, which sometimes becomes bottleneck while managing huge amount of client side scripting which is common practice these days.

To stay away from mess and as a best practice one can use “use strict” at top of any custom library or function.


JavaScript Functions

As nothing new, function in JavaScript also consists of name, parameters and scope. A major difference from other programming languages is that, it’s not mandatory for the parameters to match the function signature as all parameters are passed using arguments array.


<script type="text/javascript">
    function myFunction(){
        for(var i=0;i<arguments.length;i++){


The above depicted “myFunction” does not include any parameters. Instead, it just alerts all argument from arguments array. All below mentioned call to “myFunction” will succeed.


<script type="text/javascript">
    myFunction('Hi','I','am',27,'year old');


Another beauty of javascript is that we can assign javascript functions to a variable and alter invoke the variable to call the function. Such type of declarations are known as “anonymous” functions.


<script type="text/javascript">
    var myFunctionPointerVariable = function(){
        alert("Hello observer I dont have name declared and so I am anonymous!");


JavaScript Closures

At little complex level here comes one of the most important concept named “closure” which if not applied appropriately can make your, else your team members life a big hell. “closure” plays important role while developing encapsulated javascripts.

“anonymous” functions can be assigned to variables as well as they can be returned from other functions which is known as “closure”. Using “closure” one can develop libraries that are more maintainable and are friendly for object oriented developers.


<script type="text/javascript">
    function myFunction(name)
        var display = function (){ alert("Hello " + name) }
        return {
            greet: display
    myFunction("Dhaval Upadhyaya").greet();



JavaScript Prototypes

JavaScript object is nothing but an unordered collection of key value pairs. Every “object” is based on “prototype” which is an object that supports inheritance. Though not fully object oriented but using “prototype” one can develop objects inheriting from others and so on.


Simple object


<script type="text/javascript">
    blogger = { Name: "Dhaval Upadhyaya", Age:30 };
    alert("Hello I am " + blogger["Name"]  + " and I turned " + blogger["Age"] + " year old!");


Complex Object using prototype and inheritance


<script type="text/javascript">
    var car = Object.create(null);

    var lamborgini = Object.create(car);
    lamborgini["Model"]  = "Diablo"
    lamborgini["Bhp"] = "595"
    lamborgini["Rpm"] = "7300"


    lamborgini = Object.create(car);
    lamborgini["Model"]  = "Murcielago"
    lamborgini["Bhp"] = "640"
    lamborgini["Rpm"] = "8000"



With all of the above technicalities you can practice creating small custom libraries and I take a break for a while, to present patterns for “Creating Custom Libraries” in next session.