What is a Promise ?

Apr 13, 2017

A promise is an object that may produce a single value some time in the future: either a resolved value, or a reason that it’s not resolved. A promise may be in one of the 3 possible states: fulfilled, rejected or pending. Promise user can attach callbacks to handle the fulfilled value or the reason for rejection.

then

The first argument of .then is a function that runs when the promise is resolved and receives the result. The second argument of .then is a function that runs when the promise is rejected and receives the error.

let promise = new Promise(function(resolve, reject) {
  setTimeout(() => resolve("done!"), 1000);
});

// resolve runs the first function in .then
promise.then(
  result => alert(result), // shows "done!" after 1 second
  error => alert(error) // doesn't run
);
let promise = new Promise(function(resolve, reject) {
  setTimeout(() => reject(new Error("Whoops!")), 1000);
});

// reject runs the second function in .then
promise.then(
  result => alert(result), // doesn't run
  error => alert(error) // shows "Error: Whoops!" after 1 second
);

Chaining

Value returned by then is used in next then by calling with that value. However if a promise is returned, the next then waits on it and is only called when the promise settles.

catch

The catch callback is executed when the promise is rejected. catch is just a syntactic sugar for then(undefined, func), but it’s more readable.

let promise = new Promise(function(resolve, reject) {
  reject("Error");
});
promise.then(function() {
  console.log("success");
})
.catch(function() {
  console.log("failure");
});

finally

finally callback is called regardless of success or failure Its a good handler for performing cleanup.

let promise = new Promise(function(resolve, reject) {
  reject("Connection Timeout");
})

promise.then(function() {
  console.log("success");
})
.catch(function() {
  console.log("failure")
})
.finally(function() {
  console.log("Cleaning up connection objects");
});
// failure
// Cleaning up connection objects 

Static Methods

  • Promise.resolve() - Creates a promise that resolves to value given to it.
  • Promise.reject() - Create a promise that rejects with the value given to it.
  • Promise.all(array) - Make a promise that fulfills when every itme in the array fulfills and rejects if any item rejects.
  • Promise.race() - Make a promise that fulfills as soon as any item fulfills or rejects as soon as any item rejects.

Promise States

  • Fulfilled - The action relating to the promise suceeded.
  • Rejected - The action relating to the promise failed.
  • Pending- Hasn’t fulfilled or rejected yet.
  • Settled - Has fulfilled or rejected.

References

Categories : JavaScript

Big O notation

Apr 10, 2017

Big O notation is used in computer science to describe the the performance or complexity of an algorithm. Big O specifically describes the the worst case scenario, and can be used to describe the execution time required or the space used.

References

  • https://rob-bell.net/2009/06/a-beginners-guide-to-big-o-notation/
  • https://justin.abrah.ms/computer-science/big-o-notation-explained.html
  • https://www.interviewcake.com/article/javascript/big-o-notation-time-and-space-complexity
Categories : Programming

JavaScript Closures

Apr 10, 2017

Closures are function which ‘remember’ the environment in which they were created. A closure is a combination of a function and the lexical environment within which the function was declared. This environment consists of any local variables that were in-scope at the time closure was created.

The word lexical refers to the fact that lexical scoping uses the location where a variable is declared within the source code to determine where that variable is available. Nested functions have access to variables declared in their outer scope.

function foo() {
    var i = 10;

    function print() {
        console.log(i);
    }

    return print;
}

var printFunc = foo();
printFunc(); // 10

Common mistake of using closure in for loops

for (var x = 0; x < 10; x++) {
    setTimeout(function() {
        console.log(x);
    }, 10);
}
// prints 10, 10 times

Solution, is to use a function factory

function myFunc(p) {
    return function() {
        console.log(p);
    }
}

for (var x = 0; x < 10; x++) {
    setTimeout(myFunc(x), 10);
}
// prints 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

References

Categories : JavaScript

let and const in ES6

Apr 7, 2017

ECMAScript 2015 or commonly called as ES6 specification of JavaScript introduced let and const

let

let is the new var. let could be used to declare variables, just like var.

Differences between let and var are

  • let variables are block scoped.
  • Global let variables are not properties on the global object.
  • Loops of the form for (let x...) create a fresh binding for x in each iteration.
  • It’s an to try to use a let variable before its declaration is reached.
  • Redeclaring a variable with let is a SyntaxError.
const

Variables declared with const are like let except you can’t assign to them, except at the point where they are declared. The const declaration creates a read-only reference to a value. It does not mean the value it holds is immutable, just that the variable identifier cannot be reassigned.

References

Categories : JavaScript   ES6

ES6 Arrow functions

Apr 6, 2017

Arrow functions are a more concise syntax for writing function expressions. They were introduced in ECMAScript 2015 (ES6). They are also called as lambda functions in other programming languages.

Advantages of Arrow functions

  • More concise
  • Arrow functions do not create its own this context. so this has it original meaning from the enclosing context.

Things to watch out for when using Arrow functions

  • call, apply, bind do not change the value of this in Arrow functions.
  • Arrow functions cannot be used as constructors
  • Arrow functions cannot be used as generators.
  • Arrow functions do not have the local variable arguments as do other functions.

References

Categories : ES6   JavaScript