How to Write Professional-Level Code with ES6 Features ✨

Tips to Elevate your JavaScript

When ES6 was introduced in 2015,JavaScript got a big update that made writing code better and easier. ES6 added new tools and shortcuts to help developers write less but do more. Let's explore some cool ES6 tricks that will make your code stand out.

Use Arrow functions for shorter syntax.

Arrow functions offer more concise syntax for writing functions in JavaScript. Their benefits are seen in one-liner functions like when using the .map() method

Use Async/Await for Asynchronous Code

Before ES6, working with asynchronous operations involved chaining promises with .then() and .catch() methods, which could quickly become complex, especially when working with multiple asynchronous operations.

However, with ES6 came Asyn and Await, which provided a much easier way of working with promises. By adding the keyword async to any function, the function will automatically return a Promise. The await keyword will then pause the function's execution until the promise is settled.

Using async and await, therefore, streamlines the handling of asynchronous operations.

Using async await not only simplifies asynchronous code but also makes it easy to handle errors by using a try ..catch block that will catch any error that may occur during the async operation. Whether an error occurs while waiting for the fetch call to resolve or during processing the response data inside the try block, it will be caught and handled in the same catch block.

Use Template Literals

Template literals allow developers to embed expressions within string literals; for example, suppose you want to fetch data from the following API's - —

• https://jsonplaceholder.org/posts

• https://jsonplaceholder.org/posts/1

Rather than having to define the API every time, you can define a BASE_URL (

https://jsonplaceholder.org/), then, for each request, use template literals to construct your URLs as shown below.

Use Array and Object destructuring.

APIs, especially from large applications, may contain nested data. To make it easier to work with the data, always use destructuring to extract the necessary information or to rename long key names.

For example, the API we have used above contains the following data;

After making a post request, we can destructure and get the necessary values. For example, Let’s make a fetch request and destructure the id, title, and content property properties from the array response.

Which other ES6 features have been a lifesaver you can't live without? Share in the comments! 😊