Module patterns in javascript

Classic module pattern

ar classicModulePattern=(function(){
   
    var greeting={text: "hi"};

    return {
        sayHi: function(){
            console.log(greeting.text);
        }
    }   

})();

Modified module pattern 

The good thing about this module is that you can update it, you can remove and add attributes while in the classic module you will not be able to update the returned object.

var modifiedModulePattern= (function(){
    var publicAPI={
        sayHi: function(){
            publicAPI.sayBye();
        },
        sayBye:function(){
            console.log('Bye');
        }

    };
    return publicAPI;
})();

modifiedModulePattern.sayHi();

this keyword rules in javascript

I wrote down these notes while watching one of Kyle Simpson workshops about javascript and would like to share them with Y'all :

"Every function, while executing, has a reference to its current execution context, called this. "

There are 4 rules of how this word gets bound in JavaScript: 

"1.Was the function called with 'new' ?
2.Was the function called with 'call' or apply specifying explicit 'this' ?
3. Was the function called via a containing/owning object (context)?
4. Default : global object  "


Rule 1: Default binding rule
When the call site is the default "plain" like in the lines, the function stands alone by itself. The default binding rule applies.

function foo(){
    console.log(this.hi);
}

foo();   <---- function stands alone by itself.

If you are in strict mode, then default is undefined , otherwise define it in the global.


Rule 2: Implicit binding rule
It owns the content of the call site.

function foo(){
    console.log(this.hi);
}

var object1 ={hi:1984,func:foo};
var object2= {hi:2016,func:foo};

 object1.foo();  <---- //1984
object2.foo();   <---- //2016

Rule 3:

Explicit binding
If you use .call or .apply on the call side, They take their parameter as a this.

function sayHi(){
    console.log(this.hi);
} 

var hi="Hola";
var object1={hi:"Hi"};

sayHi();                      <----- //Hola
sayHi.call(object1);    <----- //Hi

Hard binding 
Predictably reference the object that it has to reference.

function sayHi(){
      console.log(this.hi);
}


var object1 ={hi:"Hi"};
var object2 ={hi:"Hola"};


var orig=foo;
sayHi= function(){orig.call(object1)};


sayHi();                     <----- //Hi
sayHi.call(object2);   <----- //Hi

Rule 4: The new key word
There are 4 things happen when the new key word put in front of a function call 
1. A brand new object will be created 
2. That object gets linked to different object    <---- More  clarifications later
3. That object gets bound as this  key word
4.  If that object return nothing, It will implicitly returns this .

 
Example :

var object1={
      var name="Saif";
      printName:function(){
         console.log(name);
      }
}

var object2= {name:"Khaled", printName:object1.printName};

var name="Belal";
var printMe=object1.printMe; 

object1.printMe();    <---- Saif
object1.printMe();    <---- Khaled
printMe();                 <---- Belal

Hoisting in javascript

The variables deceleration will be moved to the top during the compilation phase and the variables in the screenshots below will not be printed as undefined.

While in the function example below, We will have undefined values.

The key word let in javascript

let vs. var 

let will hijack implicitly whatever block it appears in.
If you define a variable in the for loop using var, that variable will be available within the function, but if you define it using the let key word, it will be available within the for block only.

 ** I took these snapshots from Kyle Simpson workshop called "Advanced JavaScript"

You should avoid the with keyword in javascript

While watching one of Kyle Simpson workshops, he tried to explain why it is important to avoid using with key word, he even called it more evil than eval (eval is modifying existing lexical scope, the with key creating a whole new lexical scope). In the example below 'd' is not an attribute in obj, javascript will create a 'd' variable in the global scope instead of adding it to obj.

Should I use eval in my #javascript code ? The answer is NO NO NO

While watching one of Kyle Simpson workshops he insisted not to use eval in JavaScript because it impacts the JavaScript performance. 

Three major negatives for using anonymous function expression in JavaScript

While watching one of Kyle Simpson workshops about  JavaScript, he gave three major negatives for using anonymous function expression in JavaScript  as compared to a named function expressions:

1. There is noway inside the function to refers to itself, Say if you want to create recursion. There is noway for the function to refer to itself within itself.

2. They don't play well in debugging, especially in minified code. But if you give it a name, that name will help in the debug trace.

3. give it a name makes it self documented code.