Understanding Asynchronous Programming

Topic Outline (30-min)

1. Introduction to Asynchronous Programming:

   • Asynchronous programming allows non-blocking execution.

   • Enables handling multiple tasks simultaneously without waiting for one task to finish.

   • Example: Fetching data from an API while processing another task.

2. Using Callbacks for Handling Asynchronous Tasks:

   • A callback is a function passed as an argument to another function, executed after the main function is completed.

   • Example:

     javascript코드 복사const fetchData = (callback) => {
       setTimeout(() => {
         callback('Data fetched successfully');
       }, 1000);
     };
     
     fetchData((data) => console.log(data));

3. Problems with Callbacks (Callback Hell):

   • Nested callbacks make code hard to read and maintain.

   • Example of callback hell:

     javascript코드 복사asyncTask1((result1) => {
       asyncTask2(result1, (result2) => {
         asyncTask3(result2, (result3) => {
           console.log('Final Result:', result3);
         });
       });
     });

4. Promises: Structure, Chaining, and Error Handling:

   • A promise represents the eventual completion (or failure) of an asynchronous operation.

   • Example:

     javascript코드 복사const fetchData = () => {
       return new Promise((resolve, reject) => {
         setTimeout(() => resolve('Data fetched successfully'), 1000);
       });
     };
     
     fetchData()
       .then((data) => console.log(data))
       .catch((err) => console.error(err));

5. Using async/await for Cleaner Asynchronous Code:

   • Simplifies asynchronous code by making it look synchronous.

   • Example:

     javascript코드 복사const fetchData = async () => {
       try {
         const data = await new Promise((resolve) =>
           setTimeout(() => resolve('Data fetched successfully'), 1000)
         );
         console.log(data);
       } catch (err) {
         console.error(err);
       }
     };
     
     fetchData();