7 JavaScript Concepts That Every Web Developer Should Know

Hidayt Rahman
3 min readMay 21, 2021

1. Scopes 🤗

Scopes

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

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

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

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 🙄

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 📞

Callbacks

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

I will call back 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 🤝

Promises

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

7. Async & Await 😮

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.

You may also check them out

If you enjoyed reading this, don’t forget the applause. 👏
Thank you :)

Happy.Coding()

--

--

Hidayt Rahman

A passionate UI Engineer, Love Travelling and Photography