JavaScript Interactive Web Pages with JavaScript Selecting Elements and Adding Events with JavaScript Perform: Selecting Elements

kabir k
PRO
kabir k
Pro Student 18,036 Points

pure JavaScript vs. jQuery

What are the benefits of using pure JavaScript over jQuery, considering that you can do more with less code for the latter.

Also, under what circumstances should one use one over the other?

2 Answers

Erik Krieg
MOD
Erik Krieg
Treehouse Moderator 42,776 Points

Hi Kabir! Here is a quick comparison:

Pure JS

The most objective benefit of using pure JavaScript (or Vanilla JavaScript) is better performance. Another benefit is the improved understanding of the language you gain from writing vanilla JS, which you need if you want to be able to do more advanced JS wizardry.

The downside of vanilla JS is that it is easier to make mistakes or miss something, is less beginner friendly (than jQuery), and can require you to develop more code to accomplish goals the would take much less time with jQuery.

jQuery

The primary benefit of jQuery is the reduced development time it offers web devs and its easy to use API and numerous plugins. Also, when you use jQuery you are still writing some vanilla JS, so it is not truly one or the other.

The downside is that by adding it to your project you might bloat the resources you need to load, call unnecessarily verbose methods, and avoid learning how the language actually works.

How to choose

jQuery is a fine choice in the following situations:

  • For small projects where perfomance is not a big issue
  • Simple projects with a tight deadline
  • Large projects that use an MVC library or framework that has jQuery as a dependency

Now, times you might not need jQuery include:

  • Acquiring an intermediate - advanced understanding of JS
  • Working on complex web applications
  • Building you own library or framework
  • Server side applications with Node.js

Here is some more on the topic.

+1 Way more information than I provided :P

kabir k
kabir k
Pro Student 18,036 Points

Thanks, Erik. That's helpful too.

Erik Krieg
Erik Krieg
Treehouse Moderator 42,776 Points

Thanks Marcus! But you definitely broke down the performance concerns with much better detail :D

Now, if we're doing a flattery contest, prepare thyself to be blushing bright red, my good sir! haha No, but seriously, it looks like you should have the best answer on this topic. Loads of good information presented here! =]

Just one more charmed soul to add to my collec-oops I'm writing this aren't I?

Michal Weizman
Michal Weizman
14,050 Points

Thank you Erik. I was confused about this as well, and this great answer and post solved it for me.

Erik Krieg
Erik Krieg
Treehouse Moderator 42,776 Points

Awesome! I'm glad to have been helpful, Michal. ♥

Hey Kabir,

While you are technically right that you do write less when using the jQuery library versus pure JavaScript, you have to factor in that you are loading over 82 kilobytes of data (if using minified version) just to be able to use the jQuery library. Not only that, but with pure JavaScript, the compiler can go straight to the built in function and execute. When using jQuery commands, the compiler has to find the command in the jQuery library and then execute the built in commands that jQuery uses.

Here's an interesting JavaScript performance test that tests several different operations. If you look at the first two, you can see that the first one is using the jQuery query selector and the 2nd is using the pure JS query selector. You'll see that the pure JS command is about 5x faster (at least in Chrome) to use than the jQuery command: https://jsperf.com/jquery-vs-javascript-performance-comparison/14

With all that in mind, jQuery is still a great library that has a lot to offer and with computers made in the last 10 years you won't see a noticeable difference in execution times of JavaScript and jQuery.

You're welcome, Kabir. Erik's answer has more information, though! :)