5 JavaScript Concepts every Developer should know

JavaScript, the world's most popular programming language, was introduced in the year 1995 for adding programs to the webpages in the Netscape Navigator browser. JavaScript usage has now extended to mobile app development, desktop app development, and game development. From client side validation and HTML page manipulation to raising dynamic pop-ups and back-end data loading, JavaScript has it's application in almost all spheres of software development.

Here are a few JavaScript concepts you should know about...

1. Scope

Scope determines the accessibility (visibility) of variables. JavaScript has the following scopes:

Global scope: A variable declared at the top of a program or outside of a function is considered a global scope variable. In JavaScript, a variable can also be used without declaring it. If a variable is used without declaring it, that variable automatically becomes a global variable.

var a = 10;

function getNum(){
    console.log(a);
}

getNum();    //prints 10

Local Scope: A variable can also have a local scope, i.e it can only be accessed within a function.

function getNum(){
    var a = 20;
    console.log(a);
}

getNum();    //prints 20
console.log(a);    //error

Function scope: Variables defined inside a function are not accessible from outside the function and variables declared with var, let and const are quite similar when declared inside a function.

Block scope: Variable that is declared inside a specific block(a pair of {} brackets) and can’t be accessed outside of that block.

In JavaScript, var is function-scoped and let is block-scoped.

2. IIFE

An IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined.

We can make any function expression an IIFE by wrapping it in parentheses, and adding a pair of parentheses at the end.

(function() {
    console.log("Hello World");
})()    //prints Hello World

Alternatively, it can also be defined as:

(() => {
    console.log("Hello World");
})()    //prints Hello World

The parentheses surrounding the function definition lets JavaScript know that it will process a function expression. The last pair of parentheses invoke the function.

3. Hoisting

Hoisting is a JavaScript technique which moves variables and function declarations to the top of their scope before code execution begins. In other words, a variable (or function) can be accessed (or called) before it has been declared.

x = 10;
console.log(x+20);    //prints 30
var x;

JavaScript only hoists declarations, but not initializations. JavaScript will not move variables which are declared and initialized in the same line.

4. Closures

A closure is a function which has access to the variable from another function’s scope.

function callNum(number){
    var i = number;

    var inner = function(){
        console.log(i);
        i++;
    };
    return inner;
}

var getNum = callNum(10);
getNum();    //prints 10
getNum();    //prints 11

In other words, closure is created when a child function keep the environment of the parent scope even after the parent function has already executed

5. Promises

Promises in JavaScript are much similar to promises in real life. When we define a promise in JavaScript, it will be resolved when the time comes, or it will get rejected. There are 3 states of any promise:

Pending: Initial State
Resolved: Completed Promise
Rejected: Failed Promise

After the creation of a promise, if it gets fulfilled then it gets resolved, else it gets rejected.

let makePromise = new Promise(function (resolve, reject) {
    if (condition) {    //executed when condition is true
        resolve("Promise Fulfilled");
    } 
    else {    //executed when condition of if block is false
        reject("Promise Unfulfilled");
    }
});

The then( ) method is called after the promise is resolved. The catch( ) method is called if the promise is rejected.

manasvvi