Converting jQuery to ES6: Making Your Code Cleaner and More Modern

Learn how to efficiently convert jQuery code into ES6, enhancing readability and performance in your web applications.
---
This video is based on the question stackoverflow.com/q/69544052/ asked by the user 'Takuhii' ( stackoverflow.com/u/2220702/ ) and on the answer stackoverflow.com/a/69544657/ provided by the user 'AngelNext' ( stackoverflow.com/u/16178477/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Any idea how I can change this jQuery into ES6?

Also, Content (except music) licensed under CC BY-SA meta.stackexchange.com/help/licensing
The original Question post is licensed under the 'CC BY-SA 4.0' ( creativecommons.org/licenses/by-sa/4.0/ ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( creativecommons.org/licenses/by-sa/4.0/ ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Converting jQuery to ES6: Making Your Code Cleaner and More Modern

In the modern web development landscape, many developers are transitioning from jQuery to using vanilla JavaScript, specifically ES6 (ECMAScript 6). This shift allows for cleaner, more efficient code without the need for external libraries. If you've run into the challenge of converting a jQuery function to ES6, you're not alone! Let's explore one such conversion case together.

The Problem

You have a block of jQuery code that handles the change event for a dropdown, which shows or hides certain elements based on the selected value. However, jQuery no longer exists in your system, and you need to rewrite it in vanilla JS/ES6.

Original jQuery Code

Here’s the jQuery code you're starting with:

[[See Video to Reveal this Text or Code Snippet]]

The Solution

The goal is to convert it to a cleaner, more efficient ES6 version. Let’s break down the process step-by-step.

Step 1: Selecting Elements

We will replace jQuery's $() with document.querySelector and document.querySelectorAll. For our dropdown and asset type divs, our code becomes:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Adding the Event Listener

Instead of jQuery's .change(), ES6 uses .addEventListener(). We'll add an event listener to the assetChoose dropdown:

[[See Video to Reveal this Text or Code Snippet]]

Step 3: Showing and Hiding Elements

Rather than removing or adding classes with jQuery's .removeClass() and .addClass(), we will use the classList API. The forEach method allows us to iterate over NodeList conveniently:

[[See Video to Reveal this Text or Code Snippet]]

Complete ES6 Code

When we put everything together, here’s the final product:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By transitioning from jQuery to vanilla JavaScript, you not only improve the performance of your code but also make it more modern and maintainable. Remember that ES6 provides powerful features for handling events and manipulating the DOM, allowing you to create dynamic web applications without relying on external libraries. Happy coding!