Event Loop

JavaScript is a single-threaded synchronous language. JS engine uses call-stack to manage execution. but what if we have to perform asynchronous task? Event Loop Namaste JS event loop gif In case of event listeners document.getElementById("btn").addEventListener("click", function cb() { console.log("callback"); }); for above code; when this line is executed, Web API (window object) attaches click event listener to the callback function and pushes this callback to the callback queue upon occurrence of event “click”....

July 23, 2024 · 1 min

JavaScript Engine

component of JavaScript Engine Parsing Tokenizing by Syntax parser => AST (abstract syntax tree) JIT compilation JavaScript : Interpreted or Compiler depends upon js engine Compilation Just In Time compilation happens when AST is passed to interpreter and it can talk with compiler to check if it is optimized. Memory heap stores variables Garbage collection constantly checks for free memories. (uses mark and sweep algorithm) V8 Engine

July 22, 2024 · 1 min

setTimeout not trusted

console.log("start"); setTimeout(function cb() { console.log("callback"); }, 5000); console.log("end"); lets say during execution of this code, setTimeout registers this callback into web APIs, then there is 10^6 lines of code to be executed that takes 10 seconds; but out timeout takes 5 seconds to execute; but after 5 second main thread is still used by our program so we can’t execute this callback; after another 5 second, when main thread is freed, this callback is executed...

July 21, 2024 · 1 min

Higher Order Functions

what is Higher Order Functions? a function that take function as argument or return a function is known as Higher order Function. use of Higher order function in functional programming const area = function (radius){ return Math.PI * radius * radius; } const calculate = function (arr, logic){ const output = []; for(let i=0; i<arr.length; i++){ output.push(logic(arr[i])) } } console.log(calculate([1,2,3,4], area)); Map, filter and reduce Map // used for array transformation const arr = [1, 2, 3, 4, 5]; const double = arr....

July 20, 2024 · 1 min

Callback Hell

Importance of Callbacks A callback is a function that is passed as an argument to another function and is executed after the completion of that function. Callbacks are especially useful for handling asynchronous operations such as: API requests. Database queries. Reading files from the filesystem. Why are Callbacks Important? They help ensure that code is executed in order, especially when dealing with asynchronous code. They prevent the program from being blocked while waiting for an operation to complete, allowing other code to run in the meantime....

July 19, 2024 · 3 min

Promises

What is a Promise? A Promise is an object in JavaScript that represents the eventual completion (or failure) of an asynchronous operation and its resulting value. It’s used to handle asynchronous tasks more efficiently, providing cleaner, more readable code than callback functions. A Promise can be in one of three states: Pending: The promise is still in progress (neither fulfilled nor rejected). Fulfilled: The promise has completed successfully with a result....

July 18, 2024 · 3 min

Async/Await

1. What is async? async is a keyword used to define asynchronous functions. When a function is marked async, it implicitly returns a promise. 2. What is await? await is a keyword used inside an async function to pause execution until a promise is resolved. It can only be used inside an async function and effectively makes asynchronous code behave like synchronous code. 3. How did we handle promises before async/await?...

July 17, 2024 · 4 min