DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 963,864 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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)

This post blew up on DEV in 2020:

js visualized

๐Ÿš€โš™๏ธ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! ๐Ÿฅณ

Happy coding!