JavaScript libraries provide ready-made functions and tools that developers can use to speed up web application development. Vanilla JavaScript, on the other hand, refers to the use of pure JavaScript code without any additional libraries or frameworks.
JavaScript Version Numbers
Old JS versions are named by numbers: ES5 (2009) and ES6 (2015).
From 2016, versions are named by year: ECMAScript 2016, 2017, 2018, 2019
JavaScript Popular libraries
jQuery: jQuery is a fast, small, and feature-rich JavaScript library that simplifies HTML document traversal and manipulation, event handling, and animation. While its usage has decreased over the years, it's still found in many legacy projects.
Angular: Developed and maintained by Google, Angular is a comprehensive framework for building web applications. It provides tools for building large-scale, complex applications and offers features like two-way data binding and dependency injection.
Bootstrap: Bootstrap is a front-end framework that provides pre-designed and responsive UI components, making it easier to create visually appealing web applications.
Vue.js: Vue.js is a progressive JavaScript framework that's known for its simplicity and ease of integration with existing projects. It's often chosen for its gentle learning curve and flexibility.
D3.js: D3.js (Data-Driven Documents) is a powerful library for data visualization. It allows you to create interactive and dynamic data visualizations in the browser
Express.js: Express.js is a minimal and flexible Node.js web application framework. It's commonly used for building APIs and server-side applications.
Important Basic concept of JavaScript
Variables: Variables are used to store data. You can declare variables using var, let, or const.
Data Types: JavaScript has several data types including strings, numbers, booleans, arrays, objects, and more.
Operators: JavaScript supports arithmetic, comparison, and logical operators.
Conditional Statements: You can use if, else if, and else statements for decision-making.
Loops: JavaScript supports for, while, and do...while loops for repetitive tasks.
Functions: Functions are blocks of reusable code.
Arrow Functions
Arrow functions allows a short syntax for writing function expressions.
You don't need the function keyword, the return keyword, and the curly brackets.
Arrays: Arrays store collections of data.
Objects: Objects store key-value pairs.
Event Handling: You can respond to user interactions using event listeners.
DOM Manipulation: JavaScript can be used to interact with and modify the Document Object Model (DOM) of a web page.
document.getElementById("myElement").innerHTML = "New content";
Scope and Closures: Understanding how scope works and closures are important for managing variable access.
Asynchronous Programming
JavaScript supports asynchronous operations using callbacks, Promises, and async/await
By default, JavaScript is a synchronous, single threaded programming language. This means that instructions can only run one after another, and not in parallel. Consider the little code snippet below:
But this method comes along with disadvantages. Say we wanted to fetch some large amount of data from a database and then display it on our interface. When the interpreter reaches the instruction that fetches this data, the rest of the code is blocked from executing until the data has been fetched and returned.
Luckily for us, the problems with synchronous JavaScript were addressed by introducing
Asynchronous JavaScript
Asynchronous code doesn't block the execution. It allows multiple operations to be performed concurrently or without waiting for the previous one to finish. JavaScript achieves asynchrony through callbacks, promises, and async/await.
What are Callbacks in JavaScript?
A callback is a function that is passed inside another function, and then called in that function to perform a task.
What are Promises in JavaScript?
Promises in JavaScript are a way to manage asynchronous operations. They provide a cleaner and more structured approach to dealing with callbacks and handling asynchronous tasks. Promises represent a value that may not be available yet but will be resolved at some point in the future, either successfully or unsuccessfully. Promises have three states:
Pending: The initial state when the promise is created, and the asynchronous operation is still in progress.
Fulfilled (Resolved): The state when the asynchronous operation is successfully completed. If fulfilled, a promise will have a resolved value.
Rejected: The state when the asynchronous operation encounters an error or fails. If rejected, a promise will have a reason for the rejection, typically an error object.
Promises came along to solve the problems of callback functions. A promise takes in two functions as parameters. That is, resolve and reject. Remember that resolve is success, and reject is for when an error occure.
After making a call to the endpoint for example, if the request is successful, we would resolve the promise and go on to do whatever we want with the response. But if there is an error, the promise will get rejected.
More example from real life code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Promise Example</title>
</head>
<body>
<img id="myImage" src="" alt="Loaded Image">
<script>
// Function to load an image asynchronously
function loadImage(url) {
return new Promise((resolve, reject) => {
const image = new Image();
// Set up event handlers for success and error
image.onload = () => {
resolve(image);
};
image.onerror = (error) => {
reject(error);
};
// Set the image source to start loading
image.src = url;
});
}
// Usage of the loadImage function with a Promise
const imageUrl = 'https://www.alhaditech.com/web/image/1156-8116595f/js-es-lp-hero.png'; // Replace with your image URL
const imageElement = document.getElementById('myImage');
loadImage(imageUrl)
.then((image) => {
// Image loaded successfully
imageElement.src = imageUrl;
})
.catch((error) => {
// Error occurred while loading the image
console.error('Error loading image yes:', error);
});
</script>
</body>
</html>
What is Async and Await in JavaScript?
Error Handling: JavaScript provides mechanisms like try...catch for handling errors gracefully.
try {
// Code that may throw an error
} catch (error) {
// Handle the error
console.error(error);
}
Modules: You can use modules to organize and separate your code into reusable components.
// Exporting a module
export function myFunction() {
// ...
}
// Importing a module
import { myFunction } from "./myModule.js";