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

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

(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

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 🤝


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


A passionate UI Engineer, Love Travelling and Photography