Observable vs Promise: Understanding the Differences for Interviews | Angular Interview Concepts

Summary

In this video, the presenter explains the key differences between Observables and Promises in Angular, focusing on concepts frequently asked in interviews. Key points include their execution behavior, callbacks, ability to emit multiple values, and whether they are cancellable. The video also highlights that Observables are lazy, can be synchronous or asynchronous, and support operators like map and retry, while Promises are eager, always asynchronous, and do not support such operators. The goal is to help viewers gain a deep understanding of these concepts to confidently answer interview questions.

Takeaways

• 😀 **Observable vs Promise**: Observables have 3 callbacks (next, error, complete), whereas Promises have only 2 (then, catch).
• 😀 **Eager vs Lazy Execution**: Promises execute immediately once created, while Observables only execute when subscribed to (lazy).
• 😀 **Multiple vs Single Values**: Observables can emit multiple values over time, while Promises can emit only a single value.
• 😀 **Cancellability**: Observables are cancellable using `unsubscribe()`, but Promises cannot be cancelled once initiated.
• 😀 **Asynchronous Nature**: Promises are always asynchronous, while Observables can be either synchronous or asynchronous.
• 😀 **RxJS Operators**: Observables support RxJS operators (e.g., `filter`, `reduce`, `retry`), providing more flexibility compared to Promises.
• 😀 **Practical Example**: In the demo, clicking 'create' shows how a Promise executes immediately, while an Observable waits for a subscription to start.
• 😀 **Subscription Behavior**: Observable execution depends on when it's subscribed to, while Promises begin executing as soon as they're created.
• 😀 **Real-World Application**: In Angular interviews, you’re likely to be asked about the differences between Observables and Promises, especially in asynchronous contexts.
• 😀 **Core Angular Concepts**: Understanding the differences between Observable and Promise is crucial for handling asynchronous tasks in Angular applications.

Q & A

What is the primary difference between Observable and Promise in Angular?

The key difference is that Observables have three callbacks: success, error, and complete, whereas Promises only have two: success and error. This makes Observables more flexible for handling asynchronous operations.

Why is Observable considered lazy and Promise eager?

Promises are eager, meaning they execute immediately once created, whereas Observables are lazy and only execute when subscribed to. This difference is demonstrated by the fact that a Promise runs as soon as it is created, while an Observable doesn't emit data until it is subscribed to.

Can you explain how Observable emits values over time compared to Promise?

Observables can emit multiple values over time, while Promises only emit a single value. For example, using setInterval with an Observable allows it to emit values continuously, while a Promise only resolves once with its first value.

How does the cancel functionality differ between Observable and Promise?

Observables are cancellable. You can unsubscribe from an Observable to stop it from emitting values. In contrast, Promises cannot be cancelled once they have started executing.

What happens when you try to cancel an Observable subscription?

When you cancel an Observable subscription using the unsubscribe method, it stops emitting values. This demonstrates that Observables are cancellable, unlike Promises, which will continue to resolve their values regardless of further interaction.

Can a Promise be synchronous, like an Observable?

No, Promises are always asynchronous. However, Observables can be either synchronous or asynchronous depending on how they are executed. You can make an Observable synchronous by executing it directly without using asynchronous functions like setTimeout.

What is the difference in execution order between an Observable and a Promise when both are asynchronous?

When both are asynchronous, Promises are always executed first because they go through the event loop. Observables, on the other hand, can be synchronous if executed directly or asynchronous if wrapped in a setTimeout or similar function.

What are some additional operators supported by Observables that Promises do not have?

Observables support several operators from RxJS, such as filter, reduce, and retry. These operators allow more advanced control over the flow of data and handling of errors, which Promises do not support.

Why is it important to understand the core concepts of Observable and Promise for Angular interviews?

Understanding the core concepts behind Observables and Promises is crucial because interview questions may be asked in various forms. If you simply memorize question and answer formats, you might struggle to adapt when the question is phrased differently.

Can you demonstrate how Observables and Promises behave differently when handling multiple values?

Yes, in the provided example, an Observable emits multiple values over time using setInterval, while a Promise only emits the first value and resolves immediately. This demonstrates how Observables are designed for handling streams of data, unlike Promises which resolve once.