You are probably here because you are more curious about knowing what Vanilla JavaScript and JavaScript have in common.

If you want a straight answer on this topic, I wrote an article with just a single word explaining the difference between them, you can check it out by clicking HERE 🏃‍♂️🏃‍♂️🏃‍♂️

But if you still want to know more, this article is for you, let's get to it 🙌🙌🙌

Let's begin by understanding what the word Vanilla is all about?

Vanilla is when something does not have any special or extra features; it is ordinary or standard.

Another Word for Vanilla includes

1. Plain
2. Default
3. Pure
4. Simple
5. Undiluted

Explanation

A perfect example for this article is an ICE CREAM

We generally know that Ice Cream also comes in different colors and flavors.

Ice Cream Popular Colors and Flavours includes

1. Vanilla (default).
2. Chocolate.
3. Cookies N' Cream.
4. Mint Chocolate Chip.

The first Ice Cream image above with a tea-spoon is referred to as Vanilla Ice Cream, Plain ice cream, Simple ice cream, or undiluted ice cream because it does not contain extra ingredients apart from its natural taste and color, this can also be called the original form of ice cream, before other flavors, coloring, and refined sugar are added.

Other types of ice creams are called Non-Vanilla Ice Cream

So, now that we know that, whatever is in its original state is Vanilla and when combined with something else to make it look nicer, it is Non-Vanilla.

How does this relate to JavaScript?

Let's proceed by explaining JavaScript the same way we understood ice cream 🤷‍♀️🤷‍♀️🤷‍♀️

What is JavaScript? 🤔

JavaScript, often abbreviated as JS, is a programming language commonly used to create interactive effects within web browsers.

It was originally developed by Netscape as a means to add dynamic and interactive elements to websites. Like server-side scripting languages, such as PHP and ASP, JavaScript code can be inserted anywhere within the HTML of a webpage.

Likewise, JavaScript has several frameworks and Libraries of its own, which includes

1. React JS (Leading and Most Popular)
2. Angular
3. Vue Js
4. JQuery etc.
5. Backbone
6. Node
7. Ember
8. Meteor

When you're writing in any of these frameworks or libraries, it is believed that you're writing in higher or mixed JavaScript and can be classified as Non-Vanilla or Diluted Javascript.

Example: Given a paragraph tag in an HTML file

<p class="blog-title">Vanilla JavaScript</p>

let's see how this is accessed or selected in jQuery(Diluted JavaScript) and Plain JavaScript.

// jQuery, select all instances of .box
$(".blog-title");

// JavaScript syntax to select first instance of .blog-title
document.querySelector(".blog-title");

// JavaScript syntax to select all instance of .blog-title in our HTML file
document.querySelectorAll(".blog-title");

The above code is an example of selecting elements through their class name in both jQuery and JavaScript, but jQuery syntax for selecting an element with their class name is a two in one of the JavaScript syntaxes.

More Example:

Let's see how we can change elements styles in jQuery and JavaScript.

// With jQuery
// Select .blog-title and change text color to #EF3100
$(".box").css("color", "#EF3100");

// With Natural JavaScript
// Select the first .blog-title and change its text color to #EF3100
document.querySelector(".box").style.color = "#EF3100";

Based on the examples given above, it is obvious that jQuery has a shorter syntax than Plain JavaScript and simplifies DOM scripting.

Vanilla JavaScript or just JavaScript refers to ES5/6/7, just raw JavaScript. Non-vanilla JavaScript includes Libraries and frameworks like jQuery, React, Angular, Typescript, etc.

And that a wrap on this topic.

I hope this helps explain the differences! If you want to know more about the 2021 latest Vanilla or Plain JavaScript features follow Catalin Pit and Brayan Arrieta Alfaro they both have a great article on that, be sure to follow my blog and my Twitter account for more coding adventures.

Useful Links

1. Link to Catalin Pit's Article on Latest JavaScript Feature

1. Link to Brayan Arrieta Alfaro's Article on Latest JavaScript Feature