7 JavaScript Concepts That Every Web Developer Should Know

1. Scopes 🤗

The understanding scope will make your code stand out, reduce errors and help you make powerful design patterns with it
Local and Global

Local and Global

There are two kinds of scope — global scope and local scope

Variables defined inside a function are in local scope while variables defined outside of a function are in the global scope. Each function when invoked creates a new scope.

JavaScript has function scope: Each function creates a new scope.

// Global Scope
function someFunction() {
    // Local Scope #1
    function someOtherFunction() {
        // Local Scope #2
    }
}
// Global Scope
function anotherFunction() {
    // Local Scope #3
}
// Global Scope

2. IIFE 😎

Immediately Invoked Function Expression

IIFE is a function expression that automatically invokes after completion of the definition. The parenthesis () plays important role in IIFE pattern. In JavaScript, parenthesis cannot contain statements; it can only contain an expression.

(function () {
    //write your js code here
})();

3. Hoisting 😉

Hoisting is JavaScript’s default behavior of moving all declarations to the top of the current scope (to the top of the current script or the current function).

4. Closures 🙄

A closure is a combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In JavaScript, closures are created every time a function is created, at function creation time. To use a closure, define a function inside another function and expose it.

One powerful use of closures is to use the outer function as a factory for creating functions that are somehow related. Using closures as function factories is a great way to keep your JavaScript DRY. Five powerful lines of code allow us to create any number of functions with similar, yet unique purposes

5. Callbacks 📞

A callback is a function passed into another function as an argument to be executed later

A callback is a function passed as an argument to another function
This technique allows a function to call another function
A callback function can run after another function has finished

6. Promises 🤝

The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.

7. Async & Await 😮

The word “async” before a function means one simple thing: a function always returns a promise.

The keyword “await” makes JavaScript wait until that promise settles and returns its result.

Thank you :)