Concepts in JavaScript that you Should Know

1. Scope-

Scope means variable access. A scope is boundary that defines variables, functions, and objects . You can not access variables that have these boundaries, and therefore can not access variables that don have these boundaries. A scope can be defined in two ways:

• Local Scope allow access to everything within the boundaries (inside the box)
• Global Scope is everything outside the boundaries (outside the box). Unless you return the variable in the global scope, the global scope cannot access a variable in the local scope.

2. IIFE (Immediately Invoked Function Expression)

When defined in JavaScript, IIFE is an immediate callable and immediate executed function. By considering variables within the IIFE, they are not accessible to the outside world, thus preventing the scope from becoming polluted. Thus, IIFE’s primary function is to execute code immediately and to protect data.

3. Hoisting

A function can be called in JavaScript before it is defined and the ‘Uncaught ReferenceError’ error won’t appear. It is caused by hoisting, in which the interpreter always assigns variables and functions to the top of a current scope (function scope or global scope) before executing code.

4. Closures

Closures are simply functions that are nested inside of other functions and can access variables from the outer function. This sounds straightforward, but the magic comes with the scope.

Inner functions (closures) have access to variables declared in their scope (variables between curly brackets), in any parent function, and globally.

Here, you need to remember that an outer function has no access to the inner function variables (we have already covered this in our scope discussion). Let’s look at an example to see how this works.

5. Callbacks

Callbacks in JavaScript are simple functions that are passed to another function as parameters and called or executed from inside that other function. The function must wait for the execution of another function or the return of results while this creates a chain of functions (when X is completed, then Y is performed, etc.). In JavaScript, callbacks are used to provide synchronization in asynchronous operations.

6. Promises

We understand callbacks, but we do not understand what will happen when you implement them within callbacks within callbacks, and so on. Basically, this recursive structure of callback is termed as ‘callback hell’ and promises to resolve such issues. In an asynchronous java script operation, promises are useful when multiple operations need to be executed back to back. Each subsequent function then starts after the previous one has finished. Promises are objects that might produce a single value, either a resolved value or a reason why they will not be resolved (rejected). As developer.mozilla states “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…

• Fulfilled: When the operation is completed successfully.
• Rejected: When the operation is failed.
• Pending: initial state, neither fulfilled nor rejected.

7. Async & Await

If something is not resolved, then stop and wait. Asynchronous operations can also be maintained synchronously by using syntactic sugar added to Promises.

Async/await can be used for making a Rest API call where the data needs to load fully before pushing it to the view. Async/await is a great syntactic improvement for Nodejs and browser programmers. As a result, functional programming can be implemented in JavaScript, and the code becomes easier to read.