Forem: baijanathTharu

Promises in JavaScript

baijanathTharu — Thu, 01 Oct 2020 15:31:54 +0000

Drawback in Callbacks

Callbacks can be invoked any number of times inside the function
Thus, the state of the result of the task keeps on changing.
Example:

function sendMail(details, callBack) {
  setTimeout(function () {
    // callBack is invoked thrice
    // and result of task keeps on changing which should not happen
    // So there is need of promises which helps to prevent this behavior.
    callBack(null, "Done"); // task is completed
    callBack("Error", null); // task could not complete
    callBack("Error"); // task could not complete
  }, 2000);
}

sendMail({ id: 1, email: "test@test.com" }, function (err, done) {
  if (err) {
    console.log("Error: ", err);
  } else {
    console.log("Success: ", done);
  }
});

What is a Promise?

Promise is an object which will have the values of future result fetched after asynchronous call.

State of a Promise

Pending State: promise is created or initial state.
Fulfilled State: operation is completed successfully.
Rejected State: operation failed.

When the state has reached any one of fulfilled or rejected state, the promise is said to be settled.

Three Methods in Promise

then: handles success and error both
catch: handles rejection
finally: this method is executed when the promise has settled.

Promise Examples:

fetchEmail is a promise which is assigned a task to fetch email.
Example1: Promise is fullfilled

var fetchEmail = new Promise(function (success, failure) {
  // argument success is a placeholder for success callback
  // argument failure is a placeholder for failure callback
  setTimeout(function () {
    success({
      id: 1,
      email: "test@test.com",
    });
  }, 2000);
});

fetchEmail
  .then(function (data) {
    console.log("Promise is fulfilled: ", data);
  })
  .catch(function (err) {
    console.log("Promise is rejected: ", err);
  })
  .finally(function () {
    console.log("Promise is settled.");
  });
});

Example2: Promise is rejected

Note: it is common to name success as resolve and failure as reject.

var fetchEmail = new Promise(function (resolve, reject) {
  setTimeout(function () {
   reject('Network connection failed');
  }, 2000);
});

fetchEmail
  .then(function (data) {
    console.log("Promise is fulfilled: ", data);
  })
  .catch(function (err) {
    console.log("Promise is rejected: ", err);
  })
  .finally(function () {
    console.log("Promise is settled.");
  });
});

Closures in JavaScript

baijanathTharu — Mon, 28 Sep 2020 15:49:18 +0000

Closures

Closures are the functions defined inside a function.
For example: In the code below, innerFunction is a closure.

function outerFunction() {
  function innerFunction() {
    let text = "I am a closure";
    return text;
  }
  let text = "I am an outer function";
  return text;
}

Making closure accessible from outside the functional scope

Invoking outerFunction will return a text "I am an outer function".
We can invoke the innerFunction inside the outerFunction.
But how can we invoke the innerFunction from the global scope?
In order to do so, instead of returning a text in outerFunction, we can return the innerFunction itself as below:

function outerFunction() {
  function innerFunction() {
    let text = "I am a closure";
    return text;
  }
  return innerFunction;
}

Now we have access to the innerFunction.

// invoking outerFunction to get access to _innerFunction_
console.log(outerFunction()); // returns [Function: innerFunction]
// This shows we have access to the _innerFunction_

If we invoke outerFunction, with two parenthesis, we can see the variable text defined inside innerFunction returned as below:

console.log(outerFunction()()); // return "I am a closure"

We can have closures penetrating deep inside a function.
For example:

function addition(num1) {
  var addition2 = function (num2) {
    var addition3 = function (num3) {
      return num1 + num2 + num3;
    };
    return addition3;
  };
  return addition2;
}

console.log("3 + 3 + 3 = ", addition(3)(3)(3)); // returns 9
console.log("4 + 5 + 6 = ", addition(4)(5)(6)); // return 15

Scopes in JavaScript: Weird Behavior of 'var'

baijanathTharu — Mon, 28 Sep 2020 07:36:08 +0000

Scopes in JavaScript

Global Scope
Functional or Local Scope
Block Scope

Global Scope

Variables, objects and functions declared in global scope are accessible in any part of the file.

Example:

var globalVariable = "I am a global variable";

let globalVariableDeclaredWithLet =
  "I am a global variable declared with let keyword";

const globalConstant = "I am a global constant";

function globalFunction() {
  console.log("I am a global function");
}

In above example, all the variables, const and functions have global scope which means we can access them from anywhere in that file.

Functional or Local Scope

Variables, objects and functions declared inside a function have functional scope.
The variables can be accessed inside that function only.

Example:

function globalFunction() {
  var localVariable = "I am a local variable";

  let localVariableDeclaredWithLet = "I am a local variable declared with let";

  function localFunction() {
    console.log("I am a local function and I can be called within this function only");
  }

  localFunction(); //  I am a local function and I can be called within this function only
}
// invoking localFunction outside the function
localFunction(); // ReferenceError: localFunction is not defined.

Block Scope:

Variables, objects and functions declared inside if, while, for etc block of code.
Variables, objects and functions are accessible within that block only.

Example:

if(true) {
  let blockVariable = "I am a block variable";
  let blockFunction = () {
    console.log("I am a block function");
  }
  // blockFunction can be called here
  blockFunction(); //I am a block function
}
// blockFunction cannot be called outside the block
blockFunction(); //ReferenceError: blockFunction is not defined

Weird Behavior of 'var'

Variables declared with keyword var donot maintain a block scope.

Exampe:

if (true) {
  var iAmWeird = "I am weird and you can access me from outside this block.";
}

//  iAmWeird can be accessed outside the block.
console.log(iAmWeird); // I am weird and you can access me from outside this block.

Declared without any keyword

Variables, functions, objects declared without any keyword do not maintain block scope and can be accessed outside the block.

Example:

if (true) {
  iAmWeird = "I am weird and you can access me from outside this block.";

  function weirdFunction() {
    console.log("I am a weird function and you can call me from outside this block");
  }
}

console.log(iAmWeird); // I am weird and you can access me from outside this block.

weirdFunction(); // I am a weird function and you can call me from outside this block

let and const

The behavior of var not maintaining a block scope, can bring many issues in our code.
let and const comes to the rescue for this type of behavior of var.
let and const maintain the block scope.

Example:

if (true) {
  let iAmWeird =
    "I am not weird and you cannot access me from outside this block.";

  const weirdFunction = function () {
    console.log("I am  not a weird function and you cannot call me from outside this block");
  };
}

console.log(iAmWeird); // ReferenceError: iAmWeird is not defined.
weirdFunction(); // ReferenceError: weirdFunction is not defined.

Invoke your function even before declaring it: Hoisting in JavaScript

baijanathTharu — Sat, 26 Sep 2020 04:46:33 +0000

Take a Look

Example:


add(2, 6); // 8

function add(x,y){
  return x+y;
}

We called the add function even before declaring it. This is possible in JavaScript because of Hoisting feature.
In hoisting, all the declarations are moved to the top of the current scope.
It is not only applicable to functions but to any other variables.
We can use any variable even before declaring it. For example:

num1 = 2;
console.log(num1); // 2
var num1;

Hoisting in Action

num1 = 2;
num2 = 6;
add(num1, num2); // 8
var num1;
var num2;
function add(x,y){
  return x+y;
}

let and const

num1 = 2;
console.log(num1); // ReferenceError: Cannot access 'num1' before initialization
let num1;

With let and const, we cannot use the variable before its declaration. If we try to use, we get RefrenceError as above.
This is because of hoisting in which the variables declared with let and const are moved to the top and are only declared but not initialized and hence ReferenceError.

Understand Recursion: Most Basic Example

baijanathTharu — Fri, 25 Sep 2020 08:36:05 +0000

Take a look

function countDown(n) {
  if (n <= 0) return;
  console.log(n);
  n--;
  countDown(n);
}

countDown(100);

A recursion basically means calling the same thing again and again until certain condition is met.
The above program counts down from 100 to 1 recursively.
As in above example, we called the countDown function inside itself until the argument n becomes 0 or less than 0.
The condition that is to be met is called base case. It is the condition that terminates the program.
If the base case is omitted, we are stuck in a loop calling the function again and again.