AdvanceJsSnippets.js

// =================== Scope ======================= //

for (var i = 1; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, i * 1000);
}

for (var i = 1; i < 5; i++) {
  (function(j) {
    setTimeout(function() {
      console.log(j);
    }, j * 1000);
  })(i);
}

// =================== XXXXXX ======================= //

// =================== Closure ======================= //

function outerFunction() {
  var count = 10;

  return function innerFunction() {
    console.log(count);
  };
}
var result = outerFunction();

console.dir(result)
result();

// Also try following scenarios --

// move count to innerFunction.
// then console.dir result.

// add newCount to outerFunction and move count back to outerFunction.
// then console.dir result.

// add newCount to console.log of innerFunction.
// then console.dir result.

// --=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--= //

//Implicit closure
function foo() {
  var count = 40;

  bar(function param() {
    console.log(count);
  });
}

function bar(param) {
  var count = 50;
  console.dir(param);
  param();
}

foo();

// Once function created in javascript
// all the required things are added to it as closure object from lexical scope if required.

// --=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--= //

// Closure keeps reference not copy
function foo() {
  var count = 40;

  setTimeout(function bar() {
    console.log(count);
  }, 2000);

  count = 50;
}

foo();

// Varaibles are not garbage collected until they are reference by something.

// All variables are not garbge collected after execution of function.
// Count has reference through closure object so it will not be garbage collected.

// It's myth that we need to return function for closure.
// So any time function is created closure object is added to it if required.

// --=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--= //

// Closure do not mean returning or passing function.

function funC() {
  var lastName = "Tesla";

  function funB() {
    var name = "Bose";

    function funA() {
      console.log(name, lastName);
    }
    console.dir(funA);
    funA();
  }
  funB();
}

funC();

// --=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--= //

// =================== Execution stack ======================= //

// Error stack strace
function foo() {
  throw new Error("Some random error");
}
function bar() {
  foo();
}

function baz() {
  bar();
}

baz();

// --=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--= //

// Maximum stack size : ~16,000 to 17,000
function foo() {
  foo();
}

foo();
// =================== XXXXXX ======================= //

// =================== Hoisting ======================= //

console.log(typeof foo); // Function
var foo = "bar";
function foo() {}

// Due to hoisting or compilation phase.

var foo = "bar";
function foo() {}
console.log(typeof foo); // String

// =================== XXXXXX ======================= //

// =================== Prototypal Inheritance ======================= //

var objA = { foo: "foo" };
var objB = { bar: "bar" };
var objC = { baz: "baz" };



// Create chain of prototype
objA.__proto__ = objB;
// Show slide
objB.__proto__ = objC;
// Show slide

// Open this prototype chain for reference.

console.log(objA.bar);
console.log(objA.baz);
// __proto__ is not recommended to use but we will use it for simplicity and clarity.

// =================== XXXXXX ======================= //

// =================== ES6 Inheritance ======================= //

class Parent {
  constructor() {
    this.parentProp = "Parent";
  }

  parentMethod() {
    console.log("In parent method");
  }
}

class Child extends Parent {
  constructor() {
    super();
    this.childProp = "Child";
  }

  childMethod() {
    console.log("In child method");
  }
}

let C1 = new Child();
console.log(C1);

// =================== XXXXXX ======================= //

// ===================  Inheritance ======================= //

var num = 15;
typeof num;
var strNum = num.toString();
num.__proto__;


// At runtime wrapper object is created over num and
// it has prototype object with toString property.

// Wrapper object created like this --> var strNum = new Number(num); 
// console.log(strNum.__proto__)

// Myth primitive are also objects at run time these
// created for fraction of seconds and then garbage collected.

// =================== XXXXXX ======================= //

// ===================  Event Loop ======================= //

 https://jsfiddle.net/ishansoni22/v12pfudb/

// --=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--= //

http://latentflip.com/loupe/

var bar = function() {
  console.log("bar");
};
var baz = function() {
  console.log("baz");
};
var foo = (function() {
  console.log("foo");
  setTimeout(bar, 5000);
  baz();
})(function() {
  foo();
})();

// --=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--= //

console.log("start");
setTimeout(function() {
  console.log("timeout");
}, 0);
var pr = new Promise(function(resolve, reject) {
  resolve("promise");
});
pr.then(function(data) {
  console.log(data);
});
console.log("end");

// =================== XXXXXX ======================= //