├── closures └── closures.js ├── module-bundler └── module-bundler.md ├── event-delegation ├── index.html └── index.js ├── imperative-declarative └── content.md ├── currying └── index.js ├── README.md ├── event-bubbling-and-capturing └── index.js ├── primitive-and-reference-types └── primitive-and-reference-types.js ├── defer-async └── index.js ├── polyfills └── polyfill-for-bind.js ├── debouncing └── index.js ├── call-apply-bind └── index.js ├── prototype-prototypal-inheritance └── index.js └── LICENSE /closures/closures.js: -------------------------------------------------------------------------------- 1 | // closures are basically when an inner function has access to variables outside of it's scope -------------------------------------------------------------------------------- /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. -------------------------------------------------------------------------------- /event-delegation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | EVENT DELEGATION 7 | 8 | 9 |
10 | 15 |
16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 -------------------------------------------------------------------------------- /event-bubbling-and-capturing/index.js: -------------------------------------------------------------------------------- 1 | // Event Bubbling and Event Capturing is the most used terminology in JavaScript at the time of event flow. 2 | 3 | // Event Bubbling and Capturing are the two different ways of propagation in a DOM tree 4 | // Event Capturing can also be called as Event Trickling. 5 | 6 | // Event Bubbling : Bubbles out in the DOM tree in the order child -> parent -> grandparent 7 | // that is up the Hierarchy! 8 | // Event Trickling : reverse of bubbling, trickles down the DOM tree 9 | // in the order grandparent -> parent -> child 10 | // according to w3, first event capturing happens then bubbling. 11 | // but we change it also by adding a third parameter to event listeners called useCapture 12 | // which is a boolean flag. Default is false, if not used. 13 | // .addEventListener('click' , () => {} , useCapture) 14 | // Since event propagations are heavy costs, we can make efficient by using a event 15 | // method called stopPropagation 16 | // i.e .addEventListener('click', (e) => { e.stopPropation() }, true ); 17 | -------------------------------------------------------------------------------- /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); -------------------------------------------------------------------------------- /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 -------------------------------------------------------------------------------- /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