DEV Community

Cover image for 7 JavaScript Concepts That Every Web Developer Should Know
Hidayt Rahman
Hidayt Rahman

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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
})();
Enter fullscreen mode Exit fullscreen mode

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 :)

Top comments (0)