What is Vanilla JavaScript?

Vanilla JavaScript is the pure, fundamental form of the JavaScript programming language. It writes JavaScript without additional libraries and frameworks like React, jQuery, Vue.js, and others.

It is essential to learn Vanilla JavaScript before learning a framework because of the following reasons:

• It makes it easier to understand libraries, frameworks, and the abstraction that happens in them.

• It has a better performance as it usually has lesser unnecessary code.

• It becomes easier to debug libraries and frameworks as there is a good understanding of the core concepts of JavaScript.

Why are JavaScript frameworks/libraries needed?

It is hectic and challenging to keep the user interface updated and in sync with changes in state in vanilla javascript; hence, the use of libraries and frameworks. Using frameworks and libraries also provides some code abstraction. It makes it easier for developers to focus on shipping code faster while focusing on the application features rather than complex implementations solved by these frameworks or libraries.

Example

Here is a code sample using Vanilla JavaScript:

Explanation

• Line 3: We declare a variable app. We assign a value to this variable by fetching the element with the ID app in the HTML file using the document.getElementById method.

• Lines 5–10: We add elements of children into the element app using the innerHTML method.

• Line 12: We create a ul element using the document.createElement method and store in a variable called ul.

• Lines 14–16: We declare a variable programmingLanguages and assign an array of programming languages.

• Lines 18–22: We loop through the programmingLanguages array and create a new li element using the document.createElement method and store it in a variable called li, then store the programming language on the li indexes and finally appends the li element into the ul element.

• Line 24: We append the ul element named ul in the app.

Note: Remember, the term "Vanilla" JavaScript is the same as "plain" JavaScript.