As you become more experienced with JavaScript, you may encounter some advanced topics that can help you create even more powerful and efficient code.
Callback Functions
Callback functions are functions that are passed as arguments to other functions and are executed when the other function completes its task. They can be used to perform asynchronous operations such as loading data from a server or waiting for user input.
Example:
function getData(callback) {
setTimeout(function() {
var data = { name: "John", age: 30 };
callback(data);
}, 1000);
}
function displayData(data) {
console.log(data.name + " is " + data.age + " years old.");
}
getData(displayData);
In this example, getData is a function that performs an asynchronous operation to get data, and it accepts a callback function as an argument. When the asynchronous operation is complete, the getData function calls the callback function with the retrieved data. The displayData function is passed as a callback to getData, and it logs the retrieved data to the console.
Closures
Closures are functions that have access to variables in their parent function, even after the parent function has returned. They can be used to create private variables and functions that are not accessible from outside the closure.
Example:
function createCounter() {
var count = 0;
function increment() {
count++;
console.log(count);
}
return increment;
}
var counter = createCounter();
counter();
counter();
counter();
In this example, createCounter is a function that returns another function (increment). The increment function has access to the count variable in its parent function (createCounter), even after the parent function has returned. This creates a closure that allows us to create a private counter variable that is not accessible from outside the closure.
Promises
Promises are objects that represent the eventual completion or failure of an asynchronous operation and allow you to chain multiple asynchronous operations together. They can simplify complex asynchronous code and make it easier to handle errors.
Example:
function getData() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
var data = { name: "John", age: 30 };
resolve(data);
}, 1000);
});
}
getData()
.then(function(data) {
console.log(data.name + " is " + data.age + " years old.");
})
.catch(function(error) {
console.log(error);
});
In this example, getData returns a Promise object that represents the eventual completion or failure of an asynchronous operation to get data. The then method is called on the Promise object to handle the successful completion of the operation, and the catch method is called to handle any errors that may occur.
Asynchronous Programming
Asynchronous programming allows you to execute code without blocking the main thread of execution. This can improve the performance of your code and prevent the browser from becoming unresponsive
Example:
function getData() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
var data = { name: "John", age: 30 };
resolve(data);
}, 1000);
});
}
async function displayData() {
console.log("Loading data...");
var data = await getData();
console.log(data.name + " is " + data.age + " years old.");
}
displayData();
In this example, getData returns a Promise object that represents an asynchronous operation to get data. The async keyword is used to define the displayData function as an asynchronous function that can use the await keyword to wait for the completion of asynchronous operations. When the displayData function is called, it logs a message to the console, waits for the getData function to complete, retrieves the retrieved data, and logs it to the console.
Prototypes
Prototypes are objects that provide a blueprint for other objects. They can be used to add methods and properties to existing objects or to create new objects with similar functionality.
Example:
function Person(name) {
this.name = name;
}
Person.prototype.sayHello = function() {
console.log("Hello, my name is " + this.name);
}
var john = new Person("John");
var jane = new Person("Jane");
john.sayHello();
Wrapping up!
Share this blog with your friends 👩🏼🤝🧑🏼 and developers 👨💻 you know and let them know about these
Your feedback and comments are very important to me. 💌
Get in touch 🤜🤛
Instagram
YouTube
