O-OF-N

Code for this and several other ES-6 features can be found in my  github ES-6 has introduced a “class” keyword and “extends” keyword which are similar looking to classes in Java. In reality these are nothing but a syntactic sugar over prototypical inheritance in ES-5. In ES-5 classes were depicted as follows: var PersonEs5 = function(firstName, lastName){ this.firstName = firstName; this.lastName =lastName; } var p1 = new PersonEs5('first','last'); With ES-6 the same class can be written as follows: class Person{ constructor(firstName,lastName){ this.firstName = firstName; this.lastName = lastName; } } Classes are nothing but functions under the cover. If the ES-6 code is compiled down to ES-5, the compiled version will be as follows: function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var Pers...

Code for this and several other ES-6 features can be found in my  github In ES-5 if a function has to take an arbitrary number or parameters, the exact count of which is decided only during run time, the only option was to construct an array and pass it as a parameter. In ES-6 a simpler and more expressive notation has been introduced called the  REST parameters, which are represented using the spread operator. Syntax for the spread operator is to prefix the variable name with three periods. For example,  REST  parameter “a” is represented using the spread operator as follows: ...a These parameters are ultimately converted into an array by the spread operator, there by taking the array creation responsibility away from the developer. Let us consider a few use cases for these new operators. CASE  1: Passing arbitrary number of parameters. ES-5: var add = function(a,b){ console.log(a+(b.reduce((x,y)=>{return x+y}))); ...

Code for this and several other ES-6 features can be found in my  github ES-6 brings default character support to Javascript. Let us first take a look at, how we would have implemented default parameters in ES-5: var addThree = function(a,b,c){ typeof a === 'undefined' ? a = 1 : a; typeof b === 'undefined' ? b = 2 : b; typeof c === 'undefined' ? c = 3 : c; console.log(a+b+c); }; We would have basically checked each and every parameter. If its value is not undefined, we would have taken the value of the variable, else would have set it to a default value. This is made easier in ES-6 and default parameters can be used as follows: var addThree = function(a= 1,b=2,c=3){ console.log(a,b,c) }; If the function is invoked as : addThree(); = > Then a, b and c would take default parameters as their values 1,2 and 3 respectively. If the function is invoked as: addThree(4,5); => Then a will take 4, b will take 5 a...

Code for this and several other ES-6 features can be found in my  github Introduction: Generators have been introduced in Java script as a part of the latest ES6 release. This feature offers significant advantages in asynchronous programming. The Legacy stuff: Functions in Java script (or in most languages) have been a bunch of instructions which start with a single motive- which is to execute the instructions and race to completion. Let us consider for example: var add = function (a, b){ if(a < 0) a = a*-1; if(b < 0) b = b *-1; return a+b; } The add function declared above is a simple function which takes two input parameters. Checks if any of them is negative. If it is negative it makes it positive. Adds the two numbers and returns their sum. Basically, once the add function starts execution, it just runs. Any change that happens around it can influence it in no way. If a developer wants the add function to behave differently, the developer has to ...

Code for this and several other ES-6 features can be found in my  github The root cause for most of the scoping issues/confusions/bugs in Javascript is its difficult to comprehend working of scope. For someone who comes from a language like Java, scope works very differently. In Javascript, every function has its own scope. So, when a function is executed within another function, the “this” keyword outside the child function has a different meaning vs the “this” keyword inside the child function. Consider the following example: var fn = function() { this.a = 5; setTimeout(function(){ console.log('value of a = ' + this.a); },0); }(); A callback function is passed as parameter to the  setTimeOut function. This is executed inside another function called fn This basically means, the fn function has a scope which is different from the scope of the function passed as parameter to the the setTimeOut function. Hence the “this” keyword ...