├── LICENSE ├── README.md ├── call-apply-bind └── index.js ├── closures └── closures.js ├── currying └── index.js ├── debouncing └── index.js ├── defer-async └── index.js ├── event-bubbling-and-capturing └── index.js ├── event-delegation ├── index.html └── index.js ├── imperative-declarative └── content.md ├── module-bundler └── module-bundler.md ├── polyfills └── polyfill-for-bind.js ├── primitive-and-reference-types └── primitive-and-reference-types.js └── prototype-prototypal-inheritance └── index.js /LICENSE: -------------------------------------------------------------------------------- 1 | Creative Commons Legal Code 2 | 3 | CC0 1.0 Universal 4 | 5 | CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE 6 | LEGAL SERVICES. DISTRIBUTION OF THIS DOCUMENT DOES NOT CREATE AN 7 | ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS 8 | INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES 9 | REGARDING THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS 10 | PROVIDED HEREUNDER, AND DISCLAIMS LIABILITY FOR DAMAGES RESULTING FROM 11 | THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS PROVIDED 12 | HEREUNDER. 13 | 14 | Statement of Purpose 15 | 16 | The laws of most jurisdictions throughout the world automatically confer 17 | exclusive Copyright and Related Rights (defined below) upon the creator 18 | and subsequent owner(s) (each and all, an "owner") of an original work of 19 | authorship and/or a database (each, a "Work"). 20 | 21 | Certain owners wish to permanently relinquish those rights to a Work for 22 | the purpose of contributing to a commons of creative, cultural and 23 | scientific works ("Commons") that the public can reliably and without fear 24 | of later claims of infringement build upon, modify, incorporate in other 25 | works, reuse and redistribute as freely as possible in any form whatsoever 26 | and for any purposes, including without limitation commercial purposes. 27 | These owners may contribute to the Commons to promote the ideal of a free 28 | culture and the further production of creative, cultural and scientific 29 | works, or to gain reputation or greater distribution for their Work in 30 | part through the use and efforts of others. 31 | 32 | For these and/or other purposes and motivations, and without any 33 | expectation of additional consideration or compensation, the person 34 | associating CC0 with a Work (the "Affirmer"), to the extent that he or she 35 | is an owner of Copyright and Related Rights in the Work, voluntarily 36 | elects to apply CC0 to the Work and publicly distribute the Work under its 37 | terms, with knowledge of his or her Copyright and Related Rights in the 38 | Work and the meaning and intended legal effect of CC0 on those rights. 39 | 40 | 1. Copyright and Related Rights. A Work made available under CC0 may be 41 | protected by copyright and related or neighboring rights ("Copyright and 42 | Related Rights"). Copyright and Related Rights include, but are not 43 | limited to, the following: 44 | 45 | i. the right to reproduce, adapt, distribute, perform, display, 46 | communicate, and translate a Work; 47 | ii. moral rights retained by the original author(s) and/or performer(s); 48 | iii. publicity and privacy rights pertaining to a person's image or 49 | likeness depicted in a Work; 50 | iv. rights protecting against unfair competition in regards to a Work, 51 | subject to the limitations in paragraph 4(a), below; 52 | v. rights protecting the extraction, dissemination, use and reuse of data 53 | in a Work; 54 | vi. database rights (such as those arising under Directive 96/9/EC of the 55 | European Parliament and of the Council of 11 March 1996 on the legal 56 | protection of databases, and under any national implementation 57 | thereof, including any amended or successor version of such 58 | directive); and 59 | vii. other similar, equivalent or corresponding rights throughout the 60 | world based on applicable law or treaty, and any national 61 | implementations thereof. 62 | 63 | 2. Waiver. To the greatest extent permitted by, but not in contravention 64 | of, applicable law, Affirmer hereby overtly, fully, permanently, 65 | irrevocably and unconditionally waives, abandons, and surrenders all of 66 | Affirmer's Copyright and Related Rights and associated claims and causes 67 | of action, whether now known or unknown (including existing as well as 68 | future claims and causes of action), in the Work (i) in all territories 69 | worldwide, (ii) for the maximum duration provided by applicable law or 70 | treaty (including future time extensions), (iii) in any current or future 71 | medium and for any number of copies, and (iv) for any purpose whatsoever, 72 | including without limitation commercial, advertising or promotional 73 | purposes (the "Waiver"). Affirmer makes the Waiver for the benefit of each 74 | member of the public at large and to the detriment of Affirmer's heirs and 75 | successors, fully intending that such Waiver shall not be subject to 76 | revocation, rescission, cancellation, termination, or any other legal or 77 | equitable action to disrupt the quiet enjoyment of the Work by the public 78 | as contemplated by Affirmer's express Statement of Purpose. 79 | 80 | 3. Public License Fallback. Should any part of the Waiver for any reason 81 | be judged legally invalid or ineffective under applicable law, then the 82 | Waiver shall be preserved to the maximum extent permitted taking into 83 | account Affirmer's express Statement of Purpose. In addition, to the 84 | extent the Waiver is so judged Affirmer hereby grants to each affected 85 | person a royalty-free, non transferable, non sublicensable, non exclusive, 86 | irrevocable and unconditional license to exercise Affirmer's Copyright and 87 | Related Rights in the Work (i) in all territories worldwide, (ii) for the 88 | maximum duration provided by applicable law or treaty (including future 89 | time extensions), (iii) in any current or future medium and for any number 90 | of copies, and (iv) for any purpose whatsoever, including without 91 | limitation commercial, advertising or promotional purposes (the 92 | "License"). The License shall be deemed effective as of the date CC0 was 93 | applied by Affirmer to the Work. Should any part of the License for any 94 | reason be judged legally invalid or ineffective under applicable law, such 95 | partial invalidity or ineffectiveness shall not invalidate the remainder 96 | of the License, and in such case Affirmer hereby affirms that he or she 97 | will not (i) exercise any of his or her remaining Copyright and Related 98 | Rights in the Work or (ii) assert any associated claims and causes of 99 | action with respect to the Work, in either case contrary to Affirmer's 100 | express Statement of Purpose. 101 | 102 | 4. Limitations and Disclaimers. 103 | 104 | a. No trademark or patent rights held by Affirmer are waived, abandoned, 105 | surrendered, licensed or otherwise affected by this document. 106 | b. Affirmer offers the Work as-is and makes no representations or 107 | warranties of any kind concerning the Work, express, implied, 108 | statutory or otherwise, including without limitation warranties of 109 | title, merchantability, fitness for a particular purpose, non 110 | infringement, or the absence of latent or other defects, accuracy, or 111 | the present or absence of errors, whether or not discoverable, all to 112 | the greatest extent permissible under applicable law. 113 | c. Affirmer disclaims responsibility for clearing rights of other persons 114 | that may apply to the Work or any use thereof, including without 115 | limitation any person's Copyright and Related Rights in the Work. 116 | Further, Affirmer disclaims responsibility for obtaining any necessary 117 | consents, permissions or other rights required for any use of the 118 | Work. 119 | d. Affirmer understands and acknowledges that Creative Commons is not a 120 | party to this document and has no duty or obligation with respect to 121 | this CC0 or use of the Work. 122 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Topics: 2 | 3 | - [x] bind() vs apply() vs call() 4 | - [x] Polyfills 5 | - [x] Polyfill for Bind Method 6 | - [x] Currying in Javascript 7 | - [x] Async and Defer 8 | - [x] Event Bubbling 9 | - [x] Event Capturing aka Trickling 10 | - [x] Event Delegation 11 | - [x] Protoypes and Prototypal Inheritence 12 | - [x] Dan Abramov's Just Javascipt 13 | - [x] Primitive and Reference Types 14 | - [ ] Scoping 15 | - [ ] Closures 16 | - [ ] The Event Loop 17 | - [ ] Callbacks and Promises 18 | - [ ] Variable and function hoisting 19 | - [ ] Event Delegation - used to reduce the number of event listeners attached to the items. 20 | - [ ] Debouncing and Throttling 21 | - [ ] ES6 features 22 | - [ ] CORS 23 | - [ ] Deep copy vs Shallow copy 24 | - [ ] React - lifecycle method 25 | - [ ] React Hooks 26 | - [ ] Virtual DOM 27 | - [ ] Redux 28 | - [ ] Performance of web app 29 | - [ ] Caching 30 | - [x] Module Bundler -------------------------------------------------------------------------------- /call-apply-bind/index.js: -------------------------------------------------------------------------------- 1 | let name = { 2 | firstName: "Abhishek", 3 | lastName: "Naidu", 4 | printFullName: function () { 5 | console.log(this.firstName + " " + this.lastName); 6 | }, 7 | }; 8 | name.printFullName(); 9 | 10 | let exampleForCall = { 11 | firstName: "Bongs", 12 | lastName: "Nad", 13 | }; 14 | 15 | // We want to print full name of object exampleForCall, so we can 16 | // borrow fuction from object name using call(), 17 | //so basically, it allows us to borrow functions from other objects. 18 | 19 | name.printFullName.call(exampleForCall); 20 | 21 | // Note: each and every function in javascript has access to these 3 methods. 22 | // But most of the time we'll not have functions inside of an object, it needs to be declared separately like: 23 | 24 | let userInfo = { 25 | firstName: "Abhishek", 26 | lastName: "Naidu", 27 | }; 28 | 29 | let printFullName = function (hometown, state) { 30 | console.log( 31 | this.firstName + " " + this.lastName + " from " + hometown + "," + state 32 | ); 33 | }; 34 | 35 | printFullName.call(userInfo, "Bilaspur", "Chattisgarh"); 36 | 37 | // call(reference i.e this, comma separated values(arguments)) 38 | // The difference between call and apply is just the arguements how it is passed. It's passed as an arrayList. 39 | 40 | printFullName.apply(userInfo, ["Bilaspur", "Chattisgarh"]); 41 | 42 | // TIP : 43 | // Call takes comma-separated values, can be remembered as `C's` 44 | // and Apply takes arrayList as an arguement, it can also be remembered as `A's`. 45 | 46 | // bind(), same as call() but instead of calling, it creates a copy of that function and binds the 47 | // function which is being passed and also returns a new function 48 | // It just used to bind and keep a copy of that method and can be used it later. 49 | 50 | let printMyName = printFullName.bind(userInfo, "Bilaspur", "Chattisgarh"); 51 | // we'll need to invoke to see the results 52 | printMyName(); 53 | -------------------------------------------------------------------------------- /closures/closures.js: -------------------------------------------------------------------------------- 1 | // closures are basically when an inner function has access to variables outside of it's scope -------------------------------------------------------------------------------- /currying/index.js: -------------------------------------------------------------------------------- 1 | // A curried function is a function that takes multiple arguments ONE at a time!!!!! 2 | 3 | let addition = function (x, y) { 4 | console.log(x + y); 5 | }; 6 | 7 | let addition2 = addition.bind(this, 2); 8 | // 2 here points to x and in order to curry we'll need to pass 9 | // other variables seperately like: 10 | // In order to see currying in action, we intentionally pass both the arguments 11 | addition2(5); 12 | 13 | // In this way we'll curry functions using bind(), we'll make a copy of a function, 14 | // and then we'll create more methods out of it, by pre-setting some arguments inside of a function. 15 | 16 | // Another way of doing currying is by using function closures! 17 | 18 | let add = function (x) { 19 | return function (y) { 20 | console.log(x + y); 21 | }; 22 | }; 23 | 24 | let check = add(2); 25 | check(5); 26 | -------------------------------------------------------------------------------- /debouncing/index.js: -------------------------------------------------------------------------------- 1 | // debouncing can be efficiently used to increase the performance of the frontend applications. 2 | // Anything that has complex computations can be simplified or deferred for a while using debouncing. 3 | 4 | // one of the most famous use case of debouncing is to control the API rate. 5 | 6 | // Suppose we want to design a search bar, which shows suggested filters when we're typing along, 7 | // at first we make n number of calls to the API, that fetches data for each of the keystroke event like this: 8 | const getData = () => { 9 | console.log("Fetching Data From API"); 10 | }; 11 | 12 | // To solve the problem of calling this getData function again again, we can use debouncing, 13 | // we want to make sure, that it doesn't get called again again, It should be only be called, 14 | // when a user keystrokes after a pause. 15 | 16 | const debounce = function (fn, d) { 17 | let timer; 18 | return function () { 19 | // to fix our this variable and the context, we'll need to do somethings to make it optimal. 20 | // so these are the basic things which are required to keep a check, such that the environment or the lexical scope 21 | // where this function is running is correct 22 | let context = this; 23 | let params = arguments; 24 | 25 | // to stop the method, we first need store the setTimeout in a variable, 26 | // and then we'll need to clear it 27 | // If the time between two keystrokes is less than 0.3 seconds, the timer resets. 28 | clearTimeout(timer); 29 | timer = setTimeout(() => { 30 | // we've used apply to basically fix our this and context parts. 31 | fn.apply(context, params); 32 | }, d); 33 | }; 34 | }; 35 | 36 | const betterFunction = debounce(getData, 300); // (function, delay) 37 | // here delay refers to, if the difference between two keystrokes is 300 ms, then only call getData() 38 | -------------------------------------------------------------------------------- /defer-async/index.js: -------------------------------------------------------------------------------- 1 | // async and defer are boolean attributes, which are used 2 | // along with script tags to load the external scripts efficiently to our webpage 3 | // when we load the webpage, mostly two things happening behind the scenes 4 | // i.e HTML parsing and loading of scripts 5 | 6 | // In Normal Case i.e without using async and defer 7 | // first HTML parsing goes on, when the normal script tag is encountered, 8 | // it start's fetching, after that it executes those scripts, then again the HTML parsing continues. 9 | 10 | // In Case of async i.e 18 | 19 | 20 | -------------------------------------------------------------------------------- /event-delegation/index.js: -------------------------------------------------------------------------------- 1 | // Event Delegation is nothing but techiniques to make event listerners to work more efficiently. 2 | // let's suppose if we've any e-commerce web-site, then we may have many categories and sub-categories in that 3 | // and each of the subcategories is attached to some kind of events. So we've many such events for just a single 4 | // category. As we know events cost huge, so we need to decrease the amount of events, we currently have, and we 5 | // do this by using Event Delegation 6 | 7 | // Just attaching a single event listener to the parent div that can listen to each of the events of it's child. 8 | 9 | document.querySelector("#category").addEventListener("click", (e) => { 10 | console.log(e.target.id); 11 | if (e.target.tagName === "LI") { 12 | window.location.href = "/" + e.target.id; 13 | } 14 | }); 15 | 16 | // Benefits of Event Delegation, 17 | // 1 -> Memory, As we're attaching just a single event, It saves a lot of memory! 18 | // 2 -> Writing less code! 19 | 20 | // Cons 21 | // All the events are not bubbled up, some of them like blur, focus and resizing of the window, scrolling 22 | // are not able to bubble up to the Hierarchy! 23 | 24 | // One more example can be of TODO List -------------------------------------------------------------------------------- /imperative-declarative/content.md: -------------------------------------------------------------------------------- 1 | ### Imperative paradigm 2 | 3 | These are Procedural and object-oriented programming like C, C++, C#, PHP, Java and of course Assembly. 4 | We focus more on creating statements that change program states by creating algorithms that tell the computer how to do things with the help of conditinal statements, loops and class inheritence. 5 | 6 | ### Declarative paradigm 7 | 8 | It focuses more on building logic of software without actually **describing its flow**. Examples would be HTML, XML, CSS, SQL, etc. For example with HTML you use `` to tell browser to display an image and you don’t care how it does that. 9 | -------------------------------------------------------------------------------- /module-bundler/module-bundler.md: -------------------------------------------------------------------------------- 1 | These module bundler's exist, because previously, there's this issue called implicit dependency between the javascript files, one solution can be to merge all the javascript files into one solution, this is what tools like `gulp` and `grunt` do(but takes huge amount to maintain it), but we need a tool that recognises dependencies and graphs them and combines files to respect of their dependencies order, that's what the module bundler's do, some of the examples like Web pack, roll up, parcel and etc. -------------------------------------------------------------------------------- /polyfills/polyfill-for-bind.js: -------------------------------------------------------------------------------- 1 | // polyfill is nothing, but creating our own functions to make it run in every browser. 2 | 3 | // Our Task is to create our own implementation for bind function. 4 | 5 | let userInfo = { 6 | firstName: "Abhishek", 7 | lastName: "Naidu", 8 | }; 9 | 10 | let printName = function (hometown, state) { 11 | console.log( 12 | this.firstName + " " + this.lastName + " from " + hometown + "," + state 13 | ); 14 | }; 15 | 16 | let printMyName = printName.bind(userInfo, "Bilaspur", "Chattisgarh"); 17 | printMyName(); 18 | 19 | // Since function is a class, so in order to attach a method/function to the classes in javascript, we use prototypes 20 | // Function.prototype because then every method has access to this myBind function. 21 | Function.prototype.myBind = function (...args) { 22 | // ...args is basically extracting all the info that is being passed. 23 | // here this => printName() 24 | let obj = this; 25 | let params = args.slice(1); 26 | return function (...args2) { 27 | // if ...args is an arraylist(more than 1 argument is passed), we cannot use call, 28 | // we'll need to use apply for that. 29 | // concating the two arrays, when we've more than 2 arguments. 30 | obj.apply(args[0], [...params, ...args2]); 31 | }; 32 | }; 33 | 34 | let printUserName = printName.myBind(userInfo, "Bilaspur"); 35 | printUserName("Chattisgarh"); 36 | -------------------------------------------------------------------------------- /primitive-and-reference-types/primitive-and-reference-types.js: -------------------------------------------------------------------------------- 1 | const user = { 2 | // the name here stores the actual value 3 | name: 'Abhishek', // string(primitives) 4 | // since location is an object, it stores the reference to an object 5 | // instead of storing the actual values 6 | location: { // Objects, arrays are both reference types 7 | city: 'Bilaspur', 8 | state: 'CG' 9 | } 10 | }; 11 | 12 | // One thing to note here, is that, these both Object.assign() and {...user} do a shallow copy, 13 | // they don't do a deep nested copy, so for deep nested copy - 14 | // we can either use the normal vanilla way to loop over the object and copy each and every values; 15 | // or we can use this lodash method called cloneDeep 16 | const deepNestedCopy = _.cloneDeep(user); // we can't change the properties 17 | const copy = Object.assign({}, user); // Also {...user} 18 | 19 | copy.name = 'Nads'; 20 | copy.location.city = 'Jabalpur'; 21 | 22 | console.log('original :', user); 23 | console.log('copy :', copy); -------------------------------------------------------------------------------- /prototype-prototypal-inheritance/index.js: -------------------------------------------------------------------------------- 1 | // Almost all objects in Javascript pass down properties through a prototype chain. 2 | // We call this chain, prototypal inheritance. The child of the object "inherits" properties from its parent. 3 | // The objects inherit methods and properties from Object.prototype 4 | // The prototype property also has an accessor property called __proto__ that creates 5 | // a link between the current object and points to the object it was created from, the "prototype". 6 | 7 | // Inheritance helps one object to access properties of another object 8 | // Whenever we create a JS object or a function, then JS engine without even telling 9 | // attaches few built-in properties and functions and these all come via Prototypal => __proto__ 10 | 11 | let arr = ['Abhishek', 'Naidu']; 12 | let object = { 13 | fName: 'Abhishek', 14 | lName: 'Naidu', 15 | getFullInfo: function () { 16 | console.log(this.fname + this.lname); 17 | }, 18 | }; 19 | 20 | function fun() { 21 | // 22 | } 23 | 24 | // So it creates a object named __proto__ and attaches to our object 25 | // ex - arr.__proto__ === Array.prototype 26 | // also arr.__proto__.__proto__ === Object.prototype 27 | // and arr.__proto__.__proto__.__proto__ === null which is the end of the chain! 28 | 29 | // for 2nd one - 30 | // object.__proto__ === Object.prototype 31 | // but object.__proto__.__proto__ === null 32 | 33 | // for functions - 34 | // fun.__proto__ === Function.prototype 35 | // fun.__proto__.__proto__ === Object.prototype 36 | // fun.__proto__.__proto__.__proto__ === null 37 | 38 | // This all summarizes that everything in JS is nothing but objects!!! 39 | // Whether you make arr,func,object, it is actually down the prototype chain ends up being an object. 40 | // this is what we call the protype chain, and it ends up being null. 41 | 42 | let object2 = { 43 | fname: 'Raj', 44 | }; 45 | // if we do this, but it's not advisable to do this. 46 | object2.__proto__ = object; 47 | // we can access the properties the object in object2! 48 | object.getFullInfo(); // Abhishek Naidu 49 | object2.getFullInfo(); // Raj Naidu 50 | 51 | // Talking about Prototypes : 52 | Function.prototype.mybind = function () { 53 | console.log('nads'); 54 | }; 55 | 56 | // Each and every fxn we now create, will have now access to mybind method 57 | // just because we set the mybind to prototype. 58 | 59 | function nads() {} 60 | 61 | function nads2() {} 62 | --------------------------------------------------------------------------------