12 Extremely Useful Hacks for JavaScript

JavaScript is a vital programming language known for its strength and flexibility in web development. Regardless of your programming level, several methods or tips can be used to make your work easier and increase your productivity. In this blog article, we’re examining 12 useful JavaScript hacks. Each hack comes with its advantages that help us understand why it’s suited for our everyday use.

12 JavaScript Hacks

1. Leverage Optional Chaining (?.) for Property Access

Most nested object properties risk errors if a property is undefined or null. Optional chaining (?.) allows us to safely navigate between objects by returning undefined should a property be absent, therefore preventing runtime crashes or mistakes.

If any part of the chain is undefined or null, JavaScript short-circuits and returns undefined instead of throwing an error.

Access to nested properties without try-catch blocks is made possible by the syntax for handling uncertain data, such as API responses, which eliminates the need for verbose checks.  It can be used strategically for code integrity, is lightweight, and interfaces with contemporary frameworks.

2. Simplify Array Flattening with Flat() and FlatMap()

Nested arrays can complicate data processing tasks. The flat() method flattens arrays to a specified depth, while flatMap() combines mapping and flattening into a single operation.

Both the flatMap() and flat() methods simplify how you interact with arrays, for example, by splitting CSV-style strings, extracting sub-arrays, and gathering information from multiple sources. flat() is more efficient on arrays that are very long and nested.

3. Use Nullish Coalescing (??) for Default Values

The logical OR operator (||) incorrectly treats falsy values like 0 or false as invalid, leading to wrong defaults. The nullish coalescing operator (??) only falls back to the default for null or undefined.

Thanks to the (??) operator, numbers, booleans, form data, and configuration objects are handled securely by default, making code shorter, safer to run, and not affecting performance.

4. Optimize Loops with Array Destructuring

Destructuring in for...of loops allows for the direct extraction of array or object properties, minimizing the use of temporary variables and enhancing readability.

Destructuring allows e-commerce to create reports and logging data; it also helps in developers to easily go through complex data.

5. Use Array.at() for Cleaner Index Access

The at() method provides a straightforward way to access array elements, supporting negative indices to retrieve items from the end.

Traditionally, accessing the last item in an array looked like this:

With .at(), it becomes cleaner and more readable:

This method offers syntax similar to Python, is intuitive, and is suitable for log access, UI display, and dynamic element selection. Its performance is comparable to standard bracket notation, and negative indices simplify logic.

6. Simplify Event Delegation with matches()

Event delegation means that one event listener is placed on a parent element to monitor events from its child elements. It means you only need to do one thing instead of adding multiple listeners. Element.matches() makes it simple to determine if the event target matches a given selector.

The listener works no matter how many .delete-button elements are added inside #list, matches() checks if the clicked element fits the criteria, making it a clean and scalable solution.

Using this pattern helps keep your event-handling code readable and straightforward, allowing you to add elements after the page has loaded.

7. Double Bitwise NOT (~~) for Flooring Numbers

The double bitwise NOT operator (~~) rounds numbers down by removing decimal parts, providing a concise alternative to Math.floor().

Using the (~~) operator, a number can be turned into a 32-bit integer, which works well for whole-number math. Some engines work with it faster than Math.floor(), sometimes giving unpredictable results. Using (~~) works well most of the time, yet Math.floor() is safer for more extreme and larger numbers.

8. Handle Async/Await Errors with a Single try-catch

When dealing with asynchronous functions in JavaScript, using try-catch blocks is the cleanest way to catch errors. Rather than wrapping each async call in separate try-catch statements, you can consolidate multiple awaits in one block.

This approach will help make it easy to understand clean and readable code, handle wasteful error handling for every single async call, and gather network, parsing, and logic errors together in just one place.

You should apply this pattern when several asynchronous tasks need to succeed together or you want all errors handled in one place.

9. Use structuredClone() for Deep Copying

Using JSON.parse(JSON.stringify()) to copy things in the traditional way is both slow and won’t work with objects containing circular references, dates, or maps. This approach of structuredClone() seems more like a reliable method.

structuredClone() is a fast, efficient method for copying complex data structures like Dates, Maps, and Sets, ensuring safe duplication without unintended mutations in modern applications, making it ideal for state management in React or Vue frameworks.

10. Using Set to Extract Unique Values

The Set object stores unique values, providing an efficient way to remove duplicates from arrays or collections.

Set is a concise and efficient data cleaning tool that eliminates duplicates and returns clean results, making it ideal for filtering unique user inputs, particularly for large datasets, and may require stringification or custom comparison for objects.

11. Using console.log() for Debugging

The console.log() method, along with other console utilities, offers versatile tools for inspecting and debugging code during development.

You can log values, types, and expressions:

You can also use console.table() to display arrays and objects in a readable tabular format:

These tools help you spot, debug, visualize, and study the program's performance. They monitor important factors, examine various data structures, and identify any miscalculations. With modern web browsers, the results of statistical queries can be collapsed or made interactive.

12. Use Intl APIs for Localization and Formatting

The Intl API provides locale-aware conversion for dates, numbers, currencies, and relative times, leaving no need to code complicated solutions on your own.

Internationalization capabilities for dates, numbers, currencies, and so on are available in JavaScript’s Intl object. Thanks to these APIs, your applications support and suit users from multiple regions and with different languages.

Time Formatting:

Currency Formatting:

Date Formatting:

Using Intl APIs is a best practice for creating accessible, global-ready applications. They eliminate the need for manual formatting and help you avoid errors in locale-specific conventions.

Conclusion

These hacks demonstrate the numerous ways JavaScript streamlines work, enhances performance, and addresses development issues. They increase the app’s compatibility and user satisfaction. You can follow the latest ECMAScript proposals on MDN Web Docs or on GitHub from TC39.