What is Vanilla JavaScript ?

What is Vanilla JavaScript or VanillaJS?

Vanilla JavaScript is nothing but another name given to pure or plain JavaScript. VanillaJS refers to the pure version of JavaScript which does not use any external tool like JavaScript libraries or Frameworks. JavaScript is a very powerful scripting language, it can be used to build interactive websites without using any framework or library. JavaScript can be used to build the front end as well as the back end of a website. But VanillaJS can be used to build only the frontend, because, in the back end, the NodeJS framework of JavaScript is used.

There are a lot of big tech and non-tech giants who are currently using Vanilla JavaScript in their code base. It also came into consideration that the number of websites that use Vanilla JavaScript is much higher than the number of websites using jQuery. Some of those websites are listed in the below list:

• Google
• Youtube
• Facebook
• Microsoft
• LinkedIn
• Netflix
• Stack Overflow etc.

As you all know everything has its pros and cons associated with it. There also exist some benefits and disadvantages of using JavaScript. Let us first discuss the benefits of using JavaScript and then the disadvantages of using the same.

Benefits of Learning and Using JavaScript

JavaScript is a feature-rich language. It has a lot of in-built methods and APIs that we can use in our applications and these features. reduces the code complexity and helps us to perform some complex tasks easily.

Some benefits and reasons for learning and using JavaScript are explained below:

• A rich support for inbuilt methods: JavaScript provides us a rich support and access to the in-built methods like map(), reduce(), filter(), call(), apply(), bind(), etc. which saves our time and reduce the complexity of the code. All of these methods are used for different purposes and to perform different tasks.
• Prototype and Class-based object systems: In JavaScript, you can create objects using the classes as well as functions by defining their instances. JavaScript also supports prototypal and class-based inheritance to inherit the properties of other classes and functions.
• DOM Traversal and Selection: JavaScript provides us with a Document Object Model which consists of a lot of methods for selecting and traversing different elements of the document. The JavaScript DOM allows us to make changes in the document directly like changing the text, inner HTML, styles, and other properties of an element.
• Performance: The execution of JavaScript code on web browsers is much faster than the other programming languages. The JavaScript code can be directly compiled and parsed by the browser, unlike the HTML and CSS files that need to be downloaded before the execution and impact the web performance.
• Ease the learning and the implementation of the Frameworks: If you know how to implement the JavaScript to build interactive user interfaces, then it will be easier for you to lean and implement JavaScript frameworks and libraries like ReactJS, VueJS, AngularJS, NodeJS, etc. You will be able to easily use the JavaScript and its frameworks together.
• Execution Time: The execution of the JavaScript code is done on the client side, it does not require any external tool to execute code which makes the process of JavaScript code execution very fast. The JavaScript code execution is also not get affected by the backend server calls.
• Reduction in Server Load: JavaScript reduces the load of the server as the JavaScript code is executed by the client side it does not affect the server load and run on the client environment.

Example: The below code example will explain you the practical implementation of some of the JavaScript benefits:

Javascript

// Implementing map() and reduce() methods
let arr1 = [1, 2, 3, 4, 5];
const newArr =
    arr1.map((currItem) => currItem *= 2);
const eleSum =
    arr1.reduce((res, currItem) => res += currItem)

console.log(
    "The new array returned by map() method is: ", newArr);
console.log(`The sum of all elements of array
returned by reduce() method is: `, eleSum);

// How to select and traverse DOM
console.log(`To traverse and select the DOM
    element use document.methodName()`);
console.log(`To update, add or delete the styles use
     selectedElement.style.propertyName.`);

Output

The new array returned by map() method is:  [ 2, 4, 6, 8, 10 ]
The sum of all elements of array
returned by reduce() method is:  15
To traverse and select the DOM
element use document.methodName()
To ...

Disadvantages of using JavaScript

The security of the JavaScript code is compromised as the code execute on the client side and the whole code can be easily viewed and modified by any user. It can also be used as a weapon for the malicious purposes. The simple file operations like reading and writting are prohibitted in JavaScript due to security issues. VanillaJS also lacks for multipurpose and multithreading capabilities. It does not support the network based applications.