Chain Promises in Javascript

A chain promises to process data through a promise-laden gold field. A simple promise - let promiseToLog = new Promise(function(resolve, reject) { console.log("started"); setTimeout(function() { resolve("promise fulfilled.. after timeout"); }, 300); }); console.log("promise initialized"); promiseToLog.then(function(val) { console.log("resolver", val); }); As you have seen earlier the promise gets initialized and next statement (‘promise initialized’) gets executed without waiting to resolve promise. What if you want to execute something after the promise is resolved? This is where promise chaining comes in. You can chain the then statements to tie multiple executions to a single promise. ...

Ways to a Promise in Javascript

You already know that promises enable us to carry out asynchronous transactions. How do you implement in your own programs? I assume you already know what promises do in Javascript](/promises-javascript) and how event driven programming works :) Javascript promise is an object. So, Promise should be as easy as using an object. As it is typical in Javascript, everything seems easy, and then stacks up all the different ways to amaze and confuse mortals. ...

Promises in Javascript

Promises enable us to carry out asynchronous transactions. Javascript promise is an object, as we all are. It is a way for the program to initiate “something”, and not wait for the process to complete (=‘async operations’). Runtime engine calls the call back function once the process completes - thereby completing the loop. At first, there were call backs. Call backs were everywhere in Javascript and sure made people hate their lives. Promises are a super-hero version of call backs - they provide a lovable er.., readable way to call services and manage their output and errors. ...

Event Driven Programming

Javascript is an event-driven programming language. Logic is triggered by a user or system action, and the flow of action continues to be determined by events along the way. These events can be user-input like clicks, system operations like completion of DB read, completion of file load, etc. Events are handed by the event handlers that are defined by you or the underlying ecosystem. The flow of events can be something like below - ...

Delete Array Elements while Iterating Array in Javascript

Removing array elements while iterating through the elements in a loop can be tricky for a beginner. Consider this - const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; for (let i = 0; i < nums.length; i++) { console.log(nums[i]); nums.splice(i, 1); } This looks like a lazy weekend programming puzzle, but also goes to demonstrate what can happen if the loop is not understood well. The above code does not delete all elements but removes alternate elements. console.log(nums); // [ 2, 4, 6, 8, 10 ] In the for loop splice removes one element each time. When we step through time - ...

Typeof Cheatsheet in Javascript

Here’s a quick reference of various values and their types. For further reference: see what types mean in Javascript and type casting in Javascript. Value Type Description true boolean Boolean 1 number Number “1” string String “abcd” string String Boolean(false) object Boolean object Number(0) object Number object String(“abcd”) object String object [1, 2, 3] object Array object Object() object Plain object {} object Plain object function() {} function Function object Code to cross-check - ...

Avoid Array Constructors in Javascript

Array constructor syntax is confusing to both the system and humans. Avoid it when possible. Consider this.. const planets = ["mercury", "venus", "earth"]; console.log(planets[0]); // mercury Now, let’s say we do the same using a constructor. const num = new Array(3, 1, 4, 5); console.log("num: ", num); // [ 3, 1, 4, 5 ] console.log(num[0]); // 3 This is ok, but there is a way to use new Array to specify the number of elements in the array. const num = new Array(3).fill(0); console.log("num: ", num); // [ 0, 0, 0 ] So, if we provide only one input - does it mean the number of elements, or the first element? ...

Faster Loops in Javascript

We have come to appreciate the performance and readability of the ol’ for loop. But, just how much should we be appreciating the performance? We already did a huge scientific study on different avatars of for. This is the time that we do another highly ineffective test for different types of loops so that we can prove nothing to no one. Consider this simple array. const arr = new Array(1000).fill("v"); We will measure the time taken to go through the array and print every element. ...

Don't Update Function Argument Values

Do not change those non-primitive function arguments without understanding the significant implications of your action. Programming languages have pass by reference and pass by value to pass arguments to a function. Javascript passes values for primitives, but references when you are trying to pass objects. Changing arguments within a function will change the arguments for ever. function hello(addressee) { addressee.name = "Mr. Anderson"; return "Hello " + addressee.name; } const person = { name: "world" }; console.log(hello(person)); // Hello Mr. Anderson console.log("person: ", person); // person: { name: 'Mr. Anderson' } It is a disaster if the world is treated as Mr. Anderson. ...

Problem with Multiplication of Decimal Numbers in Javascript

Things are always not how they appear. Especially when it comes to multiplication of decimal numbers in Javascript. Consider - const a = 1.1; Multiply the above number by 3. Compare with expected answer just to make sure you are not seeing a wrong answer. const a = 1.1; const a3 = 3.3; const thrice = 1.1 * 3; console.log("thrice: ", thrice); // 3.3000000000000003 console.log(thrice == a3); // false This happens because Javascript treats all of its numbers as floating point numbers, and their binary math cannot exactly represent numbers which has denominator not divisible by 2. ...