Development tips : 2016

Wednesday, March 16, 2016

Async patterns in javascript

Generators (Yield)

The generator will pause itself and the iterator will resume it. It can start and stop infinite number of time.

function* gen(){
    console.log("Hello");
    //The function will resume itself waiting for the next iterator
    yield null;
    console.log("World");
}

var it=gen();
it.next();   //prints "Hello"
it.next();   //print "World"

Saturday, March 12, 2016

Create a widget using javascript

Javascript code

Equivalent javascript code

Html code

Friday, March 11, 2016

OLOO: Object Linked to Other Object

I was watching a session by Kyle Simpson about the object inheritance in javascript and he introduced this term that he called OLOO. Where b1 delegates to Bar delegates to Foo as in the example below:

Code

var Foo={


A screenshot from Kyle Simpson slides

    init: function(who){
        this.me=who;
    },
    identify:function(){
        return "I am "+ this.me;
    }
};

var Bar=Object.create(Foo);

Bar.speak=function(){

    alert("Hello, "+this.identify() +".");
};

var b1=Object.create(Bar);
b1.init("b1");
b1.speak();

Equivalent complicated code -->

Thursday, March 3, 2016

Prototype in javascript

Wednesday, March 2, 2016

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

Tuesday, March 1, 2016

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.

Saturday, February 27, 2016

Closure in JavaScript

Here are some questions that I solved during one of the online courses. Hope they will help you to understand closure in JavaScript

//Write a function, `nonsense` that takes an input `string`.
//This function contains another function, `blab` which alerts `string`
//and is immediately called inside the function `nonsense`.
// `blab` should look like this inside of the `nonsense` function:

    var nonsense(string){
         var function blab(){
             alert(string);
         };

         blab();
    }

//In your function, `nonsense`,
//change the immediate call to a setTimeout so that the call to `blab` comes after 2 seconds.
//The `blab` function itself should stay the same as before.
    var nonsense(string){
         var function blab(){
             alert(string);
         };

         setTimeout(blab(),2000);
    }

//Now, instead of calling `blab` inside of `nonsense`, return `blab` (without invoking it).
//Call `nonsense` with some string and store the returned value (the `blab` function) in a variable called `blabLater`.
//Call `nonsense` again with a different string and store the returned value in a variable called `blabAgainLater`.

     var nonsense(string){
         var function blab(){
             alert(string);
         };

         return blab();
    }

    var blabLater=nonsense('My name is Saif');
    var blabAgainLater=nonsense('My name is Khan');

//Write a function with a closure. The first function should only take one argument,
//someone's first name, and the inner function should take one more argument, someone's last name.
//The inner function should console.log both the first name and the last name.

    var lastName= function(firstName){

        var innerFunction=function(lastName){
            console.log(firstName + ' ' + lastName);
        };

        return innerFunction;
    }

//Create a `storyWriter` function that returns an object with two methods. One method,
//`addWords` adds a word to your story and returns the story while the other one, `erase`,
//resets the story back to an empty string. Here is an implementation:

    var storyWriter= function(){
        var story='';
        return{
            addWords: function(word) {
              story+=' '+ word;
              },
            erase:function(){
                story='';
            },
            logStory:function(){
                console.log(story);
            }
        };
    };

I ran into interesting example that was given by Kyle Simpson about #closure misunderstanding in #javascript
In the first snapshot, We expected the console to print 1, 2, 3 ,4 ,5 but it printed 6,6,6,6,6 instead of that.
To solve that issue, Kyle suggested to use iffy so that each function will have its own 'i'.

for (var i=1;i<=5;i++){
    setTimeout(function(){
    console.log("i: "+i);

    },i*1000);
}

for (var i=1;i<=5;i++){
    (function(i){
        setTimeout(function(){
        console.log("i: "+i);

        },i*1000);
    })(i);
}