What is Observable | Observables | Angular 12+

TL;DR

Learn the basics of asynchronous programming in JavaScript, including the difference between promises and observables.

Transcript

hello and welcome back in this lecture let's learn what is an observable and where and when do we use it now in a very simple terms we use observables to perform asynchronous operation and handle asynchronous data another way of performing asynchronous operation in javascript and handling asynchronous data is by using promises so we can handle asyn... Read More

Key Insights

• 🧵 JavaScript is a single-threaded language, and asynchronous programming is used to prevent blocking of the main thread.
• 💨 Promises and observables are two ways to handle asynchronous operations in JavaScript and Angular.
• 🎏 Promises return all the data at once when it is ready, while observables stream the data in packets/chunks as it becomes available.
• 😒 Observables require a subscriber to use the data, and they are provided by the rxjs library.
• 👻 rxjs is a powerful library for reactive programming in JavaScript, allowing manipulation of asynchronous data streams.
• ❓ An observable can be created by using the observable constructor with a callback function that emits data using the 'next' method.

Questions & Answers

Q: What is the difference between synchronous and asynchronous programming?

Synchronous programming in JavaScript executes code line by line, while asynchronous programming allows code to run in the background without blocking the main thread, improving performance.

Q: What is the difference between a promise and an observable?

A promise returns all the data at once when it is ready, while an observable streams the data in packets/chunks as it becomes available. Observables also require a subscriber to use the data.

Q: Is a promise native to JavaScript?

Yes, promises are a native feature of JavaScript. However, observables are not native and are provided by the rxjs library.

Q: What is rxjs and how is it related to observables?

rxjs is a JavaScript library that allows working with asynchronous data streams. It provides observables and other tools for reactive programming in JavaScript.

Q: How can an observable be created in an Angular application?

An observable can be created by importing the observable class from the rxjs library and using the observable constructor with a callback function that emits data using the 'next' method.

Key Insights:

• JavaScript is a single-threaded language, and asynchronous programming is used to prevent blocking of the main thread.
• Promises and observables are two ways to handle asynchronous operations in JavaScript and Angular.
• Promises return all the data at once when it is ready, while observables stream the data in packets/chunks as it becomes available.
• Observables require a subscriber to use the data, and they are provided by the rxjs library.
• rxjs is a powerful library for reactive programming in JavaScript, allowing manipulation of asynchronous data streams.
• An observable can be created by using the observable constructor with a callback function that emits data using the 'next' method.
• Observables can be used for handling long network requests without blocking the main thread in an Angular application.

Summary & Key Takeaways

• JavaScript is a single-threaded language, so asynchronous operations are needed to prevent blocking of the main thread.

• Promises and observables are two ways to handle asynchronous operations in Angular.

• Promises return all the data at once when it is ready, while observables stream the data in packets.