├── Garbage_Collector.js ├── Scope.js ├── Array.js ├── LetConst.js ├── Hoisting3.js ├── ScopeChain.js ├── Callbacks.js ├── Closure.js ├── LetConst2.js ├── Hoisting2.js ├── EventLoop1.js ├── Closure2.js ├── README.md ├── EventListeners.js ├── V8_Architecture.md ├── LetConst_FE.js ├── Hoisting.js ├── setTimeout_Closure.js ├── EventLoop2.js ├── setTimeout_Issue.js ├── Closure_Interview.js ├── index.html ├── Functions.js ├── Closure3.js └── EventLoopDoubts_.md /Garbage_Collector.js: -------------------------------------------------------------------------------- 1 | function x(){ 2 | var a = 10, b = 20; 3 | return function(){ 4 | console.log(a); 5 | } 6 | } 7 | x()(); -------------------------------------------------------------------------------- /Scope.js: -------------------------------------------------------------------------------- 1 | function a() { 2 | var b = 10; 3 | c(); 4 | function c(){ 5 | console.log(b); 6 | } 7 | } 8 | 9 | a(); 10 | console.log(b); -------------------------------------------------------------------------------- /Array.js: -------------------------------------------------------------------------------- 1 | const arr1 = ['a','b','c']; 2 | const arr2 = ['b','a','c']; 3 | 4 | console.log( 5 | arr1.sort()===arr1, 6 | arr2.sort()===arr2, 7 | arr1.sort()===arr2.sort() 8 | ); 9 | -------------------------------------------------------------------------------- /LetConst.js: -------------------------------------------------------------------------------- 1 | console.log(a); 2 | 3 | const c = 1000; 4 | 5 | c = 2000; 6 | 7 | let a = 1000; 8 | 9 | var a = 'string'; 10 | 11 | 12 | 13 | // console.log(a); 14 | -------------------------------------------------------------------------------- /Hoisting3.js: -------------------------------------------------------------------------------- 1 | console.clear(); 2 | 3 | function foo(){ 4 | console.log(this); 5 | } 6 | 7 | foo(); 8 | 9 | function foo(){ 10 | console.log(this); 11 | } 12 | 13 | new foo(); -------------------------------------------------------------------------------- /ScopeChain.js: -------------------------------------------------------------------------------- 1 | const a = 20; 2 | { 3 | const a = 200; 4 | { 5 | const a = 2000; 6 | console.log(a); 7 | } 8 | console.log(a); 9 | } 10 | console.log(a); -------------------------------------------------------------------------------- /Callbacks.js: -------------------------------------------------------------------------------- 1 | //Callback Function 2 | setTimeout(function(){ 3 | console.log("Timeout"); 4 | }, 5000); 5 | 6 | function x(y){ 7 | console.log("x"); 8 | y(); 9 | } 10 | 11 | x(function y(){ 12 | console.log("y"); 13 | }); -------------------------------------------------------------------------------- /Closure.js: -------------------------------------------------------------------------------- 1 | function x(){ 2 | let a = 7; 3 | function y(){ 4 | console.log(a); 5 | } 6 | a = 100; 7 | // y(); 8 | return y; 9 | } 10 | 11 | let z = x(); 12 | console.log(z); 13 | //................... 14 | z(); -------------------------------------------------------------------------------- /LetConst2.js: -------------------------------------------------------------------------------- 1 | var a = 100; 2 | console.log(a); 3 | function x(){ 4 | var a = 10; 5 | let b = 20; 6 | const c = 30; 7 | console.log(a); 8 | console.log(b); 9 | console.log(c); 10 | } 11 | x(); 12 | console.log(a); 13 | -------------------------------------------------------------------------------- /Hoisting2.js: -------------------------------------------------------------------------------- 1 | console.clear(); 2 | 3 | 4 | var x = 1; 5 | a(); 6 | b(); 7 | console.log(x); 8 | 9 | function a() { 10 | var x = 10; 11 | console.log(x); 12 | } 13 | 14 | function b(){ 15 | var x = 100; 16 | console.log(x); 17 | } 18 | -------------------------------------------------------------------------------- /EventLoop1.js: -------------------------------------------------------------------------------- 1 | console.log("Start"); 2 | 3 | setTimeout(function cbT() { 4 | console.log("CB SetTimeout"); 5 | }, 5000); 6 | 7 | // fetch("https://api.github.com").then(function cbF(){ 8 | // console.log("CB GitHub"); 9 | // }); 10 | 11 | console.log("End"); 12 | -------------------------------------------------------------------------------- /Closure2.js: -------------------------------------------------------------------------------- 1 | function z(a){ 2 | let b = 900; 3 | return function x(b){ 4 | let a = 100; 5 | a = 500; 6 | return function y(c){ 7 | console.log(a, b, c); 8 | } 9 | 10 | } 11 | } 12 | 13 | z(10)('hello you!')(20); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Welcome to Namaste `JavaScript` 2 | 3 | This is my practice repository which contains all the code snippets which I have wriiten while watching the playlist of Namaste JS on Youtube by [@Akshay Saini](https://youtube.com/playlist?list=PLlasXeu85E9cQ32gLCvAvr9vNaUccPVNP) 4 | -------------------------------------------------------------------------------- /EventListeners.js: -------------------------------------------------------------------------------- 1 | // Event Listeners 2 | 3 | function attachEventListeners() { 4 | let count = 0; 5 | document 6 | .querySelector("#clickMe") 7 | .addEventListener("click", function handler() { 8 | console.log("clicked", ++count); 9 | }); 10 | } 11 | 12 | attachEventListeners(); 13 | -------------------------------------------------------------------------------- /V8_Architecture.md: -------------------------------------------------------------------------------- 1 | ### Home Work : 2 | 3 | 1. Mark and Sweep Algorithm 4 | 2. Inling 5 | 3. Copy Elision 6 | 4. Inline Caching 7 | 5. ECMAScript 8 | 6. Ignition Interpreter 9 | 7. TurboFan Optimising Compiler 10 | 8. Orinoco Garbage Collector 11 | 9. OilPan GC 12 | 10. [Astexplorer.net](https://astexplorer.net/) 13 | -------------------------------------------------------------------------------- /LetConst_FE.js: -------------------------------------------------------------------------------- 1 | // function a(){ 2 | // x = 20; 3 | // let x = 10; 4 | // console.log(x); 5 | // } 6 | 7 | // a(); 8 | 9 | (function(){ 10 | var name = new String("Sunny"); 11 | name.toString = function(){return `Hey`}; 12 | console.log(name.toString()); 13 | console.log(typeof name); 14 | })(); -------------------------------------------------------------------------------- /Hoisting.js: -------------------------------------------------------------------------------- 1 | console.clear() 2 | // console.log(typeof foo); 3 | // function foo(){ 4 | // return "bar"; 5 | // } 6 | 7 | // var foo = "bar"; 8 | 9 | foo(); 10 | 11 | function foo() { 12 | console.log(1); 13 | } 14 | 15 | var foo = function() { 16 | console.log(2); 17 | }; 18 | 19 | function foo() { 20 | console.log(3); 21 | } 22 | 23 | foo(); -------------------------------------------------------------------------------- /setTimeout_Closure.js: -------------------------------------------------------------------------------- 1 | function x(){ 2 | 3 | for(var i = 1; i<=5; i++){ 4 | 5 | function close(i){ 6 | 7 | setTimeout(function(){ 8 | console.log(i); 9 | }, i*1000); 10 | 11 | } 12 | 13 | close(i); 14 | } 15 | 16 | console.log("Namaste JS"); 17 | } 18 | 19 | x(); 20 | -------------------------------------------------------------------------------- /EventLoop2.js: -------------------------------------------------------------------------------- 1 | function callWhileLoop() { 2 | let startTime = new Date().getTime(); 3 | while (new Date().getTime() - startTime < 10000) { 4 | console.log("Blocked Main Thread!"); 5 | } 6 | document.querySelector("#clickMe").addEventListener("click", function cb() { 7 | console.log("Button Clicked"); 8 | }); 9 | } 10 | 11 | callWhileLoop(); 12 | -------------------------------------------------------------------------------- /setTimeout_Issue.js: -------------------------------------------------------------------------------- 1 | console.log("Start"); 2 | 3 | setTimeout(function cb(){ 4 | console.log("Callback"); 5 | },5000); 6 | 7 | console.log("End"); 8 | 9 | let startTime = new Date().getTime(); 10 | let endTime = startTime; 11 | 12 | while (endTime < startTime + 10000){ 13 | endTime = new Date().getTime(); 14 | } 15 | 16 | console.log("While Loop Expired"); -------------------------------------------------------------------------------- /Closure_Interview.js: -------------------------------------------------------------------------------- 1 | function Counter(){ 2 | var count = 0; 3 | 4 | this.incrementCounter = function(){ 5 | count++; 6 | console.log(count); 7 | } 8 | 9 | this.decrementCounter = function(){ 10 | count--; 11 | console.log(count); 12 | } 13 | } 14 | 15 | var firstCounter = new Counter(); 16 | firstCounter.incrementCounter(); 17 | firstCounter.incrementCounter(); 18 | firstCounter.decrementCounter(); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Functions.js: -------------------------------------------------------------------------------- 1 | // Function Statement , Function Declaration 2 | function a(){ 3 | console.log("Function Statement"); 4 | } 5 | 6 | // Function Expression 7 | var b = function (){ 8 | console.log("Function Expression"); 9 | } 10 | 11 | a(); 12 | b(); 13 | 14 | //Anonymous Function 15 | // function() { 16 | 17 | // } 18 | 19 | //Named Function Expression 20 | var c = function x(){ 21 | console.log("Named Function Expression"); 22 | console.log(x); 23 | } 24 | 25 | c(); 26 | // x(); // not accessible 27 | 28 | //First Class Functions 29 | // Ability to used like values, arguments and returnable values -------------------------------------------------------------------------------- /Closure3.js: -------------------------------------------------------------------------------- 1 | // var c = 3; 2 | // function add(a) { 3 | // return function (b) { 4 | // return a+b+c; 5 | // } 6 | // } 7 | 8 | // add(1)(2); 9 | 10 | // function add(a) { 11 | // c = 3; 12 | // return function (b) { 13 | // return a+b+c; 14 | // } 15 | // } 16 | 17 | // add(1)(2); 18 | // console.dir(add(1)); 19 | 20 | // var counter = function (){ 21 | // var _count = 0; 22 | // return function(){ 23 | // return ++_count; 24 | // } 25 | // } 26 | 27 | // var count = counter(); 28 | // console.log(count()); 29 | // console.log(count()); 30 | // console.log(count()); 31 | 32 | // console.dir(count); -------------------------------------------------------------------------------- /EventLoopDoubts_.md: -------------------------------------------------------------------------------- 1 | 1. When does the event loop actually start ? - Event loop, as the name suggests, is a single-thread, loop that is `almost infinite`. It's always running and doing its job. ❤️ 2 | 3 | 2. Are only asynchronous web api callbacks are registered in web api environment? - YES, the synchronous callback functions like what we pass inside map, filter and reduce aren't registered in the Web API environment. It's just those async callback functions which go through all this. 4 | 5 | 3. Does the web API environment stores only the callback function and pushes the same callback to queue/microtask queue? - Yes, the callback functions are stored, and a reference is scheduled in the queues. Moreover, in the case of event listeners(for example click handlers), the original callbacks stay in the web API environment forever, that's why it's adviced to explicitly remove the listeners when not in use so that the garbage collector does its job. 6 | 7 | 4. How does it matter if we delay for setTimeout would be 0ms. Then callback will move to queue without any wait ? 8 | No, there are trust issues with `setTimeout()` 😅. The callback function needs to wait until the Call Stack is empty. So the 0 ms callback might have to wait for 100ms also if the stack is busy. 9 | 10 | 5. Everything which goes into the callback queue waits for the Call Stack to be empty. 11 | So in that case, even the button clicks won't respond. 🤷🏻‍♂️ 12 | Haven't you seen some websites just freeze randomly and just nothing happens? This could be one of the reasons for that. 13 | 14 | `Homework`: Use the while loop to block the main thread for around 30 seconds and also have a button on the page with a click event listener. 15 | You'll see the page frozen and button not responding. 16 | 17 | `Learnings here`: Never block the main thread! 18 | --------------------------------------------------------------------------------