por Being a good web developer is not only about making your project work. Although this is the first step, developing also requires efficiency. Therefore, we recommend that you avoid repeating lines of code throughout your projects. In this post, we will teach you how to finish the sentence try catch in JavaScript to have a more efficient code.
What is the try catch statement?
Before I teach you how to finish the sentence try catch In JavaScript, we want to make sure you’re clear on this concept. This sentence is a logic composed of the keywords try and catch which allows us to control errors with functions async and await.
In this sense, the ruling try catch plays the same role as the method catch when we are working with promises. In this context, the keyword await that accompanies the functions with async plays the role of the method then: define what happens in case of success. You can learn more about this relationship between syntax in our articles on the difference between promises and async and await and transform promises with async and await.
To understand this sentence in depth, we recommend you read the article try…catch on the official Mozilla Developer Network page.
Now, just like the method finally in JavaScript allows us to give the same ending to a promise regardless of whether it resolves (handled with the methods resolve and then) or is rejected (handled with the methods reject and catch), there is a way to end the statement try catch in JavaScript.
How to end the try catch statement in JavaScript?
Finalize the sentence try catch In JavaScript it is very simple, because Just add a new section of code to this statement with the keyword finally. Within this section, we will insert the lines of code that we want our asynchronous process to complete, both in the case of success and in the case of error.
An example
Now that you know how to finish the sentence try catch in JavaScript, we will give you a possible use case. Suppose we have a project in which we need to paint some data that comes from an API. This is the case of most web projects, but in our case we will call this data tweets. So, we have a sentence try catch like the following inside our controller:
try {
tweets = await TweetService.getTweets ( );
for (const tweet of tweets) {
const tweetArticleElement = document.createElement(‘article’);
const tweetTemplate = buildTweetView(tweet);
tweetArticleElement.innerHTML = tweetTemplate;
tweetListElement.appendChild(tweetArticleElement);
}
const loader = tweetListElement.querySelector(‘.loader’);
loader.remove ( );
} catch (error) {
alert(‘error getting tweets’);
}
}
Although to understand how to finalize the sentence try catch in JavaScript the code inside try and catch is not relevant, the context of this controller is found in our posts on identifying the model view controller pattern and implementing the model view controller pattern.
In the previous lines of code, we have defined a code to execute and test. This code, if it does not have any errors, has an element loader which is removed. Now, we want to make this loader also exists when there is an error. That is to say, we want to execute the same action in case of success and in case of error.
Although we could just copy the bold lines into our code catch, this would be repeating code. At we highly recommend not repeating code, as it means losing the efficiency of your project. So what we will do is finalize the sentence try catch with the keyword finally.
Don’t forget to eliminate the lines of code that you will put in this section from the previous ones, as you would not only be repeating code, but you would also be executing the same action twice in a row.
Below we show you what our lines would look like from the catch:
} catch (error) {
alert(‘error getting tweets’);
} finally {
const loader = tweetListElement.querySelector(«.loader»);
loader.remove ( );
}
}
Do you dare to continue learning?
Now that you know what it is and how you can finalize the sentence try catch in JavaScript, It’s time to test this knowledge in your own lines of code! Therefore, we invite you to continue training with us in the Full Stack Web Development Bootcamp, an intensive course where you will learn to write your own projects with JavaScript, HTML, CSS and other tools for web development. Do you dare to continue learning? Ask for information and discover in the IT sector!