Understanding Why console.log Behaves Differently with Promises in JavaScript

---

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---

Let’s break this down to understand how Promises work along with the flow of execution in JavaScript.

The Problem Explained

[[See Video to Reveal this Text or Code Snippet]]

Output

When you run this code, the output looks like this:

[[See Video to Reveal this Text or Code Snippet]]

At this point, you may wonder why "working 1.0" is printed immediately, but there’s no similar output when calling .then() on the promise.

Understanding Promise Instantiation and .then()

1. The Promise Constructor

When you create a new Promise using new Promise(), the function you pass to it is executed immediately. This means that:

The asynchronous operation (the setTimeout) is set up to run later but does not block the execution.

2. Asynchronous Nature

The setTimeout schedules the log statement "working 2.0" to run after 7 seconds, which is why you see it later.

When the Promise is created, it starts executing the function you provided without waiting for then().

3. Calling .then()

The .then() method does not cause the function inside of new Promise() to run again. Instead, it does the following:

It waits for the promise to resolve and then executes the callback function you provide.

Summary of the Flow

During Promise Instantiation:

Immediate execution of the function within the Promise.

Logs "working 1.0" immediately.

Sets up the asynchronous behavior with setTimeout.

When Promise Resolves:

After 7 seconds, logs "working 2.0".

Executes the .then() method and logs the resolved value.

Conclusion

The key takeaway here is that the function passed to new Promise() is invoked only once during instantiation, while the function provided to .then() is executed only after the promise has resolved. This allows you to handle asynchronous operations in a clean and readable manner while letting JavaScript handle the complexities of timing and resolution.

This understanding is crucial for mastering asynchronous programming in JavaScript and effectively using Promises. If you have questions or need further clarification on Promises and asynchronous behavior, feel free to ask!