try-catch in JavaScript | Error Handling
Published: 2020-06-02 04:05:12

<!-- wp:paragraph -->
<p>In<strong> </strong>this tutorial, you will learn everything about JavaScript&nbsp;<code>try...catch</code>&nbsp;statement.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Sometimes, you are developing any web or app using javascript or any frameworks of javascript. That time no matter how much you experience in programming languages. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Because while developing the web and the app, some error remains. Usually, at that time script execution halt., If you will use <code>try...catch</code>  <a href="https://www.tutsmake.com/javascript-comments-identifiers-keywords-statements-expression">statement</a> in your js script, so this will help you to print <a href="https://www.tutsmake.com/javascript-error-types/">errors</a> to console.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>JavaScript&nbsp;<code>try...catch</code>&nbsp;statement</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The&nbsp;try...catch&nbsp;statement is used to handle errors in the js script.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The following syntax represents the &nbsp;<code>try...catch</code>&nbsp;statement:</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">try {
  // code may cause error
} catch(error){
  // code to handle error
}
</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p><strong>Here,</strong></p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>First, the code in&nbsp;<code>try {...}</code>&nbsp;is executed.</li><li>If not come to errors in the script, then&nbsp;<code>catch(err)</code>&nbsp;is ignored: the execution arrives at the finish of&nbsp;<code>try</code>&nbsp;and goes on, skipping&nbsp;<code>catch</code>. </li><li>If an error occurs,  <code>try</code>&nbsp;execution is stopped and jumps to the&nbsp;<code>catch</code>&nbsp;block.</li><li>If you want to see what error happened, you can access an&nbsp;<code>error</code>&nbsp;object and display errors  inside a <code>catch</code>&nbsp;block.</li></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>So far, you have seen the above given syntax of  <code>try...catch</code>&nbsp; and what it works.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>But now you will learn by  <code>try...catch</code>&nbsp; example and also will see the flowchart of try-catch, how work it.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The following flowchart represents the flow of the&nbsp;<code>try...catch</code>&nbsp;statement:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":8685,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.tutsmake.com/wp-content/uploads/2020/05/try-catch-javascript-flowchart.jpeg" alt="try catch javascript flowchart" class="wp-image-8685"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Let's take a look an example of <code>try...catch</code>&nbsp;statement.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>See the following example:</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">try {
  myFunction();
} catch(error){
    console.log(error); // print error object
}</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p>Output</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">ReferenceError: myFunction is not defined</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p>When you run the above example script, it display error&nbsp;<code>myFunction()</code>&nbsp;<a href="https://www.tutsmake.com/javascript-function-with-example/">function</a> doesn’t exist, therefore, JavaScript throws an error.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In javascript, the error object has two main properties: </p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Error name</li><li>Error message</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>If you are using a  <code>try..catch</code>&nbsp;  statement. And you want to print the custom in your script and program. So for this you have to use  <code>try/throw/catch</code>&nbsp;statements.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Let's take a look example using&nbsp;<code>try/throw/catch</code>&nbsp;statements:</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code {"language":"jscript"} -->
<pre class="wp-block-syntaxhighlighter-code">try{
  throw new Error ('This is a new error')
}
catch(error){
  console.log(error)
  console.log("End of try-catch block")
}</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p>Output</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code"> Error: This is a new error</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p>This example shows how you can create our own error in the&nbsp;<code>throw</code>&nbsp;block. Then&nbsp;<code>try</code>&nbsp;the code which should&nbsp;<code>throw</code>&nbsp;an error which should be caught by the&nbsp;<code>catch</code>&nbsp;block.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>try…catch…finally statement</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The&nbsp;<code>try..catch</code>&nbsp;statement has one more clause&nbsp;<code>finally</code>. This is a optional clause and it runs in all situations.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In other words, The piece of code always executes, which is written inside&nbsp;<code>finally</code>&nbsp;block. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The following syntax represents the <strong>try…catch…finally</strong> statement:</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code {"language":"jscript"} -->
<pre class="wp-block-syntaxhighlighter-code">try {
   ... try to execute the code ...
} catch(e) {
   ... handle errors ...
} finally {
   ... execute always ...
}</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p>Let's take a look the following example:</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">function myFunc(){
  try {
    return 'try';
  } catch(error) {
    return 'catch';
  } finally {
    return 'finally';
  }
}
console.log(myFunc());
</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p>Output</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">finally</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p>Run the above script, it will return "finally" as output. Because no error happens in the&nbsp;<code>try</code>&nbsp;block. However, the try block to be ignored.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Note that two important points, if you are using try...catch...finally statement:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>If you remove the&nbsp;<code>finally</code>&nbsp;clause, the&nbsp;<code>myFunction()</code>&nbsp;function will return 'first' as output.</li><li>Once you use the&nbsp;<code>finally</code>&nbsp;clause, the&nbsp;<code>catch</code>&nbsp;clause becomes optional.</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Note that, The  <code>try..catch</code>&nbsp;statement works to handle errors in a js script.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Conclusion</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In this tutorial, you have learned everything about JavaScript&nbsp;<code>try...catch</code>&nbsp;statement as well as <code>finally</code>&nbsp;statement and using this  how to handle errors in javascript </p>
<!-- /wp:paragraph -->