Why Beginners Should not Learn JavaScript through jQuery

jQuery does not cover JavaScript entirely

JavaScript has roughly two parts. The core language itself (which is not bound to the browser), and the DOM API, which is implemented by browsers. The JavaScript engine interacts with your HTML via this DOM API.

“Vanilla JavaScript” is a fancy name developers have given to the core JavaScript and DOM API combined, and it is used to distinguish it from libraries such as jQuery.

The use of DOM is for adding interaction and dynamic content to the web-page. So, if you have an element on the web-page like this:

<button id="myBtn">Click Me</button>

The DOM functions are used to manipulate the properties of that element. What will happen when we click the button?

function welcome () {
    alert('Hello World!');
} // core javascript till here

document.getElementById('myBtn').addEventListener('click', welcome); // use of the DOM functions now, for DOM manipulation

On the other hand, jQuery is built for DOM manipulation only. The goal was to let experienced developers write code, and let the library handle cross-browser compatibility issues. There have been some additions later, but jQuery still does not cover all the Vanilla JavaScript.

You would still have to learn the core JavaScript language, or else it would be very hard to (learn and) use jQuery properly.

jQuery is also JavaScript

This should be pretty obvious, but well, jQuery is mostly a set of utility functions wrapped in the form of a library. All those functions are written in JavaScript only. What you can do with jQuery is absolutely possible with Vanilla JavaScript, and sometimes writing the function you need yourself is more fun and educating, not to mention it gives you more flexibility.

As a beginner, writing some utility functions for yourself would not only be a good exercise for you, but would also give you an idea on how those libraries actually work!

jQuery hides all the errors!

Yep, jQuery does not throw errors. It is designed to fail silently. If an error occurs, it is not printed to the console. There is nothing. For beginners, this is not a good thing at all. So, if your code is not working, you have no hints on how to debug it.

On the other hand, Vanilla JavaScript would throw descriptive errors in the console, and even give a link to the line number in the script at which the error occurred!

The screenshot above shows some Vanilla JavaScript code in the browser developer tools, and you can also see there’s a typo in the code. Running the code throws the error shown in the console, and even shows a link to the buggy line at the end!

In jQuery, the browser developer tools do not offer any such error handling mechanism. You have to be on your own.

jQuery is not always easy

There are many cases when jQuery code is rather unreadable, while Vanilla JavaScript code is more coherent. You can see an example listed below, which is code you’d use when you have to get the outerHTML of an element.

// jQuery
$('div').append($(elem).clone()).html();
// This is hardly readable, and actually a mess for a beginner to even understand what is going on.

// Vanilla JS
el.outerHTML;

Yes, that is the Vanilla JavaScript equivalent. About 10 times more fast, easy to read, and you already memorized it, no?

Here is another example, which is code you’d use when you have to check if two DOM elements are the same or not.

//jQuery
$(elem).is($(someElem));

//Vanilla JS
elem===someElem;

Both the code snippets would return either true of false, based on whether elem and someElem refer to the same DOM element or not. Vanilla JavaScript code clearly wins.

Vanilla JavaScript is not always “difficult”

As I previously mentioned, jQuery aims at fixing cross-browser compatibility issues. As more and more websites are dropping support for older browsers like IE6 and 7 (including the jQuery library itself!), writing modern code in Vanilla JavaScript is pretty easy. Here is an example:

// jquery
$(elem).hasClass('myClass'); // checks the elem is assigned the class "myClass" or not.

elem.classList.contains('myClass');
// vanilla js version for the above, works in IE10+

I am pretty sure one can write the second one as easily as the first one. And it is fairly cross-browser compatible. Other than Opera Mini, and IE 6-9, all browsers support it.

Also, since you are a beginner, you are at a stage when you don’t have to worry a lot about cross-browser compatibility issues, but rather about learning good code practices. Most new versions of browsers such as Firefox, Chrome, Safari, IE10+, Opera, etc. would work with 80% of the code without a hitch.

There still exists some things like dispatchEvent and getting computed styles which are hard to shim in IE6-9, and Opera Mini. But if you’re just learning, you are good to go.

Note: More detailed compatibility tables could be found at CanIUse for both CSS and JavaScript functions. They also list links to polyfills, which can shim a feature (set) for you in older browsers.

Conclusion

There is no obligation to use only Vanilla JavaScript code. But starting to learn a language with a library (particularly when the language is JavaScript) does not make sense. This is not just about jQuery, but for any other library out there like MoTools, Prototype, and so on.

Furthermore, jQuery in particular is loosing momentum (partly because of the decline of old browsers for which jQuery was good). For front-end web development, more modern frameworks like Angular and React are taking place. Angular is even backed by Google, and the amount of popularity it has gained in little time can’t be neglected. React is also an open-source project by Facebook.

Once you are well-versed with Vanilla JavaScript and concepts like the type system, Prototypal Inheritance, closures, Event Model, scope in JavaScript etc., and you want to make something to push into production, sure, go ahead and use jQuery. Because then, you would be able to properly use jQuery. For using jQuery properly, Vanilla JavaScript knowledge is a prerequisite and you should not skip it at any cost.

Also, after you are actually good with Vanilla JavaScript, you would either not need to use jQuery, or you would be able to learn the library in minimal time. Good luck!

Codementor Awal Garg is a web developer fluent in HTML/CSS and JavaScript for the frontend, and also uses JavaScript at the backend with node and express.

Need Awal’s help? Book a 1-on-1 session!

View Awal’s Profile or join us as an expert mentor!