Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
March 17, 2022 10:10 pm GMT

Best 10 Code Snippets for JavaScript in 2022

What is a Code Snippet?

A Code Snippet is a block of code you can share and reuse. By reusing safe and proven code, you not only improve your productivity but you also make sure you always import the correct code and are not missing anything (e.g. missing argument, not checking error code or exceptions).

Why using Code Snippet for JavaScript?

Writing JavaScript code is quite complex. While JavaScript is a very popular language, its lack of typing can make it really hard to follow the code path and understand how code actually works! Sharing and using vetted code patterns directly in your IDE maximize your productivity but also make sure you are using the correct code block for your job!

Using Snippets

You can use these snippets directly in VS Code by using shortcuts! For each snippet, we provide a shortcut. Download the Codiga VS Code extension and just type the shortcut, as shown below.

Use Snippet Email Valid in IDE

1. Check if email is valid

Check if email is valid

Shortcut: .email.isvalid

This snippet checks if an email address is valid using a regular expression. This is often very complicated to verify an email in the frontend, which is why such a snippet is so valuable!

Link to the snippet

2. Check if an array is empty

Check if array is empty

Shortcut: .array.is_empty

Checking an array in JavaScript is not that easy! First, there is no guarantee that the value you evaluate is in fact an array. You need to first check this and then, check that the length is 0.

Link to the snippet

3. Time a function execution

Profiling the execution time of a function

Shortcut: .time.profiling

When your application is slow, it's very important to measure the execution time of function that may take some time to execute. With this snippet, you can then measure the time it takes to execute a piece of code. Measure the initial time using console.time() and after your code is executed, get the elapsed time using console.timeEnd().

Link to the snippet

4. Generate a UUID

Generate UUID

Shortcut: .uuid.generate

When your application is slow, it's very important to measure the execution time of function that may take some time to execute. With this snippet, you can then measure the time it takes to execute a piece of code. Measure the initial time using console.time() and after your code is executed, get the elapsed time using console.timeEnd().

Link to the snippet

5. Convert Celsius to Fahrenheit

Celsius to Fahrenheit in JavaScript

Shortcut: .celsius.fahrenheit

When your application is slow, it's very important to measure the execution time of function that may take some time to execute. With this snippet, you can then measure the time it takes to execute a piece of code. Measure the initial time using console.time() and after your code is executed, get the elapsed time using console.timeEnd().

Link to the snippet

6. Getting the result of multiple Promise

Using Promise.all in JavaScript

Shortcut: .promise.all

Instead of getting the result of each Promise one at a time, it's very important to avoid waiting for each promise and instead using Promise.all. This can result in significant performance improvements.

Link to the snippet

6. Getting the result of multiple Promise

Using Promise.all in JavaScript

Shortcut: .promise.all

Instead of getting the result of each Promise one at a time, it's very important to avoid waiting for each promise and instead using Promise.all. This can result in significant performance improvements.

Link to the snippet

7. Map an array or list

Map Array in JavaScript

Shortcut: .array.map

Mapping the values of an array to another value is quite difficult if you do not use map. In JavaScript, you can use the .map function to map the array. It takes a function that has transform each element of the array.

Imagine you have a list of numbers and you want to transform it into new list, each element being the double of the initial element. You would then use the following code.

const newArray = originalArray.map((element) => element * 2);

Link to the snippet

8. Filter array

Filter array in JavaScript

Shortcut: .array.filter

As for .map(), JavaScript also includes the .filter() function to filters elements of an array or list. The function takes a predicate that indicate if the element should be filtered or not.

Link to the snippet

9. GET request

GET/fetch request in JavaScript

Shortcut: .request.get

To issue a simple GET request on a URL in JavaScript, simply use the fetch function. The then function is chained to convert the result into a JSON object you can then use and process in your program.

Link to the snippet

10. POST request

POST request in JavaScript

Shortcut: .request.post

A post request is slightly more complicated than a GET request. At first, the method argument of the fetch function must be set to POST. Then, the headers must also specify the content is in JSON and the body should be a JSON document. The different .then call transform the response into a JSON format and the .catch call is invoked if any exception occurs in the process.

Link to the snippet

How to add your own Code Snippet?

You can add your own snippet and share them with the community using code-snippets.dev and the underlying Codiga snippet engine. Create an account on app.codiga.io, login and create your recipe. Make sure you create them with the public visibility to give all users access to the recipes!

Developer Resources

  • Code Snippets search engine code-snippets.dev for searching and finding same reusable code.
  • Codiga for defining your own code snippets

Original Link: https://dev.to/codiga/best-10-code-snippets-for-javascript-in-2022-4j6

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To