As a developer, you are always looking for ways to improve your skills and increase your efficiency. In this article, we will share 20 useful JavaScript tips that can help you do just that. From simple ways to improve readability to more advanced techniques, these tips are sure to come in handy in your projects.

1. Number Separator

When working with large numbers, it can be difficult to read and understand them at a glance. One simple way to improve their readability is to use underscores as separators.

2. Event Listeners Run Only Once

Sometimes you may want to add an event listener to an element, but you only want it to run once. You can use the once option to accomplish this:

3. Console.log Variable Wrapper

When using console.log(), you can enclose the arguments in curly braces to see both the variable name and the variable value. This can be helpful for debugging and understanding your code better.

4. Check That Caps Lock Is On

You can use the KeyboardEvent.getModifierState() method to detect if Caps Lock is on. This can be useful if you are working on a login form or other application where the case of letters matters.

5. Get Min/Max Values from an Array

If you want to find the minimum or maximum value in an array, you can use the Math.min() or Math.max() functions in combination with the spread operator (…).

6. Get the Mouse Position

The clientX and clientY properties of the MouseEvent object can be used to get information about the coordinates of the current mouse position.

7. Copy to Clipboard

The Clipboard API can be used to create a “Copy to Clipboard” function. Here’s an example of how to do it:

8. Shorten Conditional Judgment Statements

If you have a function that is only executed when a condition is true, you can use the && shorthand to write it more concisely. For example:

9. Use Console.table() for Formatted Tables

The console.table() method can be used to print data in a table format in the console. The syntax is:

Here’s an example of how to use it:

10. Convert Strings to Numbers

You can use the unary plus operator (+) to quickly convert a string to a number. For example:

11. De-duplicate an Array

You can use the spread operator and the Set object to remove duplicates from an array. Here’s an example:

12. Filter Out Dummy Values from an Array

If you want to filter out dummy values (such as undefined, null, and NaN) from an array, you can use the filter() method. Here’s an example:

13. Create a URL Query String

You can use the URLSearchParams object to create a URL query string from an object. Here’s an example:

14. Check if an Element Is in the Viewport

You can use the getBoundingClientRect() method and the window.innerWidth and window.innerHeight properties to check if an element is in the viewport. Here’s an example:

15. Create a Throttled Function

If you want to limit the rate at which a function is called, you can use the setTimeout() method to create a “throttled” function. Here’s an example:

16. Use Array.includes() for Quick Membership Checking

The Array.includes() method can be used to quickly check if an element is in an array. It is more concise than using the indexOf() method. Here’s an example:

17. Use Array.find() to Get the First Matching Element

The Array.find() method can be used to get the first element in an array that matches a specific condition. Here’s an example:

18. Use Object.values() to Get an Array of an Object’s Values

The Object.values() method can be used to get an array of an object’s values. This can be useful when you want to work with the values of an object in an array-like manner. Here’s an example:

19. Use Array.reduce() to Sum Arrays

The Array.reduce() method can be used to reduce an array to a single value by applying a function to each element. Here’s an example of how to use it to sum an array:

20. Access Element’s Custom Data Attributes with the dataset Property

The dataset property can be used to access an element’s custom data attributes (data-*). Here’s an example: