Skip to content

Instantly share code, notes, and snippets.

@aditodkar
Forked from vivektikar25/AdvanceJsSnippets.js
Created February 26, 2019 14:25
Show Gist options
  • Save aditodkar/49665d1fd2de29471e9490206900dbfd to your computer and use it in GitHub Desktop.
Save aditodkar/49665d1fd2de29471e9490206900dbfd to your computer and use it in GitHub Desktop.
// =================== 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 ======================= //
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment