Best Async Document for Typescript

JavaScript Engine & Runtime Environment

Javascript code runs in a JavaScript engine provided by the runtime environment.

In other words, runtime environment (Chrome, Node.js), provides the JavaScript engine (V8). The JavaScript engine provides a single threaded event loop (*) (**).

The JavaScript engine recognizes the functions of the Web/System APIs and hands them off to be handled by the runtime environment. Once those system functions (macro tasks like network, disk, DNS) are finished by the runtime environment, they return and are pushed onto the stack as callbacks. This is managed in the the event loop.

With JavaScript everything is a type of task.

• console.log() statement is a task
• const response = await axios.get(yourUrl) is a task
• setTimeout(function, 100) is a task
• const file = readFileSync('./filename.txt', 'utf-8'); is a task

Event loop is made of several queues. Tasks, like above, are grouped into different categories and are put into one of the event / task queues.

A special queue is the PromiseJobs queue where the promises created by the developer are processed. This queue is also called “microtask queue”. Practically everything else falls into “macrotasks queue”. Immediately after every macrotask, the engine executes all tasks from microtask queue, prior to running any other macrotasks or rendering (on the browser) or anything else.(*)(**).

Node.js is a runtime environment, doesn’t only run JavaScript but utilize multiple threads(for disk I/O etc). It’s the Node.js event loop which is single threaded. Whenever you do something like IO which is event based, it creates a new thread or utilizes an existing thread from the thread pool for it.

Chrome and Node.js share the same V8 JavaScript engine to run JavaScript but have different Event Loop implementations. The Chrome browser uses libevent as its event loop implementation, and Node.js uses libuv.

Let’s keep these statements in mind.

• Blocking methods execute synchronously and non-blocking methods execute asynchronously.
• JavaScript runs in a single thread, but the engine that runs JavaScript is not single threaded.

A Function

Let’s start with a simple function that prints the value provided.

1
function log(value: string) {
2
  console.log(value);
3
}
4

5
log("hello world");

Output

1
 hello world

This is a blocking function and executes synchronously. When it runs nothing else will be executed until it finishes. If it would take 10 minutes to run this function, everything else after this code block would have to wait for 10 minutes.

Let’s print a number of messages.

1
function log(value: string) {
2
  console.log(value);
3
}
4

5
log("hello world 1");
6
log("hello world 2");
7
log("hello world 3");
8
log("hello world 4");
9
log("hello world 5");

Output

1
hello world 1
2
hello world 2
3
hello world 3
4
hello world 4
5
hello world 5

Pretty logical. Each log() function executed sequentially one after another.

Arrow Functions

Before we move forward let’s convert log() function into an arrow function.

1
const log = (value: string) => {
2
  console.log(value);
3
};
4

5
log("hello world");

Output

1
hello world

Same behavior, we just used the arrow notation.

log() is a synchronous (arrow) function.

A Synchronous Function Which Waits

Let’s create a function that takes a while to run.

We have two different cases here:

• A function that is cpu bound: a function that calculates a big number
• A function that is waiting on external resources: disk IO, network IO etc.

CPU Bound Function

A CPU bound function, only needs CPU cycles to complete. The freeze() function below, waits for ms milliseconds and blocks the main loop. After ms milliseconds it finishes the execution.

1
const freeze = (ms: number) => {
2
  const stopTime = Date.now() + ms;
3
  while (Date.now() < stopTime) {} // Block the main loop
4
};

Let’s use freeze() function.

1
const freeze = (ms: number) => {
2
  const stopTime = Date.now() + ms;
3
  while (Date.now() < stopTime) {}
4
};
5

6
console.log("Start");
7
const start = Date.now();
8
freeze(2000);
9
const finish = Date.now();
10
console.log(`Ran for ${finish - start} milliseconds`);
11
console.log("Finish");

Output

1
Start
2
Ran for 2000 milliseconds
3
Finish

Everything above is as expected. JavaScript engine printed Start, then the time it took to run, then Finish.

If we had two tasks each taking 2 seconds, overall the program would run for 4 seconds.

1
const freeze = (ms: number) => {
2
  const stopTime = Date.now() + ms;
3
  while (Date.now() < stopTime) {}
4
};
5

6
console.log("Start");
7
const start = Date.now();
8
freeze(2000); // first task running for 2 seconds
9
freeze(2000); // second task running for 2 seconds
10
const finish = Date.now();
11
console.log(`Ran for ${finish - start} milliseconds`);
12
console.log("Finish");

Output

1
Start
2
Ran for 4000 milliseconds
3
Finish

setTimeout() Method

Executes a specified block of code once after a specified time has elapsed. The timer is provided by the runtime environment, not by the JavaScript Engine. (Example: Node.js implements setTimeout() method, not V8.)

setTimeout(function[, delay, arg1, arg2, …])

function A function to be executed after the timer expires.

delay (Optional) The time, in milliseconds (thousandths of a second), the timer should wait before the specified function or code is executed. If this parameter is omitted, a value of 0 is used, meaning execute “immediately”, or more accurately, the next event cycle. Note that in either case, the actual delay may be longer than intended; see Reasons for delays longer than specified below.

arg1, …, argN (Optional) Additional arguments which are passed through to the function specified by function.

return value The returned timeoutID is a positive integer value which identifies the timer created by the call to setTimeout(); this value can be passed to clearTimeout() to cancel the timeout.

• NOTE: The specified amount of time (or the delay) is not the guaranteed time to execution, but rather the minimum time to execution. The callbacks you pass to these functions cannot run until the stack on the main thread is empty.

• As a consequence, code like setTimeout(fn, 0) will execute as soon as the stack is empty, not immediately. If you execute code like setTimeout(fn, 0) but then immediately after run a loop that takes 10 seconds to complete, your callback will be executed after 10 seconds.

We already passed the threshold of lecture to code ratio. Let’s write some code to understand.

An anonymous function that writes hello world after 200 milliseconds.

1
const log = () => {
2
  console.log("Hello World");
3
};
4

5
console.log("Start");
6
const start = Date.now();
7
setTimeout(log, 1000);
8
const finish = Date.now();
9
console.log(`Ran for ${finish - start} milliseconds`);
10
console.log("Finish");

Output

1
Start
2
Ran for 0 milliseconds
3
Finish
4
Hello World

This one is a little strange. Isn’t it? It seems to be out of order.

First we created a function named log() which prints hello world. Later we called setTimeout(log, 1000). This will wait for 1000 milliseconds and then call log() function. Remember, setTimeout() is actually a system call, that delegates the wait operation to Node.js. As soon as we call setTimeout(log, 1000), we push log() to the macrotasks queue we mentioned earlier. For this reason, code ran sequentially, as if it ignored setTimeout(log, 1000);. After 1000 milliseconds, log() function was pushed to the queue as a callback and executed. Finally, it printed Hello World.

Welcome to the async world of JavaScript.

Any function that sends a code block to a queue is an async function. Event loop is the code that checks every queue one after another and runs one or more tasks (code blocks) in them. TODO: improve wording here

An ugly representation is below; (TODO: Improve the presentation)

1
      |
2
console.log("Start");
3
      |
4
const start = Date.now();
5
      |
6
       --------------> push setTimeout(log, 1000); to macrotasks
7
      |
8
const finish = Date.now();
9
      |
10
console.log(`Ran for ${finish - start} milliseconds`);
11
      |
12
console.log("Finish");
13
      |
14
1000 milliseconds later
15
      |
16
    log();

By the way even if we set timeout value to 0 milliseconds, the code above would follow the exact same order. Let’s see.

1
const log = () => {
2
  console.log("Hello World");
3
};
4

5
console.log("Start");
6
const start = Date.now();
7
setTimeout(log, 0); // same as setTimeout(log);
8
const finish = Date.now();
9
console.log(`Ran for ${finish - start} milliseconds`);
10
console.log("Finish");

Output

1
Start
2
Ran for 0 milliseconds
3
Finish
4
Hello World

Because setTimeout() is delegated to macrotasks queue, and because only one item from the macrotasks queue is pulled with every iteration of the loop, Hello World is printed at the very end.

The Problem

What if we needed to do something after the async function completes?

Let’s say we have two functions. getMessage() gets a message from the internet and printMessage() prints the message retrieved by getMessage(). It takes time for getMessage() to get the message.

1
getMessage();
2
printMessage();

1
// async function
2
const getMessage = () => {
3
  console.log("getting the message");
4
  setTimeout(() => {
5
    console.log("retrieved the message");
6
  }, 1000);
7
};
8

9
// not an async function
10
const printMessage = () => {
11
  console.log("printing message");
12
};
13

14
getMessage();
15
printMessage();

Output

1
getting the message
2
printing the message
3
retrieved the message // after 1 second later

Not good. We printed the message before we received it.

I have an idea, let’s move printMessage() into getMessage()

1
const getMessage = () => {
2
  console.log("getting the message");
3
  setTimeout(() => {
4
    console.log("retrieved the message");
5
  }, 1000);
6
  printMessage();
7
};
8

9
const printMessage = () => {
10
  console.log("printing message");
11
};
12

13
getMessage();

Output

1
getting the message
2
printing the message
3
retrieved the message

Yikes. Let’s try again.

1
const getMessage = () => {
2
  console.log("getting the message");
3
  setTimeout(() => {
4
    console.log("retrieved the message");
5
    printMessage();
6
  }, 1000);
7
};
8

9
const printMessage = () => {
10
  console.log("printing message");
11
};
12

13
getMessage();

Output

1
getting the message
2
retrieved the message
3
printing the message

Yay. It worked. It worked but what if we want to do something different with the retrieved text? Do we need to change the getMessage() each time?

Callback Functions

Instead of changing the getMessage() each time, we can pass a function to printMessage().

1
const getMessage = (callback: Function) => {
2
  console.log("getting the message");
3
  setTimeout(() => {
4
    console.log("retrieved the message");
5
    // pretending like it take time to finish
6
    callback();
7
  }, 1000);
8
};
9

10
const printMessage = () => {
11
  console.log("printing message");
12
};
13

14
getMessage(printMessage);

Output

1
getting the message
2
retrieved the message
3
printing the message

We are getting there. const getMessage = (callback: Function) => { here we are passing a callback function to getMessage() and calling back that function when we have what we were waiting for. We call the function a callback function because we call it back after we are done in the current function.

A better implementation is below. getMessage(index: number, cb: Function) accepts an index to know which message to get, and a function to call back after the message with the index number is received.

1
const getMessage = (index: number, cb: Function) => {
2
  const messages = ["Hello World", "Hello Universe"];
3
  const message = messages[index % messages.length];
4

5
  console.log("LOG: getting the message");
6
  setTimeout(() => {
7
    console.log(`LOG: retrieved: "${message}"`);
8
    cb(message);
9
  }, 1000);
10
};
11

12
const printMessage = (message: string) => {
13
  console.log("LOG: printing the message");
14
  console.log(message);
15
};
16

17
getMessage(0, printMessage);

Output

1
LOG: getting the message
2
LOG: retrieved: "Hello World"
3
LOG: printing the message
4
Hello World

What if we wanted to add a transformation to the text we receive? Let’s convert the text to upper case before we print.

1
const getMessage = (index: number, cb: Function) => {
2
  const messages = ["Hello World", "Hello Universe"];
3
  const message = messages[index % messages.length];
4

5
  console.log("LOG: getting the message");
6
  setTimeout(() => {
7
    console.log(`LOG: retrieved: "${message}"`);
8
    cb(message);
9
  }, 1000);
10
};
11

12
const upperCase = (message: string, cb: Function) => {
13
  console.log("LOG: converting to upper case");
14
  const upperCaseText = message.toUpperCase();
15
  cb(upperCaseText);
16
};
17

18
const printMessage = (message: string) => {
19
  console.log("LOG: printing the message");
20
  console.log(message);
21
};
22

23
getMessage(0, (m: string) => upperCase(m, printMessage));

Not so easy to read, especially the very last line. We are calling getMessage() and passing upperCase() function as the callback. Then we are passing printMessage() as a callback to upperCase() function.

What if we wanted to receive messages in order we called them. Let’s modify the code a little bit so it will wait longer for messages[0] than it waits for messages[1].

1
const getMessage = (index: number, cb: Function) => {
2
  const messages = ["Hello World", "Hello Universe"];
3

4
  const durations = [1000, 500]; // index 0 has 1000 milliseconds
5

6
  const message = messages[index % messages.length];
7
  const duration = durations[index % messages.length];
8

9
  console.log(`LOG: getting the message[${index}]`);
10
  setTimeout(() => {
11
    console.log(`LOG: retrieved: "${message}"`);
12
    cb(message);
13
  }, duration);
14
};
15

16
const upperCase = (message: string, cb: Function) => {
17
  console.log("LOG: converting to upper case");
18
  const upperCaseText = message.toUpperCase();
19
  cb(upperCaseText);
20
};
21

22
const printMessage = (message: string) => {
23
  console.log("LOG: printing the message");
24
  console.log(message);
25
};
26

27
getMessage(0, (m: string) => upperCase(m, printMessage));
28
getMessage(1, (m: string) => upperCase(m, printMessage));

Output

1
LOG: getting the message[0]
2
LOG: getting the message[1]
3
LOG: retrieved: "Hello Universe"
4
LOG: converting to upper case
5
LOG: printing the message
6
HELLO UNIVERSE
7
LOG: retrieved: "Hello World"
8
LOG: converting to upper case
9
LOG: printing the message
10
HELLO WORLD

We tried to get messages[0], which is Hello World first but instead we got Hello Universe as the first message. We have to change the way we called the getMessage() function if we want to be able to get the messages in the order we called them.

1
getMessage(0, (m: string) => {
2
  upperCase(m, printMessage);
3
  getMessage(1, (m: string) => upperCase(m, printMessage));
4
});

Output

1
LOG: getting the message[0]
2
LOG: retrieved: "Hello World"
3
LOG: converting to upper case
4
LOG: printing the message
5
HELLO WORLD
6
LOG: getting the message[1]
7
LOG: retrieved: "Hello Universe"
8
LOG: converting to upper case
9
LOG: printing the message
10
HELLO UNIVERSE

What if we had one more message to print? Let’s add another message to messages[] and print all in order.

1
const getMessage = (index: number, cb: Function) => {
2
  const messages = ["Hello World", "Hello Universe", "Hello Multiverse"];
3

4
  const durations = [1000, 500, 750];
5

6
  const message = messages[index % messages.length];
7
  const duration = durations[index % messages.length];
8

9
  console.log(`LOG: getting the message[${index}]`);
10
  setTimeout(() => {
11
    console.log(`LOG: retrieved: "${message}"`);
12
    cb(message);
13
  }, duration);
14
};
15

16
const upperCase = (message: string, cb: Function) => {
17
  console.log("LOG: converting to upper case");
18
  const upperCaseText = message.toUpperCase();
19
  cb(upperCaseText);
20
};
21

22
const printMessage = (message: string) => {
23
  console.log("LOG: printing the message");
24
  console.log(message);
25
};
26

27
const convertAndPrint = (m: string) => {
28
  upperCase(m, printMessage);
29
};
30

31
getMessage(0, (m: string) => {
32
  upperCase(m, printMessage);
33
  getMessage(1, (m: string) => {
34
    upperCase(m, printMessage);
35
    getMessage(2, (m: string) => upperCase(m, printMessage));
36
  });
37
});

Output

1
LOG: getting the message[0]
2
LOG: retrieved: "Hello World"
3
LOG: converting to upper case
4
LOG: printing the message
5
HELLO WORLD
6
LOG: getting the message[1]
7
LOG: retrieved: "Hello Universe"
8
LOG: converting to upper case
9
LOG: printing the message
10
HELLO UNIVERSE
11
LOG: getting the message[2]
12
LOG: retrieved: "Hello Multiverse"
13
LOG: converting to upper case
14
LOG: printing the message
15
HELLO MULTIVERSE

Imagine we have a chain of these async function;

1
asyncFunction(function(){
2
    asyncFunction(function(){
3
        asyncFunction(function(){
4
            asyncFunction(function(){
5
                asyncFunction(function(){
6
                    ....
7
                });
8
            });
9
        });
10
    });
11
});

This takes us to what is know as callback hell. Imagine adding error handling to the code above. It gets really hard to maintain. There are libraries to manage the chain of callbacks but promises emerged as a better option.

Promises

Promises in TypeScript provide a clean and robust way to handle asynchronous operations. They represent a value that may not be available yet, but will be resolved (fulfilled) at some point in the future, or may be rejected if an error occurs. Promises offer an improvement over traditional callbacks by allowing you to chain asynchronous operations in a more readable and manageable way, avoiding the infamous “callback hell.” (I still remember these endless callbacks…)

Syntax

1
// Function that returns a Promise
2
function fetchData(): Promise<string> {
3
  return new Promise((resolve, reject) => {
4
    // Simulate an asynchronous operation (e.g., network request)
5
    setTimeout(() => {
6
      const success = true; // Change to false to simulate an error
7
      if (success) {
8
        resolve("Data retrieved successfully!");
9
      } else {
10
        reject("Failed to retrieve data.");
11
      }
12
    }, 1000);
13
  });
14
}
15

16
// Using the Promise with .then() and .catch()
17
fetchData()
18
  .then((data) => {
19
    console.log("Success:", data);
20
  })
21
  .catch((error) => {
22
    console.error("Error:", error);
23
  });

fetchData returns a Promise that simulates an asynchronous operation. .then() is used to handle the successful resolution of the Promise. .catch() is used to handle any errors that occur during the asynchronous operation.

Example

1
const upperCase = (message: string): string => {
2
  console.log("LOG: converting to upper case");
3
  const upperCaseText = message.toUpperCase();
4
  return upperCaseText;
5
};
6

7
const printMessage = (message: string) => {
8
  console.log("LOG: printing the message");
9
  console.log(message);
10
};
11

12
let getMessage = (index: number): Promise<string> => {
13
  return new Promise((resolve, reject) => {
14
    const messages = ["Hello World", "Hello Universe", "Hello Multiverse"];
15

16
    const durations = [1000, 500, 750];
17

18
    const message = messages[index % messages.length];
19
    const duration = durations[index % messages.length];
20

21
    console.log(`LOG: getting the message[${index}]`);
22
    setTimeout(() => {
23
      console.log(`LOG: retrieved: "${message}"`);
24
      resolve(message);
25
    }, duration);
26
  });
27
};
28

29
getMessage(1)
30
  .then((message) => upperCase(message))
31
  .then((message) => printMessage(message));
32

33
// we could shorten getMessage call as below
34
// getMessage(1).then(upperCase).then(printMessage);

Let’s break down the code piece by piece:

1. Uppercase Function

1
const upperCase = (message: string): string => {
2
  console.log("LOG: converting to upper case");
3
  const upperCaseText = message.toUpperCase();
4
  return upperCaseText;
5
};

• Purpose: This function receives a string (message), logs a message indicating that it’s converting the text, converts the string to uppercase using the toUpperCase() method, and returns the uppercase version.
• Key Points:
  • Type Annotations: It explicitly states that it takes a string as input and returns a string.
  • Logging: The console log helps trace when the function is executed.

2. Print Message Function

1
const printMessage = (message: string) => {
2
  console.log("LOG: printing the message");
3
  console.log(message);
4
};

• Purpose: This function takes a string and prints it to the console.
• Key Points:
  • It logs a message before printing the actual message to indicate its operation.
  • There is no return value; its job is to output the message.

3. Get Message Function

1
let getMessage = (index: number): Promise<string> => {
2
  return new Promise((resolve, reject) => {
3
    const messages = ["Hello World", "Hello Universe", "Hello Multiverse"];
4
    const durations = [1000, 500, 750];
5

6
    const message = messages[index % messages.length];
7
    const duration = durations[index % messages.length];
8

9
    console.log(`LOG: getting the message[${index}]`);
10
    setTimeout(() => {
11
      console.log(`LOG: retrieved: "${message}"`);
12
      resolve(message);
13
    }, duration);
14
  });
15
};

• Purpose: This function simulates an asynchronous operation by returning a Promise that resolves to one of the predefined messages after a delay.
• Key Points:
  • Message Selection: It uses the modulo operator (index % messages.length) to cycle through the messages and durations arrays. This means if you provide an index larger than the array length, it wraps around.
  • Simulated Delay: setTimeout is used to delay the execution, simulating an asynchronous operation. The delay is determined by the corresponding duration.
  • Promise Resolution: Once the timeout completes, the promise is resolved with the selected message. There is no error handling here (the reject is never used), so the promise always resolves.

4. Promise Chaining

1
getMessage(1)
2
  .then((message) => upperCase(message))
3
  .then((message) => printMessage(message));
4

5
// we could shorten getMessage call as below
6
// getMessage(1).then(upperCase).then(printMessage);

• Execution Flow:
  1. Call to getMessage(1): The function is called with 1 as the index.
  2. First .then(): When the promise resolves, the retrieved message is passed to the upperCase function. This converts the message to uppercase.
  3. Second .then(): The uppercase message is then passed to the printMessage function, which prints it to the console.
• Chaining Simplification: The commented line shows that you can directly pass the function names (upperCase and printMessage) to .then(), as they both match the expected signature.

Summary

• Overall Design: The code demonstrates a simple asynchronous operation using Promises without async/await. It chains multiple functions to simulate a flow:
  1. Retrieve a message asynchronously (using getMessage).
  2. Transform the message (convert it to uppercase using upperCase).
  3. Display the message (print it using printMessage).
• Key Concepts:
  • Promise chaining: Allows for sequential asynchronous operations.
  • TypeScript syntax: Shows type annotations for functions and variables.
  • Logging: Provides insight into the sequence of operations for debugging or tracking execution.

This modular approach helps in understanding and testing each part separately, making the code easier to maintain and debug.

Async/Await

async/await provides syntactic sugar over Promises, making asynchronous operations much more approachable.

async declares a function as asynchronous, implicitly returning a Promise. Inside an async function, await pauses execution until the Promise it’s waiting for resolves (or rejects), and then resumes execution with the resolved value.

This allows you to write asynchronous code that looks and behaves much more like synchronous code, making it significantly easier to read, understand, and debug.

Example 1

1
const printMessage = (message: string) => {
2
  console.log(message);
3
};
4

5
const trueFalse = (): boolean => {
6
  return Math.random() < 0.5;
7
};
8

9
const getMessagePromiseFull = (message: string) => {
10
  return new Promise((resolve, reject) => {
11
    setTimeout(() => {
12
      trueFalse() ? resolve(message) : reject(new Error("Message Error"));
13
    }, 1000);
14
  });
15
};
16

17
const getMessages = async () => {
18
  try {
19
    const message1 = await getMessagePromiseFull("Promise Example Message 1");
20
    console.log(message1);
21
    const message2 = await getMessagePromiseFull("Promise Example Message 2");
22
    console.log(message2);
23
  } catch (err: any) {
24
    console.log("Error:", err.message);
25
  }
26
};
27

28
// usage
29
getMessages();

Output

1
# output
2
Error: Message Error
3

4
# output
5
Promise Example Message 1
6
Error: Message Error
7

8
# output
9
Promise Example Message 1
10
Promise Example Message 2

Explanation:

1. Function: printMessage

1
const printMessage = (message: string) => {
2
  console.log(message);
3
};

• A simple function that logs a given string message to the console.

2. Function: trueFalse

1
const trueFalse = (): boolean => {
2
  return Math.random() < 0.5;
3
};

• Generates a random boolean value.
• Uses Math.random(), which produces a random float between 0 and 1.
• If the random value is less than 0.5, it returns true; otherwise, it returns false.

3. Function: getMessagePromiseFull

1
const getMessagePromiseFull = (message: string) => {
2
  return new Promise((resolve, reject) => {
3
    setTimeout(() => {
4
      trueFalse() ? resolve(message) : reject(new Error("Message Error"));
5
    }, 1000);
6
  });
7
};

• Returns a Promise that either:
  • Resolves with the provided message if trueFalse() returns true.
  • Rejects with an Error object (new Error("Message Error")) if trueFalse() returns false.
• The function simulates an asynchronous operation using setTimeout() with a 1-second delay.

4. Function: getMessages

1
const getMessages = async () => {
2
  try {
3
    const message1 = await getMessagePromiseFull("Promise Example Message 1");
4
    console.log(message1);
5
    const message2 = await getMessagePromiseFull("Promise Example Message 2");
6
    console.log(message2);
7
  } catch (err: any) {
8
    console.log("Error:", err.message);
9
  }
10
};

• Declared as an async function, meaning it can use await inside it.
• Calls getMessagePromiseFull("Promise Example Message 1") and waits (await) for it to resolve before proceeding.
• If the first promise resolves, it logs the message and calls the second promise (getMessagePromiseFull("Promise Example Message 2")).
• If either promise rejects, execution jumps to the catch block, where it logs "Error: Message Error".

5. Function Call: getMessages()

1
getMessages();

• Initiates the getMessages function.
• Depending on random outcomes (trueFalse()), it may:
  • Successfully log both messages.
  • Fail on the first message and log an error.
  • Fail on the second message and log an error.

Example Scenarios

Scenario 1: Both messages succeed

(Assume trueFalse() returns true both times)

1
Promise Example Message 1
2
Promise Example Message 2

Scenario 2: First message fails

(Assume trueFalse() returns false for the first message)

1
Error: Message Error

Scenario 3: Second message fails

(Assume trueFalse() returns true for the first message but false for the second)

1
Promise Example Message 1
2
Error: Message Error

Key Concepts Used

1. Promises - Handling asynchronous operations (getMessagePromiseFull).
2. Async/Await - Synchronous-style promise handling (getMessages).
3. Randomized Behavior - trueFalse() introduces a 50% failure rate.
4. Error Handling - try...catch ensures graceful failure handling.

This structure is useful for simulating unreliable APIs where responses might randomly fail.

Division Example

1
const printResult = (result: number) => {
2
  console.log(result);
3
};
4

5
const printOddEven = (value: number) => {
6
  value % 2 === 0
7
    ? console.log("Result is even")
8
    : console.log("Result is odd");
9
};
10

11
const divide = (a: number, b: number): Promise<number> => {
12
  return new Promise((resolve, reject) => {
13
    setTimeout(() => {
14
      if (b === 0) reject(new Error("Division Error!"));
15
      resolve(a / b);
16
    }, 1000);
17
  });
18
};
19

20
const addOne = (a: number): Promise<number> => {
21
  return new Promise((resolve, reject) => {
22
    setTimeout(() => {
23
      resolve(a + 1);
24
    }, 1000);
25
  });
26
};
27

28
const calculate = async (a: number, b: number) => {
29
  try {
30
    const division = await divide(a, b);
31
    const result = await addOne(division);
32
    printResult(result);
33
    printOddEven(result);
34
  } catch (err) {
35
    console.log(err.message);
36
  }
37
};
38

39
// usage
40
calculate(4, 2);

Output

1
# output
2
3
3
Result is odd

Division Example with Return

1
const printResult = (result: number) => {
2
  console.log(result);
3
};
4

5
const printOddEven = (value: number) => {
6
  value % 2 === 0
7
    ? console.log("Result is even")
8
    : console.log("Result is odd");
9
};
10

11
const divide = (a: number, b: number): Promise<number> => {
12
  return new Promise((resolve, reject) => {
13
    setTimeout(() => {
14
      if (b === 0) reject(new Error("Division Error!"));
15
      resolve(a / b);
16
    }, 1000);
17
  });
18
};
19

20
const addOne = (a: number): Promise<number> => {
21
  return new Promise((resolve, reject) => {
22
    setTimeout(() => {
23
      resolve(a + 1);
24
    }, 1000);
25
  });
26
};
27

28
const calculate = async (a: number, b: number): Promise<number> => {
29
  const division = await divide(a, b);
30
  const result = await addOne(division);
31
  return result;
32
};
33

34
// usage
35
calculate(4, 2)
36
  .then((result) => {
37
    printResult(result);
38
    printOddEven(result);
39
  })
40
  .catch((err) => console.log(err.message))
41
  .finally(() => console.log("Operation Complete."));

1
# output
2
3
3
Result is odd
4
Operation Complete.

RxJS

RxJS (Reactive Extensions for JavaScript) is a library for composing asynchronous and event-based programs by using observable sequences. It provides a powerful and flexible way to handle asynchronous operations, such as network requests, user interactions, and more.

Observable

An Observable represents a stream of data or events over time.

1
import { Observable } from 'rxjs';
2

3
const observable = new Observable<number>((subscriber) => {
4
  subscriber.next(1);
5
  subscriber.next(2);
6
  subscriber.next(3);
7
  setTimeout(() => {
8
    subscriber.next(4);
9
    subscriber.complete();
10
  }, 1000);
11
});

This code demonstrates the creation and behavior of an RxJS Observable, which is a core concept in Reactive Programming using the rxjs library.

Breaking Down the Code

1. Importing Observable

1
import { Observable } from 'rxjs';

• Imports the Observable class from the rxjs library.
• Observable represents a stream of data that can emit multiple values over time.

2. Creating an Observable

1
const observable = new Observable<number>((subscriber) => {

• Defines an Observable that emits number values (Observable<number>).
• The constructor takes a function with a subscriber parameter, which controls the emission of values.

3. Emitting Values Immediately

1
  subscriber.next(1);
2
  subscriber.next(2);
3
  subscriber.next(3);

• The subscriber.next(value) method emits values (1, 2, and 3) synchronously.
• These values are sent immediately when a subscriber subscribes.

4. Asynchronous Emission with setTimeout

1
  setTimeout(() => {
2
    subscriber.next(4);
3
    subscriber.complete();
4
  }, 1000);

• Delays the emission of 4 by 1 second using setTimeout().
• After emitting 4, it calls subscriber.complete(), signaling that no more values will be emitted.
• After complete(), no further emissions are possible.

Observing the Observable For this observable to actually do anything, a subscriber must subscribe to it:

1
observable.subscribe({
2
  next: (value) => console.log(value),  // Handles emitted values
3
  complete: () => console.log("Done"), // Handles completion
4
});

Expected Output When subscribed, the output will be:

1
1
2
2
3
3
4
(1 second delay)
5
4
6
Done

Key Concepts in the Code

1. Observable: Represents a stream of data over time.
2. Synchronous Emission: 1, 2, and 3 are emitted immediately.
3. Asynchronous Emission: 4 is emitted after 1 second.
4. Completion (complete()): Notifies subscribers that the observable has finished.
5. Lazy Execution: The observable doesn’t start emitting until someone subscribes.

Use Case Example This approach is useful in event-based or real-time data handling, such as:

• Handling user input events.
• Streaming real-time data (e.g., stock prices).
• Managing API polling or delayed responses.

Subscriber

A Subscriber is an object that listens to an Observable and reacts to the values emitted by the Observable.

Here’s how you can subscribe to the observable and handle values, errors, and completion:

Subscribing to the Observable with Error Handling

1
import { Observable } from 'rxjs';
2

3
const observable = new Observable<number>((subscriber) => {
4
  subscriber.next(1);
5
  subscriber.next(2);
6
  subscriber.next(3);
7

8
  setTimeout(() => {
9
    subscriber.next(4);
10
    // Uncomment below to simulate an error
11
    // subscriber.error(new Error("Something went wrong!"));
12

13
    subscriber.complete();
14
  }, 1000);
15
});
16

17
console.log("Subscribing to the observable...");
18

19
const subscription = observable.subscribe({
20
  next: (value) => console.log("Received:", value),  // Handles emitted values
21
  error: (err) => console.error("Error:", err.message), // Handles errors
22
  complete: () => console.log("Observable completed!") // Handles completion
23
});
24

25
// Unsubscribe after 2 seconds (optional)
26
setTimeout(() => {
27
  console.log("Unsubscribing...");
28
  subscription.unsubscribe();
29
}, 2000);

Explanation of Subscription

1. The subscriber listens to the observable.
2. When a value is emitted (next()), it logs "Received: X".
3. If an error occurs (error()), it logs "Error: Something went wrong!".
4. When the observable completes (complete()), it logs "Observable completed!".
5. Unsubscribing after 2 seconds ensures cleanup to avoid memory leaks.

Expected Output

1
Subscribing to the observable...
2
Received: 1
3
Received: 2
4
Received: 3
5
(1 second delay)
6
Received: 4
7
Observable completed!
8
(After 2 seconds)
9
Unsubscribing...

Simulating an Error

If you uncomment:

1
subscriber.error(new Error("Something went wrong!"));

Then instead of completion, it will print:

1
Subscribing to the observable...
2
Received: 1
3
Received: 2
4
Received: 3
5
(1 second delay)
6
Error: Something went wrong!

• The observable stops emitting after an error.
• The complete() function will not execute after an error.

Key Takeaways

• Observables emit values over time (next()).
• They can fail (error()), stopping further emissions.
• They can complete normally (complete()).
• You can unsubscribe to stop listening early.

Multiple Subscribers

In RxJS, multiple subscribers can listen to the same observable, and each subscriber receives its own independent execution of the observable unless the observable is shared.

1
import { Observable } from 'rxjs';
2

3
const observable = new Observable<number>((subscriber) => {
4
  console.log("Observable execution started");
5

6
  subscriber.next(1);
7
  subscriber.next(2);
8

9
  setTimeout(() => {
10
    subscriber.next(3);
11
    subscriber.complete();
12
  }, 1000);
13
});
14

15
// First Subscriber
16
observable.subscribe({
17
  next: (value) => console.log("Subscriber 1 received:", value),
18
  complete: () => console.log("Subscriber 1 completed!")
19
});
20

21
// Second Subscriber (subscribes after a delay)
22
setTimeout(() => {
23
  observable.subscribe({
24
    next: (value) => console.log("Subscriber 2 received:", value),
25
    complete: () => console.log("Subscriber 2 completed!")
26
  });
27
}, 500);

Explanation

1. An observable is created that:
   • Emits 1 and 2 immediately.
   • Emits 3 after 1 second.
   • Calls complete(), signaling no further emissions.
2. First Subscriber subscribes immediately and starts receiving values.
3. Second Subscriber subscribes after 500ms, so:
   • It misses the first two emitted values (1 and 2).
   • It only gets values emitted after it subscribes.

Expected Output

1
Observable execution started
2
Subscriber 1 received: 1
3
Subscriber 1 received: 2
4
(500ms delay)
5
Observable execution started
6
Subscriber 2 received: 1
7
Subscriber 2 received: 2
8
(500ms more delay)
9
Subscriber 1 received: 3
10
Subscriber 1 completed!
11
Subscriber 2 received: 3
12
Subscriber 2 completed!

Note: Since it’s a cold observable (default behavior), each subscriber triggers the observable from the beginning.

Hot Observable (Shared Execution)

If you want all subscribers to share the same execution, use share() from RxJS:

1
import { Observable, share } from 'rxjs';
2

3
const sharedObservable = new Observable<number>((subscriber) => {
4
  console.log("Shared Observable execution started");
5

6
  subscriber.next(1);
7
  subscriber.next(2);
8

9
  setTimeout(() => {
10
    subscriber.next(3);
11
    subscriber.complete();
12
  }, 1000);
13
}).pipe(share());  // Converts it into a hot observable
14

15
// First Subscriber
16
sharedObservable.subscribe({
17
  next: (value) => console.log("Subscriber 1 received:", value),
18
  complete: () => console.log("Subscriber 1 completed!")
19
});
20

21
// Second Subscriber (subscribes after 500ms)
22
setTimeout(() => {
23
  sharedObservable.subscribe({
24
    next: (value) => console.log("Subscriber 2 received:", value),
25
    complete: () => console.log("Subscriber 2 completed!")
26
  });
27
}, 500);