Asynchronous programming has become increasingly important in modern web development, as it allows for more efficient use of resources and can lead to better user experiences. Two popular approaches to asynchronous programming in JavaScript are async/await and generators. While both approaches have their own strengths and weaknesses, they can be used to achieve similar functionality in some cases. In this article, we’ll provide a comparison of async/await and generators and highlight their differences and similarities in various aspects.
Async in JavaScript: Async in JavaScript refers to asynchronous programming, which is a technique for allowing a program to execute multiple tasks at the same time, instead of in a linear, sequential manner. Asynchronous code allows a program to continue running and respond to other requests or events while waiting for a long-running task to complete, without blocking the main thread. This results in more efficient and responsive applications, particularly when dealing with network requests or other I/O operations.
JavaScript uses callbacks, promises, and async/await to handle asynchronous code, which can be especially useful when working with APIs or other resources that take a significant amount of time to load.
Syntax:
async function functionName(parameter1, parameter2, ...) {
// function body
}
You can also use the arrow function to define an async function like this:
const functionName = async (parameter1, parameter2, ...) => {
// function body
}
Example:
Javascript
async function fun() { return 7; } fun().then(result => console.log(result)); |
Output:
7
An async function always returns a promise. Other values are wrapped in a promise automatically.So, async ensures that the function returns a promise and wraps non-promises in it. The function will return a resolved promise with the result of 7.
Await in JavaScript: “Await” in JavaScript is a language feature that was introduced with ES2017 (ECMAScript 2017), which allows developers to write asynchronous code in a way that resembles synchronous programming. Await can only be used within an “async” function, and it pauses the execution of the function until a Promise is resolved. This allows developers to avoid using callbacks and “callback hell”, and instead write code that reads more like sequential, blocking code.
Syntax:
const result = await promise;
Example 1:
Javascript
function wait(delay) { return new Promise(resolve => setTimeout(resolve, delay)); } async function printMessage(message, delay) { await wait(delay); console.log(message); } printMessage("Hello", 1000); |
Output:
Hello
Explanation: In this example, the wait function returns a promise that resolves after the specified delay. The printMessage function takes a message and a delay as arguments and logs the message to the console after waiting for the specified delay. The await keyword is used to pause the execution of the printMessage function until the wait promise is resolved. This ensures that the message is only logged to the console after the specified delay. When printMessage(“Hello”, 1000) is called, it logs the string “Hello” to the console after waiting for 1 second.
Example 2:
Javascript
function resolveAfter2Seconds() { return new Promise(resolve => { setTimeout(() => { resolve('resolved'); }, 2000); }); } async function asyncCall() { console.log('calling'); const result = await resolveAfter2Seconds(); console.log(result); // Expected output: "calling" "resolved" } asyncCall(); |
Output:
Calling Resolved
Explanation: In the above example We define a function resolveAfter2Seconds that returns a Promise that resolves after a delay of 2 seconds. The Promise constructor takes a function that defines how to resolve the Promise. In this case, we define a callback function that calls resolve after a delay of 2 seconds. We define an async function asyncCall that logs “calling” to the console, waits for the resolveAfter2Seconds Promise to resolve using the await keyword, and then logs the resolved value to the console.
Generators in JavaScript: Generator functions are a type of function introduced in the ES6 version of JavaScript. Unlike regular functions, generators allow other codes to enter and exit multiple times. When a generator function encounters a “yield” expression, it pauses its execution until it receives instructions to continue from an external source.
One of the most important distinctions between generators and regular functions is that generators can produce multiple values during their execution. Rather than generating all of the values at once, they produce a sequence of values on a per-request basis. When a value is requested, the generator function provides it until it reaches the end of its execution. At that point, the “done” flag is set to true to indicate that the generator has completed its task.
Syntax:
function* myGenerator(){
//code
}
Example:
Javascript
function* fibonacci() { let a = 0; let b = 1; while (true) { yield a; [a, b] = [b, a + b]; } } const fib = fibonacci(); console.log(fib.next().value); // 0 console.log(fib.next().value); // 1 console.log(fib.next().value); // 1 console.log(fib.next().value); // 2 console.log(fib.next().value); // 3 console.log(fib.next().value); // 5 |
Output:
0 1 1 2 3 5
Explanation: The fibonacci() function is a generator function that generates an infinite sequence of Fibonacci numbers. When the fibonacci() function is called, it returns a generator object. The yield keyword inside the while loop pauses the execution of the function and returns the current value of a. The next time the next() method of the generator object is called, the function continues executing from where it left off and calculates the next Fibonacci number.
Comparison between Async/Await and Generators:
| Aspect | Async/Await | Generators |
|---|---|---|
|
Definition |
A set of keywords in JavaScript that allow asynchronous operations to be written in a synchronous style. | A special type of function that can pause execution and return multiple values over time. |
| Execution | Executes sequentially and can pause the execution of the current function until the awaited promise is resolved. | Executes lazily and can be paused and resumed using the yield keyword. |
| Syntax | Uses the async keyword to define an asynchronous function and await keyword to wait for a promise to resolve. | Uses function* to define a generator function and yield to pause and resume execution |
| Error handling | Uses try/catch to handle errors. | Uses a combination of try/catch and .throw() method to handle errors. |
| Multiple values | Can only return a single value (or a promise that resolves to a single value). | Can return multiple values over time using yield. |
| Iteration | Cannot be used for Iteration. | Can be used for iteration using a ‘ for…of ‘ loop. |
| Compatibility | Requires a modern JavaScript runtime that supports async/await | Can be used in older JavaScript runtimes that support ES6 generators. |
| Use cases | Best suited for tasks that involve making multiple asynchronous requests and need to wait for each request to complete before moving on to the next. | Best suited for tasks that involve generating multiple values over time, such as parsing large data sets or creating infinite sequences. |
In conclusion, both Async/Await and Generators have their own strengths and weaknesses, but Async/Await is the more modern and easier-to-use option for handling asynchronous operations in JavaScript. If you are starting a new project or want to write asynchronous code that is readable and maintainable, Async/Await is the better choice.
