What is the need of vanilla JavaScript if jQuery can style an html element conveniently?

Question

I started learning JavaScript seriously few months ago and after solidifying my basics, I moved to jQuery.

I noticed that jQuery simplifies the work such that I don't see the need why I should suffer myself with vanilla JavaScript if styling, event handling and other things can be done with just few lines of code as compared to using pure JavaScript.

Answer 1

jQuery can simplify a lot of things, but relying on jQuery only is not an option for most programmers.

* jQuery builds on Javascript
* For using jQuery, you always need to load the external jQuery library
* jQuery can be slow
* potential compatibility issues with other frameworks when using jQuery
* if jQuery is missing a function, you will need to write it yourself, hence: Javascript
https://medium.com/@JugaaduDev/jquery-vs-vanilla-js-1a6f73f3c0cc
https://blog.udemy.com/jquery-vs-javascript/
https://www.geeksforgeeks.org/when-to-use-vanilla-javascript-vs-jquery/

Answer 2

It's better to choose JavaScript library like React.js instead of jQuery.

One of the main advantages of using React is that it encourages the use of pure functions, particularly for components.

A pure function in React is a component that only receives props and state as input, and returns the same output for the same input.

This makes the component predictable and easy to reason about, as the output is solely determined by the input, and it doesn't produce any side-effects.

Answer 3

JavaScript has evolved, many of the features that jQuery provided are now built into the language.

This means that it is often not necessary to use jQuery and you can accomplish the same tasks using plain JavaScript.

Additionally, using plain JavaScript can result in smaller file sizes, faster load times, and better performance.

It is recommended to use plain JavaScript instead of jQuery if possible.

Answer 4

One of the disadvantages of jQuery is that it is not a pure function. A pure function is a function where the output is solely determined by its input and it doesn't produce any side-effects.

In jQuery, many of its functions modify the DOM directly and changes the state of the page which is a side effect. This can make the code harder to reason about and test, as the state of the page can change in unexpected ways. Additionally, it can also create bugs that are hard to track down.

For example, when you use the .hide() method on a jQuery object, it directly modifies the DOM, making the element invisible. This is a side effect that can be hard to trace and test.

On the other hand, using pure functions, you can ensure that the code is more predictable, easy to reason about, and easier to test.