<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[I Promise I'll Get Back to You]]></title><description><![CDATA[I Promise I'll Get Back to You]]></description><link>https://devatul.com</link><generator>RSS for Node</generator><lastBuildDate>Sat, 16 May 2026 23:44:51 GMT</lastBuildDate><atom:link href="https://devatul.com/rss.xml" rel="self" type="application/rss+xml"/><language><![CDATA[en]]></language><ttl>60</ttl><item><title><![CDATA[Understanding Promises in Javascript]]></title><description><![CDATA[Before understanding the promise, we first need to understand some terminology related to it.

Callback: A callback is a function that is provided as an argument to another function. It is executed after the main function has finished its task.

Asyn...]]></description><link>https://devatul.com/understanding-promises-in-javascript</link><guid isPermaLink="true">https://devatul.com/understanding-promises-in-javascript</guid><category><![CDATA[JavaScript]]></category><category><![CDATA[asynchronous JavaScript]]></category><category><![CDATA[promises]]></category><category><![CDATA[Beginner Developers]]></category><category><![CDATA[callback]]></category><dc:creator><![CDATA[Atul Chourasiya]]></dc:creator><pubDate>Sat, 12 Jul 2025 09:55:33 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1752315854538/14df3fa2-0efb-4715-84ef-dbb2baa4400b.webp" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>Before understanding the promise, we first need to understand some terminology related to it.</p>
<ul>
<li><p><strong>Callback:</strong> A callback is a function that is provided as an argument to another function. It is executed after the main function has finished its task.</p>
</li>
<li><p><strong>Asynchronous:</strong> An asynchronous action is a task that runs in the background and completes later, allowing the main program to keep running without waiting for it.</p>
</li>
<li><p><strong>Settle the promise:</strong> A Promise is considered settled when it is either resolved or rejected. In other words, to finish its pending state.</p>
</li>
<li><p><strong>Executor</strong>: The executor is the function inside a <code>Promise</code> that starts the asynchronous operation and calls the callback <code>resolve</code> or <code>reject</code> after the asynchronous function has completed its execution to settle the promise.</p>
</li>
<li><p><strong>Consumer</strong>: In JavaScript (especially with Promises), a consumer is the code that uses or handles the result of an asynchronous operation, typically using <code>.then()</code>, <code>.catch()</code>, or <code>await</code>.</p>
</li>
<li><p><strong>Clean-up in promises:</strong> Clean up in promises means doing a final task after the promise is finished, whether it was successful or failed.</p>
</li>
</ul>
<p>If you're in a JavaScript interview and the interviewer asks, "What is a Promise?", and you want to respond with a clean, to-the-point answer, here's a typical one-liner that does the job</p>
<blockquote>
<p>A <strong>Promise</strong> is a JavaScript object that represents the result of an asynchronous operation, allowing you to handle success or failure in a structured and non-blocking way.</p>
</blockquote>
<p>But wait, Promises are more than that. Let's take a deep dive into Promises with Developer Atul.</p>
<p>Let's first understand what "<strong>JavaScript object that represents the result of an asynchronous task</strong>" means.</p>
<pre><code class="lang-javascript"><span class="hljs-keyword">const</span> IPromise = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>)=&gt;</span>{

})
<span class="hljs-built_in">console</span>.log(IPromise);
</code></pre>
<p>This is the output of the above code directly from my browser console.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1752303388626/4f181673-7447-4a01-9cb0-6b3a69fb90c0.png" alt class="image--center mx-auto" /></p>
<p>This is what that special JavaScript object looks like.</p>
<p>Okay, but you may ask:</p>
<ul>
<li><p><strong>What does this Eventual Completion mean?</strong></p>
</li>
<li><p><strong>What we need to do after Completion?</strong></p>
</li>
<li><p><strong>What's so special about it? It looks like a normal JavaScript object.</strong></p>
</li>
</ul>
<p>Let's understand these questions.</p>
<p>In the output above, you can see <code>[[PromiseState]]: "pending"</code>. This is one of the three states a promise can be in. The other two states are <code>rejected</code> and <code>resolved</code>. Let’s see the details.</p>
<ul>
<li><p><strong>Pending:</strong> When we create a promise, we pass an executor function to the constructor. Behind the scenes, the constructor immediately calls the executor function, with resolve and reject callbacks and sets the state to <strong>pending</strong>.</p>
</li>
<li><p><strong>Fulfilled:</strong> When the promise is successfully resolved, it will call the <code>resolve</code> callback and change the state to <strong>fulfilled</strong> .</p>
</li>
<li><p><strong>Rejected:</strong> When there is any error occur in the executer function then <code>reject</code> callback will be called and change the state to <strong>rejected.</strong></p>
</li>
</ul>
<p>Below code help you understand this more clearly.</p>
<pre><code class="lang-javascript"><span class="hljs-comment">// Fake custom Promise to simulate how it works</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">MyPromise</span>(<span class="hljs-params">executor</span>) </span>{
  <span class="hljs-comment">// internal state</span>
  <span class="hljs-keyword">let</span> state = <span class="hljs-string">"pending"</span>;
  <span class="hljs-keyword">let</span> value = <span class="hljs-literal">undefined</span>;

  <span class="hljs-comment">// internal resolve function</span>
  <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">resolve</span>(<span class="hljs-params">result</span>) </span>{
    <span class="hljs-keyword">if</span> (state === <span class="hljs-string">"pending"</span>) {
      state = <span class="hljs-string">"fulfilled"</span>;
      value = result;
      <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"Promise resolved with:"</span>, value);
    }
  }

  <span class="hljs-comment">// internal reject function</span>
  <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">reject</span>(<span class="hljs-params">error</span>) </span>{
    <span class="hljs-keyword">if</span> (state === <span class="hljs-string">"pending"</span>) {
      state = <span class="hljs-string">"rejected"</span>;
      value = error;
      <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"Promise rejected with:"</span>, value);
    }
  }

  <span class="hljs-comment">// ✅ Constructor calls executor immediately</span>
  <span class="hljs-keyword">try</span> {
    executor(resolve, reject); <span class="hljs-comment">// This line is the key!</span>
  } <span class="hljs-keyword">catch</span> (err) {
    reject(err); <span class="hljs-comment">// If executor throws, promise is rejected</span>
  }
}

<span class="hljs-comment">// Usage</span>
<span class="hljs-keyword">const</span> p = <span class="hljs-keyword">new</span> MyPromise(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =&gt;</span> {
  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"Executor function is running"</span>);
  resolve(<span class="hljs-string">"Data loaded"</span>);
});
</code></pre>
<p>The above explanation gives a clear picture of what 'eventual completion' means. it will wait for the result to come in an asynchronous function.</p>
<p>To answer rest two question we need to understand other methods of our special object. we have seen how constructor works and state of promise. now let see what are other methods.</p>
<ul>
<li><p><strong>Then:</strong> The <code>.then()</code> method is called when a Promise is successfully fulfilled, and it is part of the <strong>consumer interface</strong> of a Promise, used to define what should happen next with the resolved value.</p>
</li>
<li><p><strong>Catch:</strong> The <code>catch()</code> method is part of the <strong>consumer interface</strong> of a Promise. It is used to handle errors or rejections that occur during the asynchronous operation or anywhere in the promise chain.</p>
<p>  The <code>catch()</code> method is called when the Promise is <strong>rejected</strong> using the <code>reject()</code> function inside the executor. It is also triggered if an <strong>error is thrown</strong> inside any of the <code>then()</code> blocks in the promise chain.</p>
</li>
<li><p><strong>Finally:</strong> The <code>finally()</code> method is part of the <strong>consumer interface</strong> of a Promise and is used to perform <strong>clean-up work</strong> after the Promise is settled, regardless of whether it was fulfilled or rejected.</p>
</li>
</ul>
<p>One of the most powerful features of the Promise <strong>consumer interface</strong> is that you can <strong>chain</strong> <code>.then()</code>, <code>.catch()</code>, and <code>.finally()</code> methods one after another.</p>
<pre><code class="lang-javascript"><span class="hljs-comment">// A function that returns a Promise</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">doAsyncTask</span>(<span class="hljs-params"></span>) </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =&gt;</span> {
    <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> {
      <span class="hljs-keyword">const</span> success = <span class="hljs-literal">true</span>;

      <span class="hljs-keyword">if</span> (success) {
        resolve(<span class="hljs-string">"Task completed"</span>);
      } <span class="hljs-keyword">else</span> {
        reject(<span class="hljs-string">"Task failed"</span>);
      }
    }, <span class="hljs-number">1000</span>);
  });
}

<span class="hljs-comment">// Consuming the Promise using chaining</span>
doAsyncTask()
  .then(<span class="hljs-function"><span class="hljs-params">result</span> =&gt;</span> {
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"Step 1:"</span>, result); <span class="hljs-comment">// "Task completed"</span>
    <span class="hljs-keyword">return</span> result + <span class="hljs-string">" → Step 2 done"</span>;
  })
  .then(<span class="hljs-function"><span class="hljs-params">updatedResult</span> =&gt;</span> {
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"Step 2:"</span>, updatedResult);
    <span class="hljs-keyword">return</span> updatedResult + <span class="hljs-string">" → Step 3 done"</span>;
  })
  .then(<span class="hljs-function"><span class="hljs-params">finalResult</span> =&gt;</span> {
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"Final result:"</span>, finalResult);
  })
  .catch(<span class="hljs-function"><span class="hljs-params">error</span> =&gt;</span> {
    <span class="hljs-built_in">console</span>.error(<span class="hljs-string">"Caught error:"</span>, error);
  })
  .finally(<span class="hljs-function">() =&gt;</span> {
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"Clean-up: This runs no matter what"</span>);
  });
</code></pre>
<p>The above code gives the following output. First, let's see the output, and then we’ll discuss it</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1752309417243/f45a8a88-592a-4a7a-86e5-6925524d70c1.png" alt class="image--center mx-auto" /></p>
<p>In the output we can see the code is executed successfully and in sequential manner. We can also see the state as 'fulfilled' — this means it’s a live object</p>
<blockquote>
<p><em>A live object means the output (like a list or collection) is linked to the original data and reflects real-time changes, without needing to re-query or refresh it.</em></p>
</blockquote>
<p>In the above output we can also see we can chain <code>.then()</code> multiple times and <code>.catch()</code> to catch any error in any stage and also run clean-up using <code>.finally</code> It will run no matter the result of the Promise..</p>
<p>Now we reached to the point where we can confidently say that Promise is indeed a special object.</p>
<ul>
<li><p><strong>It tracks asynchronous state</strong></p>
<ul>
<li><p>A regular object stores static data.</p>
</li>
<li><p>A Promise tracks a dynamic state:</p>
<ul>
<li><code>pending</code> → <code>fulfilled</code> or <code>rejected</code>.</li>
</ul>
</li>
</ul>
</li>
<li><p><strong>It has built-in methods</strong></p>
<ul>
<li><p>It comes with powerful methods like:</p>
<ul>
<li><p><code>.then()</code> – handles success</p>
</li>
<li><p><code>.catch()</code> – handles errors</p>
</li>
<li><p><code>.finally()</code> – handles clean-up<br />  These methods let you "chain" actions in a smooth and readable way.</p>
</li>
</ul>
</li>
</ul>
</li>
<li><p><strong>It automatically executes</strong></p>
<ul>
<li>When you create a Promise with <code>new Promise()</code>, the executor function runs immediately — this isn't the case with regular objects.</li>
</ul>
</li>
<li><p><strong>It settles only once</strong></p>
<ul>
<li>Once a Promise is either resolved or rejected, its state <strong>cannot change again</strong> — this one-time state change is enforced internally by JavaScript.</li>
</ul>
</li>
<li><p><strong>It enables better async handling</strong></p>
<ul>
<li>It’s deeply integrated with <code>async/await</code>, modern syntax for writing asynchronous code in a synchronous style.</li>
</ul>
</li>
</ul>
<p>We’ll take a deep dive into async/await in the next article. Till then...</p>
<p>Happy Coding</p>
]]></content:encoded></item></channel></rss>