title: Java Script - Error handling in async/await
body: <p>I am new to javascript and I was learning about async/ await. I studied through different document and got basic idea. While running some example I faced some unexpected result. I am not sure where did I miss.</p>
  <p>Code:</p>
  <pre><code>var colors = [&quot;RED&quot;, &quot;GREEN&quot;, &quot;YELLOW&quot;];
  
  const getColor = async () =&gt; {
    var value = &quot;&quot;;
    colors.forEach((color) =&gt; {
      value = value + color + &quot; &quot;;
    });
    return value;
  };
  
  
  const middleware = async () =&gt; {
    addColor(null)
      .then(() =&gt; {
        getColor().then((result) =&gt; {
          console.log(result);
        });
      })
      .catch((err) =&gt; {
        console.log(err.message + &quot; at  middleware&quot;);
      });
  };
  
  const addColor = async (color) =&gt; {
    validateColor(color)
      .then(() =&gt; {
        console.log(&quot;Adding data&quot;);
        colors.push(color);
      })
      .catch((err) =&gt; {
        console.log(err.message + &quot; at add color&quot;);
        throw err;
      });
  };
  
  const validateColor = async (color) =&gt; {
    if (color == null) {
      throw new Error(&quot;Color cannot be empty&quot;);
    }
  };
  
  middleware();
  
  
  
  </code></pre>
  <p>After calling the middleware function , the expected result was to  print the error message only . But it print the name of colors as well.
  Output:</p>
  <p><a href="https://i.stack.imgur.com/YfIPM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YfIPM.png" alt="enter image description here" /></a></p>
  <p>I am not able to understand why the code inside <strong>then()</strong> was executed even though the <strong>addColor()</strong> is throwing some error? Also, why the catch block at <strong>middleware()</strong> is not being called ?</p>