This article is mainly for those developers who are new to web development. People who start their career usually question - why jQuery while there is JavaScript; or the difference between JavaScript and jQuery; which is better to use - JavaScript or jQuery; is jQuery an alternative for JavaScript; or will jQuery replace JavaScript etc.
Let us first look at what is JavaScript and what is jQuery.
JavaScript
JavaScript (JS) is a dynamic programming language. It is an interpreted language. Other than the unfortunate similarity in name, it has nothing to do with Java programming language. As the name suggests, JavaScript is a scripting language.
It is most commonly used for appealing UI (like moving objects, flashy elements in the screen), user interactions (client-side validation, showing pop-up etc.) and for controlling the document content displayed to the user.
There is nothing you need to include in the browser to support JavaScript. This is because it was considered as the language of the web since its birth. It runs in all modern browsers without any additional plugins.
What you mean by JavaScript is dynamic
Most programming languages have dynamic behaviors. But in the case of JavaScript, pretty much everything is dynamic.
All variables are dynamic in type and existence. You declare a variable as,
- var msg = "Hello World!";
The code written in JavaScript is dynamic, you can create a variable at runtime, and the type is determined at runtime.
You can create new functions or replace existing functions at runtime.
New codes are added to the browser when more script files are loaded and you can add any number of files at any time.
jQuery
jQuery website defines jQuery (jQ) as “jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.”.
jQuery is not a programming language instead it is a cross-platform JavaScript library. There are many other JavaScript libraries available like MooTools, Knockout or even Angular (Though Angular uses TypeScript, it compiles to JavaScript at the end) and jQuery is one of the most popular among them.
jQuery is a fast feature-rich JavaScript library. It is created to help programmers with creating common UI and take care of the browser compatibility issues more easily.
jQuery, in fact, is nothing but JavaScript. All the code you write in jQuery is converted to JavaScript internally. One line of code written using jQuery may be equal to many lines of code written using JavaScript which means programmers will have to write only lesser lines of code.
To start using jQuery on your page, you need to include one line of code in the header of your page like,
The above line includes a jQuery library to your page using the Microsoft CDN (Content Delivery Network). The jQuery library is a single JavaScript file.
You can also include the jQuery library as a local resource from your project folder.
But there are benefits using the CDN. If you use the minified version of the library, you will get the advantage of concurrent connections and multiple servers.
JavaScript Vs jQuery
Now, we can discuss the questions mentioned at the beginning of this article. Most of those questions may arise because of the lack of clear understanding of JavaScript and jQuery.
Since jQuery is nothing but a library of JavaScript, it cannot replace JavaScript. All jQuery code is JavaScript, but jQuery doesn’t include all the JavaScript code.
One thing you should understand is that they are not two programming languages; instead, they both are JavaScript. jQuery is just optimized to do the common scripting functions with fewer lines of code.
Lines of code
Many actions like Animate, Delay, Fade-In can be done using jQuery with very few lines of code. On the other hand, JavaScript will take lots of lines of code for the same.
We can consider a simpler example,
Suppose I want to select all elements having class- simple-li,
If I use JavaScript,
- document.getElementsByClassName("simple-li");
On the other hand, if I use jQuery,
Performance
If you check the performance of the two, you can find that plain JavaScript is faster than jQuery for accessing DOM. But JavaScript can be slower when you write some complex logic given the fact that we may make major mistakes or use poor code which may lead to a performance hit. On the other hand, jQuery has been tested for years to use best and fast JavaScript codes.
In my view, it is not right to compare the two or you cannot say one is better than the other. We need to use whichever is better suited to our requirement.
A few points to remember
| JavaScript |
jQuery |
| A weakly typed dynamic programming language |
A fast and concise JavaScript Library |
| A scripting language for interface interactions and for controlling the document content |
A framework which makes event handling, animating, and Ajax interactions simpler and faster |
| An interpreted language |
Uses resources given by JavaScript to make things easier |
| Need to write your own scripting which may take time |
need not write much scripting which already exists in jQuery |
| Developers need to handle multi-browser compatibility by writing their own JavaScript code |
Is a multi-browser JavaScript library which reduces the work of developers during deployment |
| Developers are prone to make many common browser-related errors. |
Developers don’t have to worry about browser compatibility issues. |
| Need not include anything to work in browser as all modern browsers support JS |
Need to include the jQuery library URL in the header of the page |
| More lines of code |
Fewer lines of code |
| Faster in accessing DOM |
Suited for complex operations where developers are prone to mistakes and writing poor lines of code. |
A few advantages of using jQuery
- You can code most common JS actions using jQuery with fewer lines of code.
- Browser compatibility – you can write code which runs across browsers without having to know the various browser intricacies and won’t break.
- Lets you write JavaScript quicker and easier.
- Avoids common browser errors
- Simplification of usually complicated operations – complex operations like Ajax interactions, animation, event handling etc. are handled by jQ with the best lines of code.
- jQ is battle tested and uses the fast and best lines of code for accomplishing most tasks.
Conclusion
jQuery is well suited for most applications, especially ones which need rapid development. jQuery takes care of the common browser errors by ironing the fixes right into the library. jQuery also takes care of browser compatibility issue which is a developer’s nightmare during deployment.
Using JavaScript or jQuery really depends on your need and other factors. Most of the web development projects will work perfectly fine using jQuery. But there will be a small percentage that does require JavaScript.
Since pure JavaScript is the best performing method of client-side development, there is a reason to use it. But a library like jQuery will help you to get to market faster and cheaper. So, it is better to depend heavily on jQuery for the initial versions of your product. Once your product is established in the marked and you have got the revenues to go back and refactor the code, you can go ahead and custom code all the script.