feat: 🎸 added next topics of namaste js

 added next topics of namaste js

Author: Pratham82

2024 Prep/namaste_js/13_first_class_functions.js

@@ -0,0 +1,48 @@
+// dummy() // Executes since dummy is stored while memory creation phase
+// dummy2() // TypeError b is no a function
+// * Function statement aka Function Declaration
+function dummy() {
+  console.log('dummy called')
+}
+
+// * Function expression
+var dummy2 = function () {
+  console.log('dummy 2 called')
+  return 'dummy2'
+}
+
+// * Anonymous Function
+/**
+ function(){
+
+ }
+ */
+
+// * Named function expression
+const dummy3 = function newDummy() {
+  console.log('newDummy called')
+}
+
+dummy3()
+// newDummy() // ReferenceError: newDummy is not defined
+
+// Difference Parameters and Arguments
+const dummy4 = function ({ parameter1, parameter2 }) {
+  console.log({ parameter1, parameter2 })
+}
+
+dummy4({ parameter1: 'argument 1', parameter2: 'argument 2' }) // the values which are being passed
+
+// * First class functions in JS
+// * The ability to use functions as values, and can be passed as arguments to another functions and can be returned from the functions this ability is known as first class functions
+
+function testFunction() {
+  console.log('Test function logged')
+}
+
+const functionRunner = function (param) {
+  return param
+}
+
+const val = functionRunner(testFunction)
+val()

2024 Prep/namaste_js/14_callback_fucntions_event_listeners.js

@@ -0,0 +1,46 @@
+// JavaScript is a synchronous and single-threaded language
+//* What is a Callback Function in JavaScript
+
+// function x() {}
+
+// here y is callback function
+// x(function y() {})
+
+// Blocking the main thread
+// * we should not block the main thread, any operation which is supposed to take much time should be async.
+setTimeout(() => {
+  console.log({
+    'Current Time': new Date().toLocaleString(),
+  })
+  console.log('Timer stopped')
+}, 5000)
+
+function x(func) {
+  console.log('x')
+  func()
+}
+
+x(function y() {
+  console.log('y')
+})
+
+console.log({
+  'Current Time': new Date().toLocaleString(),
+})
+
+// Deep about Event listeners
+// Closures Demo with Event Listeners
+function attachEventListener() {
+  // * this will form a closure
+  let count = 0
+  const btn = document.getElementById('my-btn')
+  btn.addEventListener('click', function () {
+    console.log({ msg: 'My button clicked' })
+    count++
+  })
+  console.log({ count })
+}
+attachEventListener()
+
+// Power of Callbacks?
+// Scope Demo with Event listeners

2024 Prep/namaste_js/15_event_loop.js

@@ -0,0 +1,58 @@
+//
+/**
+ * * Web APIs
+ * 1. setTimeout()
+ * 2. DOM APIs
+ * 3. fetch()
+ * 4. localStorage()
+ * 5. console.log()
+ * 6. location
+ *
+ * * All of the above Web APIs are accessible via window object in JS call stack
+ */
+
+// console.log('Start')
+// setTimeout(() => {
+//   console.log('Callback')
+// }, 3000)
+// console.log('End')
+
+/*
+
+console.log('Start')
+
+* if the event handler will stay in the web apis environment, we explicitly remove that event listener or we close the browser
+document.getElementById('btn').addEventListener('click', function cb() {
+  console.log('Button clicked')
+})
+console.log('End')
+*/
+
+/**
+// * Why do we need a callback queue
+  For handling the callbacks to execute in order and sending it to call stack one by one
+ */
+
+// console.log('A')
+// setTimeout(() => console.log('C'), 1000)
+// Promise.resolve().then(() => console.log('B'))
+// console.log('D')
+
+/*
+ * Execution order: 
+  1. A Synchronous calls, no timers or promises involved so just goes to call stack and gets executed
+  2. D -\\ -
+  3. B Since promises runs in Microtask queue it will be executed first (Microtask queue has higher priority in than callback queue)
+  4. C After the timer completed the callback goes to callback queue and executes it in the end
+
+ */
+
+console.log('A')
+setTimeout(() => console.log('C'), 1000)
+Promise.resolve().then(setTimeout(() => console.log('B'), 1000))
+console.log('D')
+
+/**
+ * A D C B
+ * Since in the promises there's also a setTimeout so it will run in the order. First callback in setTimeout and second callback in setTimeout
+ */

2024 Prep/namaste_js/17_js_engine_setTimeout.js

@@ -0,0 +1,42 @@
+// console.log('START')
+
+// setTimeout(() => {
+//   console.log('Callback')
+// }, 5000)
+
+// console.log('END')
+
+/*
+ * some code which need lot of time to execute
+ * This code will block the main thread, and won't allow the callback queue to perform it's operations
+ * So if the following line of code is taking 10 seconds to execute,
+ * the callback inside the setTimeout will be ran after that, since the main thread is still blocked
+ */
+
+// -------------------------------
+// * Simulation of blocking thread
+
+console.log('START')
+setTimeout(() => {
+  console.log('Callback')
+}, 1000)
+
+console.log('END')
+
+let startDate = new Date().getTime()
+let endDate = startDate
+
+while (endDate < startDate + 5000) {
+  endDate = new Date().getTime()
+}
+
+console.log('While expires')
+
+/*
+Output:
+
+START
+END
+While expires (Expired after 5 sec)
+Callback (After main thread is free, this callback is executed)
+*/