Vanilla Javascript Concepts you need to know before learning a JS Framework/Library
Cecure Intelligence Limited
Validating your ideas, building digital products.
What is Vanilla Javascript?
Vanilla JavaScript is a term used to refer to JavaScript code that is written without the aid of any external libraries or frameworks. It is simply a pure JavaScript code written in its raw form, without any plugins or other libraries. While JavaScript itself has become a popular language for web development, many developers prefer to employ JavaScript frameworks such as React, Angular, and Vue in order to speed up the development process. Although frameworks can make development easier, they can also add complexity to the code and can take away from the true power of JavaScript.?
It's crucial to comprehend the foundations of vanilla JavaScript before a developer delves into frameworks and libraries. This makes sure that the developer has a solid understanding of the fundamental language, which will be crucial while utilizing frameworks. Before learning any framework, developers need to be familiar with the following ideas.
1. DOM Manipulation:?
DOM stands for Document Object Model, and it is the way that web browsers interpret HTML and CSS. DOM manipulation is the process of manipulating the document object model in order to change the structure or content of a web page. This can be done with vanilla JavaScript using methods such as document.createElement(), document.getElementById(), and document.querySelector().
2. Event Handling:?
This is the process of responding to user input and browser events. This can be done with vanilla JavaScript using the addEventListener() method. This method allows developers to specify what function should be executed when certain events occur, such as when a user clicks a button or when a page loads.
3. AJAX:?
AJAX stands for Asynchronous JavaScript and XML. It is used for making asynchronous requests to a server in order to update parts of a web page without reloading the entire page. This can be done with vanilla JavaScript using the XMLHttpRequest object.?
4. Object-Oriented Programming:?
Object-oriented programming (OOP) is a programming paradigm that allows developers to structure their code in an organized, modular way. Vanilla JavaScript supports OOP through the use of classes, objects, and methods.?
5. Functions:?
Functions are blocks of code that can be executed multiple times with different inputs. Vanilla JavaScript supports functions through the use of the function keyword.
ES6, or ECMAScript 6 (ES What…?)
ES6, or ECMAScript 6, is a major update to the JavaScript language and it marked a significant change to the language. It was released in 2015 and provides a number of new features, syntax changes, and optimizations that make coding in JavaScript more efficient, simpler, and easier to understand. As such, ES6 is becoming increasingly important for web developers to know, especially those who are interested in learning any framework. In this article, we will discuss the ES6 concepts you need to know before learning React JS.?
Before we dive into the specifics of ES6, let’s first look at what React JS is. React is a JavaScript library for building interactive user interfaces. It is used by many popular websites, such as Facebook and Instagram, and is an increasingly popular choice for web development. React is built around the concept of components, which are small, reusable units of code that can be combined to create complex, interactive websites.
Now, let’s discuss the ES6 concepts you need to know before starting to learn React JS.
1. Arrow Functions?
Arrow functions are a new syntax introduced in ES6 that allow you to write functions in a more concise way. They are also known as “fat arrows” because of the “=>” symbol that is used to define them. Let’s look at an example of an arrow function:?
const greet = (name) => { console.log(`Hello, ${name}!`); }?
greet('John'); // prints 'Hello, John!'?
As you can see, the code is much more concise and easier to read than the standard function syntax. Arrow functions are commonly used in React when defining functions that are passed as props to components.
2. Template Literals?
Template literals are another new feature introduced in ES6. They allow you to write strings that can span multiple lines and contain variables. They are also known as “template strings” because they are surrounded by backticks (`). Let’s look at an example:?
const name = 'John';?
console.log(`Hello, ${name}!`); // prints 'Hello,? John!'?
Template literals are commonly used in React when creating components that are dynamic and contain user-defined data.
3. Destructuring?
Destructuring is a new syntax in ES6 that allows you to easily extract values from objects and arrays. It can be used to assign multiple variables at once and make your code more readable. Let’s look at an example:?
const person = { name: 'John', age: 32, };?
const { name, age } = person;?
console.log(name); // prints 'John'
console.log(age); // prints 32?
Destructuring is commonly used in React when working with props and states, as it allows you to easily access the values you need.
领英推荐
4. Classes?
Classes are a new feature in ES6 that allows you to create objects that share the same properties and methods. It is an object-oriented programming language, which means that it allows you to create classes that can be used to create multiple objects. Let’s look at an example:?
class Person {?
???constructor(name, age) {?
??????this.name = name; this.age = age;?
???}?
???greet() {?
??????console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
???}
}?
const john = new Person('Doe', 34);?
john.greet(); // prints 'Hello, my name is Doe and I am 34 years old.'
5. Spread and Rest Operator
The spread operator allows us to spread out elements of an iterable (like an array or string) into multiple elements.
let arr1 = [1, 2, 3];?
let arr2 = [4, 5, 6];
//Combine the two arrays with the spread operator let combined
Arr = [...arr1, ...arr2];?
console.log(combinedArr); //prints:? [1, 2, 3, 4, 5, 6]
The rest operator allows us to capture a group of remaining elements into an array.
function sum(...nums) {
??let total = 0;?
??nums.forEach((num) => {
????total += num;
??});?
??return total;?
}
console.log(sum(1, 2, 3, 4, 5)); // 15
Conclusion
Developers will be more capable of understanding and using frameworks if they are familiar with the fundamental ideas of vanilla JavaScript. As frameworks are constructed on top of plain JavaScript, it's critical to understand the fundamentals before utilizing them. Also, since the underlying code is still JavaScript, knowing the foundations of vanilla JavaScript can make it simpler to debug code created with a framework.
Vanilla JavaScript is a powerful language, and understanding its fundamentals is essential for maximizing its potential.