Async JS

How JS executes the code?

Javascript is a single-threaded programming language, meaning it can execute one task at a time. This single thread of execution is managed by Javascript engine, which follows a specific execution model:

Reasons why JS is single threaded?

Origins in web browsers: JavaScript was originally developed as a client-side scripting language for web browsers to provide dynamic behavior and interactivity to web pages. Browsers, being inherently single-threaded environments, influenced the design of JavaScript to be single-threaded as well.
Event Driven Model: JavaScript's single-threaded nature is well-suited for event-driven programming, which is common in web development. In this model, user interactions, such as clicks and keystrokes, trigger events that are handled by event listeners. Having a single thread simplifies event handling and ensures that UI updates and event processing are synchronized.
Avoiding Race Conditions: By restricting execution to a single thread, JavaScript avoids the complexity of dealing with race conditions and concurrent access to shared resources, which are common pitfalls in multi-threaded programming. This simplifies the language and makes it more accessible to developers.
Security Considerations: Running JavaScript code in a sandboxed environment like a web browser requires strict security measures to prevent malicious code from accessing sensitive resources or interfering with other browser processes. A single-threaded execution model helps enforce these security boundaries more effectively.

The call stack is a fundamental concept in JavaScript's execution model. It keeps track of the execution context of function calls in a Last In, First Out (LIFO) manner. Here's how it works:

Functions Calls: Whenever a function is called in JavaScript, a new frame representing that function's execution context is pushed onto the call stack.
Execution Context: An execution context contains information about the function's scope, variables, parameters, and the current point of execution within the function's code.
Stack Frame: Each entry in the call stack is known as a stack frame, which corresponds to a function call. It includes the function's arguments, local variables, and a reference to the line of code where the function was called.
LIFO Principle: The call stack operates on the Last In, First Out principle, meaning that the most recently added stack frame is the first one to be removed when a function completes its execution.
Function Execution: As functions are called and executed, stack frames are added to the call stack. When a function completes its execution, its stack frame is popped off the stack, and control returns to the calling function.
Stack Overflow: If the call stack becomes too deep due to excessive recursion or nested function calls without returning, it can lead to a stack overflow error, causing the JavaScript runtime to terminate the program.

function foo() {
  console.log('foo');
}

function bar() {
  console.log('bar');
  foo(); // Call to foo() inside bar()
}

function baz() {
  console.log('baz');
  bar(); // Call to bar() inside baz()
}

baz(); // Call to baz() from the global scope

In this example, when baz() is called from the global scope, the following sequence of events occurs:

"baz()" is pushed onto the call stack.
Inside "baz()", "bar()" is called, so "bar()" is pushed onto the call stack.
Inside "bar()", "foo()" is called, so "foo()" is pushed onto the call stack.
Inside "foo(), "console.log('foo')" is executed, and then "foo()" is popped off the call stack.
Control returns to "bar()", which then executes "console.log('bar')" and pops off the call stack.
Control returns to "baz()", which then executes "console.log('baz')" and pops off the call stack.
Finally, control returns to the global scope.

What is the difference between Sync and Async in JS?

In JavaScript, "Sync" and "Async" refer to different modes of executing code:

Synchronous (Sync):
- In synchronous code execution, statements are executed sequentially, one after another, in the order they appear in the code.
- Each statement must wait for the previous one to finish executing before it can start.
- Synchronous code blocks the execution thread, meaning that no other code can run until the current block of code completes.
- Synchronous operations are blocking, meaning they can cause the program to pause or hang if they take too long to complete.
```
  console.log('Step 1');
  console.log('Step 2');
  console.log('Step 3');
  /* Output:
  Step 1
  Step 2
  Step 3
  */
```
Asynchronous (Async):
- In asynchronous code execution, statements can be scheduled to run later without blocking the main execution thread.
- Asynchronous operations do not wait for each other to finish and can be executed concurrently.
- Asynchronous code allows non-blocking behavior, meaning that other code can continue to run while waiting for asynchronous operations to complete.
- Asynchronous operations typically involve callbacks, promises, or async/await syntax to handle the results of the operation when it completes.
```
  console.log('Step 1');
  setTimeout(() => console.log('Step 2 (Async)'), 1000);
  console.log('Step 3');
  /* Output:
  Step 1
  Step 3
  Step 2 (Async)
  */
```

How can we make sync code into async?

To convert synchronous code into asynchronous code in JavaScript, you typically use techniques like callbacks, promises, or async/await. Here's how you can do it with each approach:

Callbacks:
- Rewrite your functions to accept a callback function as an argument.
- Instead of returning a value directly, invoke the callback function with the result.
- Pass any errors to the callback as the first argument, and the result as subsequent arguments.

Example:

    function fetchData(callback) {
        // Simulate fetching data asynchronously
        setTimeout(() => {
            const data = 'Async data';
            callback(null, data); // Pass null for error and data as result
        }, 1000);
    }

    // Usage
    fetchData((err, data) => {
        if (err) {
            console.error('Error:', err);
        } else {
            console.log('Data:', data);
        }
    });

Promises:
- Wrap the asynchronous operation in a promise.
- Resolve the promise with the result when the operation is successful.
- Reject the promise with an error if the operation fails.

Example:

    function fetchData() {
        return new Promise((resolve, reject) => {
            // Simulate fetching data asynchronously
            setTimeout(() => {
                const data = 'Async data';
                resolve(data); // Resolve the promise with data
                // Or reject the promise with an error: reject(new Error('Error message'));
            }, 1000);
        });
    }

    // Usage
    fetchData()
        .then(data => console.log('Data:', data))
        .catch(error => console.error('Error:', error));

Async/Await:
- Use the 'async' keyword to define an asynchronous function.
- Use the 'await' keyword to wait for the resolution of a promise inside the function.
- Handle errors using try/catch blocks.

Example:

    async function fetchData() {
        // Simulate fetching data asynchronously
        return new Promise(resolve => {
            setTimeout(() => {
                const data = 'Async data';
                resolve(data);
            }, 1000);
        });
    }

    // Usage
    async function getData() {
        try {
            const data = await fetchData();
            console.log('Data:', data);
        } catch (error) {
            console.error('Error:', error);
        }
    }

    getData();

What are callback and what are the drawbacks of using callbacks?

Callbacks are functions that are passed as arguments to other functions and are executed later, usually when an asynchronous operation completes. They are commonly used in JavaScript to handle asynchronous tasks like fetching data from a server, reading files, or executing animations.

Drawbacks of using callbacks include:

Callback Hell: Nested callbacks can lead to deeply nested and hard-to-read code, a situation known as "callback hell" or "pyramid of doom." This makes code difficult to understand, debug, and maintain.
Error Handling: Error handling becomes cumbersome with callbacks, especially when dealing with nested callbacks. Error propagation is not straightforward, and it's easy to miss errors or handle them incorrectly.
Readability: Code with callbacks can be less readable and harder to follow, especially for developers who are not familiar with asynchronous programming patterns.
Loss of Context: When passing callbacks, the context of "this" can change unexpectedly, leading to bugs or unintended behavior.
Difficulty with Control Flow: Asynchronous operations can make it challenging to manage control flow, leading to complex and error-prone code.

To address these drawbacks, modern JavaScript has introduced alternative approaches like Promises and async/await, which provide cleaner syntax, better error handling, and improved readability for asynchronous code.

How promises solves the problem of inversion control?

Promises solve the problem of inversion of control by providing a more structured and flexible way to handle asynchronous operations compared to traditional callback-based approaches. Inversion of control refers to the situation where the caller of a function (the code that initiates an asynchronous task) hands over control to the callee (the asynchronous task itself) and waits for it to complete before proceeding further. This can lead to callback hell, where nested callbacks become difficult to manage and understand.

Here's how promises address the inversion of control problem:

Separation of Concerns: Promises decouple the initiation of asynchronous tasks from their handling. When a promise-based asynchronous function is invoked, it immediately returns a promise object representing the eventual result of the operation. This allows the caller to continue executing other code while the asynchronous task is being performed in the background.
Chaining: Promises support method chaining through the ".then()" method, allowing multiple asynchronous operations to be sequenced and executed in a readable and linear fashion. Each ".then()" call returns a new promise, enabling the chaining of additional asynchronous operations or error handling without nesting callbacks.
Error Handling: Promises have built-in error handling capabilities through the ".catch()" method, which allows errors to be propagated down the promise chain. This simplifies error handling compared to traditional callbacks, where error propagation can be more manual and error-prone.
Composition: Promises support composition using functions like "Promise.all()" and "Promise.race()", which allow multiple promises to be combined and coordinated. This enables more complex asynchronous workflows to be expressed in a modular and composable manner.

// Example function that returns a promise to simulate an asynchronous operation
function fetchData() {
  return new Promise((resolve, reject) => {
    // Simulate fetching data asynchronously (e.g., from an API)
    setTimeout(() => {
      const data = { name: 'John', age: 30 };
      // Resolve the promise with the fetched data
      resolve(data);
    }, 2000); // Simulating a delay of 2 seconds
  });
}

// Using the fetchData function with promises
fetchData()
  .then(data => {
    console.log('Data fetched successfully:', data);
    // Simulate another asynchronous operation based on the fetched data
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        // Simulate processing the fetched data
        const processedData = { ...data, processed: true };
        // Resolve the promise with the processed data
        resolve(processedData);
      }, 2000); // Simulating a delay of 2 seconds
    });
  })
  .then(processedData => {
    console.log('Data processed successfully:', processedData);
  })
  .catch(error => {
    console.error('Error occurred:', error);
  });

Overall, promises provide a cleaner, more readable, and more maintainable way to work with asynchronous code by offering a standardized interface for handling asynchronous operations and by promoting separation of concerns between the initiator and consumer of asynchronous tasks.

What is event loop?

The event loop is a core concept in JavaScript that governs the execution of code in a non-blocking manner. It's responsible for managing asynchronous operations and handling events efficiently, making JavaScript suitable for handling concurrent tasks.

Here's a simplified explanation of how the event loop works:

Call Stack: JavaScript is single-threaded, meaning it can only execute one piece of code at a time. When a script starts executing, it begins with a global execution context and an empty call stack. As functions are called, they're added to the call stack and executed in a synchronous manner. The call stack keeps track of the execution context of currently running functions.
Asynchronous Operations: JavaScript also supports asynchronous operations, such as fetching data from a server, reading files, or waiting for user input. These operations don't block the main thread; instead, they're offloaded to the browser APIs (in the case of web browsers) or the system APIs (in the case of Node.js). This allows the main thread to continue executing other code while waiting for asynchronous operations to complete.
Event Queue: When an asynchronous operation completes or an event occurs (such as a user click or a timer firing), a corresponding event is placed in the event queue. Each event in the queue is associated with a callback function.
Event Loop: The event loop constantly monitors the call stack and the event queue. If the call stack is empty and there are events in the queue, the event loop takes the first event and pushes its associated callback function onto the call stack for execution.
Callback Execution: Once the callback function is pushed onto the call stack, it's executed just like any other function. If the callback function itself triggers asynchronous operations, the cycle continues, with their completion resulting in new events being added to the queue.

By efficiently managing the execution of code and handling asynchronous operations, the event loop enables JavaScript to be non-blocking and responsive, even when dealing with potentially long-running tasks.

What are different functions in promises?

Promises in JavaScript provide a way to work with asynchronous operations in a more elegant and manageable manner. Here are some common functions associated with promises:

Promise Constructor: The "Promise" object is a constructor for creating new promise instances. It takes a function as an argument, known as the executor function, which is invoked immediately and receives two functions, "resolve" and "reject", as arguments. The executor function is responsible for initiating an asynchronous operation and either resolving the promise with a value or rejecting it with an error.
```
 const myPromise = new Promise((resolve, reject) => {
   // Asynchronous operation
   setTimeout(() => {
     resolve('Operation completed successfully');
   }, 1000);
 });
```
then(): The "then()" method is used to register callbacks that are invoked when the promise is resolved or rejected. It takes two optional arguments: a success callback and an error callback. If only one callback is provided, it's treated as the success callback.
```
 myPromise.then(
   (result) => {
     console.log(result); // 'Operation completed successfully'
   },
   (error) => {
     console.error(error);
   }
 );
```
catch(): The "catch()" method is used to handle promise rejections. It's similar to the second argument of "then()" but is specifically used for handling errors.
```
 myPromise.catch((error) => {
   console.error(error);
 });
```
Promise.all(): The "Promise.all()" method is used to handle multiple promises concurrently and wait for all of them to resolve. It takes an array of promises as input and returns a single promise that resolves with an array of results when all the input promises have resolved successfully. If any of the input promises is rejected, the returned promise is immediately rejected with the reason of the first rejected promise.
```
 const promises = [promise1, promise2, promise3];
 Promise.all(promises)
   .then((results) => {
     console.log(results); // Array of results from all promises
   })
   .catch((error) => {
     console.error(error); // Rejection reason of the first rejected promise
   });
```

Promise.race: The "Promise.race()" method is similar to "Promise.all()", but it resolves or rejects as soon as one of the input promises resolves or rejects. It takes an array of promises as input and returns a promise that resolves or rejects with the result of the first resolved or rejected promise.

 const promises = [promise1, promise2, promise3];
 Promise.race(promises)
   .then((result) => {
     console.log(result); // Result of the first resolved promise
   })
   .catch((error) => {
     console.error(error); // Rejection reason of the first rejected promise
   });

These functions provide powerful ways to work with asynchronous operations and manage their outcomes effectively in JavaScript.

Parikshith J

Parikshith J

Async Javascript

Async JS

How JS executes the code?

Reasons why JS is single threaded?

What is the difference between Sync and Async in JS?

How can we make sync code into async?

What are callback and what are the drawbacks of using callbacks?

How promises solves the problem of inversion control?

What is event loop?

What are different functions in promises?