Callbacks

1. Scope

Scope means variable access. What variable do I have access to when a code is running? In JavaScript by default, you’re always in the root scope i.e. the window scope. The scope is simply a box with a boundary for variables, functions, and objects. These boundaries put restrictions on variables and determine whether you have access to the variable or not. It limits the visibility or availability of a variable to the other parts of the code. You must have a clear understanding of this concept because it helps you to separate logic in your code and also improves readability. A scope can be defined in three ways –...

2. IIFE (Immediately Invoked Function Expression)

As the name suggests IIFE is a function in JavaScript which immediately invoked and executed as soon as it is defined. Variables declared within the IIFE cannot be accessed by the outside world and this way you can avoid the global scope from getting polluted. So the primary reason to use IIFE is to immediately execute the code and obtain data privacy....

3. Hoisting

A lot of developers get unexpected results when they are not clear about the concept of hoisting in JavaScript. In Javascript, you can call a function before it is defined and you won’t get an error ‘Uncaught ReferenceError’. The reason behind this is hoisting where the Javascript interpreter always moves the variables and function declaration to the top of the current scope (function scope or global scope) before the code execution. Let’s understand this with an example....

4. Closures

A closure is simply a function inside another function that has access to the outer function variable. Now, this definition sounds pretty much straightforward but the real magic is created with the scope. The inner function (closure) can access the variable defined in its scope (variables defined between its curly brackets), in the scope of its parent function, and in the global variables. Now here you need to remember that the outer function can not have access to the inner function variable (we have already discussed this in the scope concept). Let’s take an example and understand it in a better way....

5. Callbacks

In JavaScript, a callback is simply a function that is passed to another function as a parameter and is invoked or executed inside the other function. Here a function needs to wait for another function to execute or return a value and this makes the chain of the functionalities (when X is completed, then Y is executed, and it goes on.). This is the reason callback is generally used in the asynchronous operation of JavaScript to provide the synchronous capability....

6. Promises

We understand the concept of callback but what will happen if your code will have callbacks within callbacks within callbacks and it goes on? Well, this recursive structure of callback is called ‘callback hell’ and promises to help to solve this kind of issue. Promises are useful in asynchronous JavaScript operations when we need to execute two or more back-to-back operations (or chaining callback), where each subsequent function starts when the previous one is completed. A promise is an object that may produce a single value some time in the future, either a resolved value or a reason that it’s not resolved (rejected). According to the developer.Mozilla “A Promise is an object representing the eventual completion or failure of an asynchronous operation. Essentially, a promise is a returned object to which you attach callbacks, instead of passing callbacks into a function.”. Promises resolve the issue of ‘callback hell’ which is nothing but a recursive structure of callbacks (callbacks within callbacks within callbacks and so forth). A promise may be in three possible states…...

7. Async & Await

Stop and wait until something is resolved. Async & await is just syntactic sugar on top of Promises and like promises it also provides a way to maintain asynchronous operation more synchronously. So in JavaScript asynchronous operations can be handled in various versions…...