SmellyCode's RSS Feed

How to "require" with aliases 🔁

Sat, 08 May 2021 13:15:46 GMT

I recently worked on a NodeJs based command-line app. The app had significant depth in its directory structure. The depth in directory structure unintentionally added a wild amount of relativeness to require statements.

const { utils } = require('../../../../lib');
const commands = require('../../../commands');

When I encountered these statements, I realized the need of aliases. I search for nodejs require aliases and landed on the gist: Better local require() paths for Node.js. It recommended almost 8 different solutions. I found the alias approach more promising and convincing because of following reasons:

Clean cross platform solution.
Uses a well maintained popular npm package: module-alias.
Aliases can be prefixed with symbols(such as @) to tip off fellow developers.

The alias approach had a few downsides which could be resolved easily.

Littering package.json with aliases(can be avoided by manually adding aliases).
Requires additional steps for linter and editor.

After evaluating trade offs, I installed module-alias and added aliases in package.json.

{
  "_moduleAliases": {
    "@lib": "lib",
    "@constants": "constants",
    "@commands": "commands"
  }
}

I also replaced relative require statements with aliases and tested the change.

const { utils } = require('@lib');
const commands = require('@commands');

Things were working as expected. But gradually ESLint started screaming:

It was expected because EsLint can not resolve the path aliases. I pacified ESLint using eslint-import-resolver-alias with below config:

{
  "import/resolver": {
    "alias": [
      ["@lib", "./lib"],
      ["@constants", "./constants"],
      ["@commands", "./commands"]
    ]
  }
}

After a while, I found that features such as IntelliSense, quick navigation between modules, etc. stopped working for aliased paths. It’s because VS Code was not aware of the aliased path mappings. I added the aliased path mappings to compilerOptions of jsconfig.json for VS Code.

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@lib": ["./lib"],
      "@constants": ["./constants"],
      "@commands": ["./commands"]
    }
  }
}

It started working as usual. Tada 🎉! I was happy. EsLint was happy. VS Code was happy. Everyone was happy.

A bit about Binary Heap 🌳

Sat, 20 Jun 2020 13:15:46 GMT

We learned about trees and binary trees in posts A Gentle Introduction to Trees 🌳 and A Bit about Binary Tree 🌳. In this post, we'll learn about a special type of binary tree called binary heap. A binary heap is a binary tree with following properties:

A binary heap is a complete binary tree. In a complete binary tree, all levels are filled completely, except possibly the last level, and all nodes are as far left as possible.

The root element of a binary heap is minimum/maximum amongst other elements of the tree. This property makes a binary heap either min heap or max heap. The heap property is recursively true for all the subtrees in a binary heap.

A binary heap is typically implemented using an array. For an element at i^th position in array:

parent => (i - 1) / 2
left   => 2 * i + 1
right  => 2 * i + 2

Let's quickly define operations for a binary heap.

insert(item): inserts item to the heap.
remove(i): removes the i^th item.
getRoot(): returns the root element of the heap. It is getMin for MinHeap and getMax for MaxHeap.
updateValue(i, value): updates the value of i^th item. It is decreaseValue for MinHeap and increaseValue for MaxHeap.
size(): returns the size of heap.

We'll use inheritance here, instead of composition because of is a relationship. We'll define these methods in a base class BinaryHeap, which MinBinaryHeap and MaxBinaryHeap heap will extend. We'll also make BinaryHeap class an abstract class with a comparator abstract method.

class BinaryHeap {
  constructor() {
    if (this.constructor === BinaryHeap) {
      throw new Error(
        `BinaryHeap is an abstract class. It can't be instantiated.`
      );
    }
    this._arr = [];
  }

  _swap(i, j) {
    [this._arr[i], this._arr[j]] = [this._arr[j], this._arr[i]];
  }

  _parent(index) {
    return Math.floor((index - 1) / 2);
  }

  _left(index) {
    return 2 * index + 1;
  }

  _right(index) {
    return 2 * index + 2;
  }

  _heapify() {
    // TODO: Provide stub.
  }

  comparator() {
    throw new Error('comparator method must be implemented');
  }

  insert(item) {
    // TODO: Provide stub.
  }

  remove(index, signedInfinity) {
    // TODO: Provide stub.
  }

  // Min heap -> `decreaseValue`
  // Max heap -> `increaseValue`.
  updateValue(index, value) {
    // TODO: Provide stub.
  }

  // Min heap -> `extractMin`
  // Max heap -> `extractMax`.
  extractRoot() {
    // TODO: Provide stub.
  }

  getRoot() {
    return this._arr[0];
  }

  size() {
    return this._arr.length;
  }
}

A MinBinaryHeap class which extends BinaryHeap.

class MinBinaryHeap extends BinaryHeap {
  constructor(comparator) {
    super();
    this.comparator = comparator || this.comparator;
  }

  comparator(a, b) {
    return a < b;
  }

  getMin() {
    return this.getRoot();
  }

  extractMin() {
    return this.extractRoot();
  }

  remove(index) {
    return super.remove(index, Number.NEGATIVE_INFINITY);
  }

  decreaseValue(index, value) {
    return this.updateValue(index, value);
  }
}

A MaxBinaryHeap class which extends BinaryHeap.

class MaxBinaryHeap extends BinaryHeap {
  constructor(comparator) {
    super();
    this.comparator = comparator || this.comparator;
  }

  comparator(a, b) {
    return a > b;
  }

  getMax() {
    return this.getRoot();
  }

  extractMax() {
    return this.extractRoot();
  }

  increaseValue(index, value) {
    return this.updateValue(index, value);
  }

  remove(index) {
    return super.remove(index, Number.POSITIVE_INFINITY);
  }
}

Let's implement each operation for a min heap. Implementations of these operations for a max heap more or less remain same except the comparison of elements.

Insert

Insertion in binary heap is straight forward. We push the element to the array and swap it with its parent element until the heap property is satisfied.

For a min binary heap, one can use following steps for insertion:

Push element to the array.
While element is smaller than parent, swap parent and element.

class BinaryHeap {
  // other useful method
  // ...
  // ...

  insert(item) {
    let pos = this._arr.length;
    let parPos = this._parent(pos);
    this._arr.push(item);
    while (pos !== 0 && this.comparator(item, this._arr[parPos])) {
      this._swap(parPos, pos);
      pos = parPos;
      parPos = this._parent(pos);
    }
    return this;
  }

  // other useful methods
  // ...
  // ...
}

In the worst case scenario, the element moves from leaf to root of the binary heap. Consequently, the time complexity equals to the height of the heap i.e. O(logn).

Update

The update operation decreases/increases the value of a node for a min/max binary heap.

To update the value of node at position index, we replace it's value with the new value and swap it with its parent element until the heap property is satisfied.

class BinaryHeap {
  // other useful method
  // ...
  // ...

  // Min heap -> `decreaseValue`
  // Max heap -> `increaseValue`.
  updateValue(index, value) {
    this._arr[index] = value;
    let pIndex = this._parent(index);
    while (pIndex >= 0 && this.comparator(value, this._arr[pIndex])) {
      this._swap(pIndex, index);
      index = pIndex;
      pIndex = this._parent(index);
    }
    return this;
  }

  // other useful methods
  // ...
  // ...
}

The time complexity for update operation is O(logn)

Extract Root

The root element in the binary heap represents the maximum/minimum element. That's why a min/max binary heap has an extractMin or extractMax method. Once the root is extracted, the elements of heap are rearranged or heapified to maintain the heap property.

To extract the root of a min binary heap, we replace the root with the farthest right leaf and heapify it.

To heapify a min heap, we find the minimum amongst the root and it's children(left and right). If root is not the minimum element, then we swap it with the minimum element. We recursively follow this process till the heap property is satisfied.

class BinaryHeap {
  // other useful method
  // ...
  // ...

  _heapify(index) {
    if (index >= this._arr.length) {
      return;
    }
    let left = this._left(index);
    let right = this._right(index);
    let target = index;
    if (
      left < this._arr.length &&
      this.comparator(this._arr[left], this._arr[target])
    ) {
      target = left;
    }
    if (
      right < this._arr.length &&
      this.comparator(this._arr[right], this._arr[target])
    ) {
      target = right;
    }
    if (target !== index) {
      this._swap(target, index);
      this._heapify(target);
    }
  }

  // Min heap -> `extractMin`
  // Max heap -> `extractMax`.
  extractRoot() {
    if (this._arr.length === 0) {
      return null;
    }
    if (this._arr.length === 1) {
      return this._arr.pop();
    }
    const value = this._arr[0];
    this._arr[0] = this._arr.pop();
    this._heapify(0);
    return value;
  }

  // other useful methods
  // ...
  // ...
}

The time complexity to extract root is O(logn)

Delete/Remove

To delete an element from a binary heap, we update it's value with maximum/minimum value i.e. Infinity and -Infinity and extract the root.

class BinaryHeap {
  // other useful method
  // ...
  // ...

  remove(pos, signedInfinity) {
    const v = this._arr[pos];
    this.updateValue(pos, signedInfinity);
    this.extractRoot();
    return v;
  }

  // other useful methods
  // ...
  // ...
}

The time complexity for deletion is O(logn).

Summary

Binary heaps are complete binary trees. Each node in a binary heap is minimum/maximum amongst its children(also known as heap property). Consequently, a binary heap can be either a min binary heap or a max binary heap.

A binary heap is typically implemented using an array. The parent, left and child element of the i^th element in array are present at (i - 1) / 2, 2 * i + 1, and 2 * i + 2 positions.

For a binary heap, basic operations like deletion, insertion, root extraction, etc take O(logn) time.

JavaScript and Bit-hacks 🧙🏻‍♂️

Fri, 01 May 2020 13:15:46 GMT

Bitwise operators operate on binary numbers. If the operands of a bitwise operator are not binary, then they are converted into binary before the operation.

In JavaScript, bitwise operators convert their operand(s) into 32-bit signed integers in two's complement format. However, the results are standard numbers. This post elaborates on bitwise operators available in JavaScript and explores a few popular bitwise tricks/hacks.

Before we jump into bitwise operators, let's take a gander at the two's complement.

There are many ways to compute two's complement of a number. Here's a one I like to use:

1. Convert the magnitude of the number to binary.
2. If the number is positive, then we are done.
3. If the number is negative:
   a. Find the one's complement of binary by inverting 0's and 1's.
   b. Add 1 to the one's complement.

Let's find two's complement of 5 and -5 with the method above. We'll use a nibble(4 bits) for the same.

Finding two's complement of 5 is straightforward. It's a positive number. Therefore it's two's complement is 0101.

Finding two's complement of -5 includes the following steps:

1. The magnitude of -5 is 5. 5 in binary is `0101`.
2. -5 is a negative number:
   1. The one's complement of `0101` is `1010`.
   2. The complement after adding 1: `1011`.

The two's complement of -5 is 1011.

Converting two's complement to decimal involves similar steps.

1. If the two's complement of the number starts with `1`:
   a. Find the one's complement by inverting 0's and 1's.
   b. Add one to the one's complement.
2. Convert the binary to decimal.
3. If two's complement starts with one, add minus sign to decimal.

Let's consider two's complement 0101 and 1011 and find their decimal values.

0101 starts with zero. It doesn't require any additional steps. The decimal value of 0101 is 5.

The two's complement to decimal conversion for 1011 requires the below steps:

1. One's complement of `1011` is `0100`.
2. After adding 1: `0101`.
3. The decimal equivalent of `0101` is 5.
4. `1011` starts with one. Therefore, -5.

The decimal value of 1011 is -5.

In two's complement format, the leftmost bit acts as a sign bit. It means an n-bit layout can safely represent numbers from -2^{n - 1} to 2^{n - 1} - 1 in two's complement format. For example, a nibble(4 bits layout) can represent number from -8 to 7 without any precision loss.

JavaScript uses a 32-bit layout for bitwise operations. Therefore, the range is -2³¹ to 2³¹ - 1(equivalent to -2147483648 to 2147483647).

Two’s complement of some numbers in 32 bits:

-1

          1 => 00000000000000000000000000000001
 Complement => 11111111111111111111111111111110
                                             +1
-----------------------------------------------
2's complement 11111111111111111111111111111111
-----------------------------------------------

2147483647

 2147483647 => 01111111111111111111111111111111
-----------------------------------------------
2's complement 01111111111111111111111111111111
-----------------------------------------------

-2147483648

 2147483648 => 10000000000000000000000000000000
 Complement => 01111111111111111111111111111111
                                             +1
-----------------------------------------------
2's complement 10000000000000000000000000000000
-----------------------------------------------

If a number has more than 32-bits, it looses its significant bits. For example, the below statement logs zero.

console.log((2 ** 32) >> 0);

It is because the 2's complement of 2³² is zero in 32-bits. We shift zero by zero bits and end up with zero.

    4294967296 => 100000000000000000000000000000000 (33 bits)
    4294967296 =>  00000000000000000000000000000000 (32 bits)
-------------------------------------------------------------
2's complement =>  00000000000000000000000000000000 (32 bits)
-------------------------------------------------------------

Bitwise Logical Operators

Bitwise logical operators pair each bit of one operand with another operand and perform logical operations on these pairs. That's why these operations are called bitwise operations.

& (Bitwise AND)

& operator performs AND operation. It yields 1 if both operands are 1, else 0.

x	y	x & y
0	0	0
0	1	0
1	0	0
1	1	1

     1 => 00000000000000000000000000000001
     2 => 00000000000000000000000000000010
------------------------------------------
 1 & 2 => 00000000000000000000000000000000  => 0
------------------------------------------

For any number x, x & 0 always yields 0.

| (Bitwise OR)

| operator performs OR operation. It yields 1 if one of the operand is 1, else 0.

x	y	x \| y
0	0	0
0	1	1
1	0	1
1	1	1

     1 => 00000000000000000000000000000001
     2 => 00000000000000000000000000000010
------------------------------------------
 1 | 2 => 00000000000000000000000000000011  => 3
------------------------------------------

For any number x, x | 0 always yields x.

^ (Bitwise XOR)

^ operator performs XOR operation. It yields 1, if both operands are different, else 0.

x	y	x ^ y
0	0	0
0	1	1
1	0	1
1	1	0

     1 => 00000000000000000000000000000001
     2 => 00000000000000000000000000000010
------------------------------------------
 1 ^ 2 => 00000000000000000000000000000011  => 3
------------------------------------------

For any number x, x ^ 0 always yields x.

~ (Bitwise NOT)

~ operator performs NOT operation. It inverts bits of the operands.

x	~x
0	1
1	0

    -1 => 11111111111111111111111111111111
------------------------------------------
 ~(-1) => 00000000000000000000000000000000 => 0
------------------------------------------

For any number x, ~x always yields -(x + 1).

Bitwise shift operators

Bitwise shift operators work with two operands--left and right. The operator shifts the left operand by certain bit positions--defined by the right operand. The operator controls the direction of the shifting.

Bitwise shift operators convert their left and right operands into 32-bit signed integers in two's complement format. Only the least significant 5-bits of the right operand are used cause the operator can shift 32 bits at max.

<< (Left Shift)

As the name suggests, the left shift operator shifts the first operand to the left by the specified number of bits. The operator discards bits from left and fills zero from the right.

               2 => 00000000000000000000000000000010
----------------------------------------------------
          2 << 5 => 00000000000000000000000001000000 => 64
----------------------------------------------------

     -2147483648 => 10000000000000000000000000000000
----------------------------------------------------
-2147483648 << 1 => 00000000000000000000000000000000 => 0
----------------------------------------------------

>> (Sign-propagating Right Shift)

Sign-propagating right shift operator shifts the first operand to the right by the specified number of bits. It discards bits from the right and copies the leftmost bit on the left.

               2 => 00000000000000000000000000000010
----------------------------------------------------
          2 >> 1 => 00000000000000000000000000000001 => 1
----------------------------------------------------

     -2147483648 => 10000000000000000000000000000000
----------------------------------------------------
-2147483648 >> 4 => 11111000000000000000000000000000 => -134217728
----------------------------------------------------

>>> (Zero-fill Right Shift)

Zero-fill right shift operator is quite akin to sign-propagating right shift operator. Instead of propagating the sign bit, it fills zeros in the left while shifting the operand to the right.

Unlike other bitwise operators, zero-fill right shift operator returns a 32-bit unsigned integer. Therefore, the return value is converted directly from binary to decimal.

      -2147483648 => 10000000000000000000000000000000
-----------------------------------------------------
-2147483648 >>> 2 => 00100000000000000000000000000000 => 536870912
-----------------------------------------------------

      -2147483648 => 10000000000000000000000000000000
-----------------------------------------------------
-2147483648 >>> 0 => 10000000000000000000000000000000 => 2147483648
-----------------------------------------------------

Bitmask

A bitmask or mask is a variable that is used in bitwise operations to set/unset the bits of another variable. For example, let’s say we need to check if a variable is odd. How do we find it using bitwise operators? We know that the lowest bit of an odd number is always 1. The below function leverages this fact.

function isOdd(x) {
  return x & 1;
}
console.log(isOdd(5)); // 1
console.log(isOdd(4)); // 0

The function isOdd unsets bits of x by ANDing x with 1.

   5 => 0000000000000000000000000000101
   1 => 0000000000000000000000000000001
---------------------------------------
   & => 0000000000000000000000000000001 => 1
---------------------------------------

   4 => 0000000000000000000000000000100
   1 => 0000000000000000000000000000001
---------------------------------------
   & => 0000000000000000000000000000000 => 0
---------------------------------------

Here, we can say that 1 is acting as a mask/bitmask. Therefore, isOdd can be written as:

function isOdd(x) {
  const mask = 1;
  return x & mask;
}
console.log(isOdd(5)); // 1
console.log(isOdd(4)); // 0

You can read more about bitmask here.

Tricks

Bitwise tricks feel like the dark magic of computer programming 🔮. They are less intuitive and hard to understand. That's because they operate on binary, and binary is made for machines, not for humans. I'll do my best to explain each trick as simple as possible. Please feel free to correct/add if there's any gap.

⚠️ Tricks below are demonstrated only for learning purposes. One should vet them thoroughly before using them in a project. Also, these tricks might have integer overflow if there’s a need for more than 32-bits.

Truncate Integer

function truncate(x) {
  // Double tilde(~)
  return ~~x;
}
truncate(-1234.12); // -1234
truncate(1234.12); // 1234

The method above truncates the integer part of a number. It exploits the fact that JavaScript converts the operands of a bitwise operator into 32-bit signed integers in two’s complement format.

You may want to use Math.trunc() in your project.

Flip sign of an integer

For any integer x, ~x yields -(x + 1). Therefore,

~x + 1 => -(x + 1) + 1 => -x - 1 + 1 => -x

function negate(x) {
  return ~x + 1;
}

Increment/decrement by 1

function add1(x) {
  // -~x => -(-(x + 1)) => x + 1
  return -~x;
}

function subtract1(x) {
  // ~-x => -(-x + 1) => x - 1
  return ~-x;
}

Swapping values

Values of two variables can be swapped using XOR operator.

function swap(x, y) {
  x ^= y;
  y = x ^ y;
  x ^= y;
}

Power of two

If x is a power of 2, then for x - 1 only the right most bits will be on. Therefore, ANDing x with x - 1 will yield zero if x is a power of 2. For example

      4  => 00000000000000000000000000000100
  4 - 1  => 00000000000000000000000000000011 => 3
--------------------------------------------
    &    => 00000000000000000000000000000000 => 0
--------------------------------------------

function isPowerOf2(x) {
  if (x === 0) {
    return false;
  }
  return (x & (x - 1)) === 0;
}

isPowerOf2(2); // true
isPowerOf2(3); // false

Absolute Value

Let's we want to find the absolute value of -5 without branching. As we know, for any x, ~x yields -(x + 1). So we can do ~(-5) + 1 to get 5.

   -5  => 11111111111111111111111111111011
 ~(-5) => 00000000000000000000000000000100
                                        +1
 -----------------------------------------
          00000000000000000000000000000101 => 5
 -----------------------------------------

We need to negate the number and add 1 only when the the number is negative. We can use below algorithm:

Create a bitmask for a number x by x >> 31. The bitmask will be zero for positive x and -1 for negative x.

 5 >> 31 => 00000000000000000000000000000000 => 0

-5 >> 31 => 11111111111111111111111111111111 => -1

XOR bitmask with x to find negation.

x ^ 0 => x
x ^ -1 => ~x

Subtract bitmask.

(x ^ 0) - 0 => x;
(x ^ -1) => ~x - (-1) => ~x + 1

Above steps in JS code.

function abs(x) {
  const mask = x >> 31;
  return (x ^ mask) - mask;
}

You may want to use Math.abs() in your project.

Division/Multiply by 2

Division/multiplication by 2 can be achieved by shifting left/right by 1 bit.

function double(x) {
  return x << 1;
}

function half(x) {
  return x >> 1;
}

double(5); // 10
half(10); // 5

Detect sign

function hasSameSign(x, y) {
  return (x ^ y) < 0;
}

hasSameSign(-1, 1); // false;
hasSameSign(-1, -2); // true;
hasSameSign(2, 1); // true

Min and max of two integers

We can find min and max of two integers using XOR and comparison operator. For integers x and y, expression x < y evaluates to 1 if x is greater, otherwise 0 which means:

when x is greater.

-(x < y) => 0

// AND with 0.
(x ^ y) & -(x < y) => (x ^ y) & 0 => 0

// XOR with 0.
y ^ ((x ^ y) & -(x < y)) => y ^ ((x ^ y) & 0)  => y ^ 0 => y

when y is greater

-(x < y) => -1

// AND with -1.
(x ^ y) & -(x < y) => (x ^ y) & (-1) => x ^ y

// XOR with (x ^ y)
y ^ ((x ^ y) & -(x < y)) => y ^ ((x ^ y) & (-1)) => y ^ x ^ y => x

function min(x, y) {
  // If x is greater `mask` will be 0 otherwise -1
  const mask = -(x < y);

  return y ^ ((x ^ y) & mask);
}

function max(x, y) {
  // If x is greater `mask` will be 0 otherwise -1
  const mask = -(x < y);

  return x ^ ((x ^ y) & mask);
}

Alternate method. It uses the right shift operator and the difference in numbers.

function min(x, y) {
  // If x is greater `mask` will be 0 otherwise -1
  const mask = (x - y) >> 31;

  // (x - y) & 0 => 0
  // (x - y) & -1 => x - y
  return y + ((x - y) & mask);
}

function max(x, y) {
  // If x greater mask will be 0 otherwise -1
  const mask = (x - y) >> 31;

  // (x - y) & 0 => 0
  // (x - y) & -1 => x - y
  return x - ((x - y) & mask);
}

You may want to use Math.min() and Math.max() in your project.

Reverse bits of an unsinged integer

function reverseBits(number) {
  const size = 31; // 2's complement size.
  let result = 0;
  for (let i = 1; i <= 31; i += 1) {
    // Add the left most bit to `result`
    result |= number & 1;

    // Discard the added bit.
    number >>= i;

    // Make space for the new bit.
    result <<= 1;
  }
  return result;
}

console.log(reverseBits(1)); // -2147483648

RGB Values from color code

function hexToRgb(color) {
  const r = (color & 0xff0000) >>> 16;
  const g = (color & 0x00ff00) >>> 8;
  const b = color & 0x0000ff;
  return [r, g, b].join(', ');
}

console.log(hexToRgb(0x010203)); // 1, 2, 3

Final Thoughts:

In a high-level language like JavaScript, bitwise operators are relatively slow. The main reason for the slowness is the two's complement conversion of the operands. Also, bitwise operators take a toll on the legibility of the code. Their less intuitiveness creates mental overhead of decimal to binary conversion and vice versa. One should use them sparingly.

Having said that, if the situation demands, don't hesitate to shake some bits!

Building an Accordion with React Hooks.

Wed, 26 Feb 2020 10:09:19 GMT

According to Sematic UI, an accordion allows users to toggle the display of sections of content. In this post, we'll build a highly reusable accordion component from scratch. We will use React and its hooks api.

A sample accordion ( Codesandbox )

An accordion component can be broken-down in following components:

A toggle component to show and hide the content.
A collapse component to wrap the content.
And, a root component to glue everything.

Let's name the root component <Accordion />. Accordion will be responsible for rendering its children with necessary data. It can be implemented using render props or compound components. We'll use the compound component pattern because it makes Accordion easy to reason about. Also, with the compound component pattern, our JSX is semantically more meaningful and beautiful 🙂.

The sample accordion JSX.

<Accordion>
  <Accordion.Toggle>Click Me</Accordion.Toggle>
  <Accordion.Collapse>Some collapsable text</Accordion.Collapse>
</Accordion>

Let's design each of the accordion components.

<Accordion />

The Accordion component acts as a container. The element prop is used as the container element/component. The default value of the element is set to div. Accordion also receives a few other props: onToggle, activeEventKey, etc.

Note: PropTypes package is used for type checking.

const Accordion = ({
  element: Component,
  activeEventKey,
  onToggle,
  children,
  ...otherProps
}) => {
  return <Component {...otherProps}>{children}</Component>;
};

Accordion.propTypes = {
  // Element or Component to be rendered as a parent for accordion.
  element: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),

  // `eventKey` of the accordion/section which is active/open
  activeEventKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

  // onToggle callback. (eventKey) => void
  onToggle: PropTypes.func
};

Accordion.defaultProps = {
  // default render as div
  element: 'div'
};

<Accordion.Toggle />

As the name suggests, Accordion.Toggle toggles the content. It also receives the element prop just like the Accordion component. It takes an eventKey prop mapped to a Accordion.Collapse component.

const Toggle = ({
  element: Component,
  eventKey,
  onClick,
  children,
  ...otherProps
}) => {
  return <Component {...otherProps}>{children}</Component>;
};

Toggle.propTypes = {
  // Element or Component to be rendered as a toggle.
  element: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),

  // `eventKey` of the content to be controlled.
  eventKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
};

Toggle.defaultProps = {
  element: 'div'
};

<Accordion.Collapse />

The Accordion.Collapse component conditionally renders the content. Just like other components, it also receives an element prop.

const Collapse = ({
  element: Component,
  eventKey,
  children,
  ...otherProps
}) => {
  return <Component {...otherProps}>{children}</Component>;
};

Collapse.propTypes = {
  // Wrapper for target content.
  element: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),

  // Event key for the content.
  eventKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
};

Collapse.defaultProps = {
  element: 'div'
};

We'll export both Toggle and Collapse with Accordion namespace.

// ...
// Accordion's code
// ...

Accordion.Toggle = Toggle;
Accordion.Collapse = Collapse;

We have laid out the foundation. Let's introduce other concepts.

useAccordionContext

Each accordion component needs some data from the Accordion component. eg. Accordion.Collapse needs to know the activeEventKey to conditionally display content. Accordion.Toggle needs to know the activeEventKey to invoke the toggle callback with appropriate params.

We can manually pass the data as props to each accordion component. But that will require the knowledge of their positions in the Accordion component tree. React provides a better alternative for such uses cases: React Context. Context APIs help us to pass data through the component tree without having to pass props down manually at every level.

Let's create a context for accordion.

AccordionContext.js

import React from 'react';

export default React.createContext(null);

Hook to access the accordion context.

import { useContext } from 'react';
import AccordionContext from '../AccordionContext';

const useAccordionContext = () => {
  const context = useContext(AccordionContext);
  if (!context) {
    throw new Error(
      'Accordion components are compound component. Must be used inside Accordion.'
    );
  }
  return context;
};

export default useAccordionContext;

Accordion initializes the AccordionContext with an activeEventKey attribute and an onToggle method.

const Accordion = ({
  element: Component,
  activeEventKey,
  onToggle,
  children,
  ...otherProps
}) => {
  const context = useMemo(() => {
    return { activeEventKey, onToggle };
  }, [activeEventKey, onToggle]);

  return (
    <AccordionContext.Provider value={context}>
      <Component {...otherProps}>{children}</Component>
    </AccordionContext.Provider>
  );
};

Accordion.Collapse reads the activeEventKey from the context. It renders its content if activeEventKey equals to eventKey.

import { useAccordionContext } from '../hooks';

const Collapse = ({
  element: Component,
  eventKey,
  children,
  ...otherProps
}) => {
  const { activeEventKey } = useAccordionContext();

  return activeEventKey === eventKey ? (
    <Component {...otherProps}>{children}</Component>
  ) : null;
};

Accordion.Toggle invokes the onToggle function from context on click of the toggle component/element.

import { useAccordionContext } from '../hooks';

const useAccordionClick = (eventKey, onClick) => {
  const { onToggle, activeEventKey } = useAccordionContext();
  return event => {
    onToggle(eventKey === activeEventKey ? null : eventKey);

    if (onClick) {
      onClick(event);
    }
  };
};

const Toggle = ({
  element: Component,
  eventKey,
  onClick,
  children,
  ...otherProps
}) => {
  const accordionClick = useAccordionClick(eventKey, onClick);

  return (
    <Component onClick={accordionClick} {...otherProps}>
      {children}
    </Component>
  );
};

After plugging everything together in App with a Card component:

import Accordion from './Accordion';

import Card from './Card';

const content = [
  // items in {question, answer} format
  // ...
  // ...
];

export default function App() {
  const [activeEventKey, setActiveEventKey] = useState(0);

  return (
    <div className="App">
      <Accordion activeEventKey={activeEventKey} onToggle={setActiveEventKey}>
        {content.map(({ question, answer }, index) => (
          <Card key={index}>
            <Accordion.Toggle element={Card.Header} eventKey={index}>
              {question}
              {activeEventKey !== index && <span>👇🏻</span>}
              {activeEventKey === index && <span>👆🏻</span>}
            </Accordion.Toggle>
            <Accordion.Collapse eventKey={index} element={Card.Body}>
              {answer}
            </Accordion.Collapse>
          </Card>
        ))}
      </Accordion>
    </div>
  );
}

▶ sample-accordion

Controllability

The Accordion component is a controlled component. It doesn't own any state. It receives needed data as props(eg. active section key activeEventKey, toggle handler onToggle, etc). The controlled nature of Accordion makes it very flexible but it has a downside. Consumer components have to explicitly manage their Accordion's state even when they don't need it. Explicit state management can be tedious sometimes and may cause boilerplate.

We'll add uncontrolled behavior to the accordion. In real-world apps, you might want to use uncontrollable.

To make Accordion uncontrollable/controllable, we'll introduce a local state in the accordion. We'll keep it in sync with activeEventKey prop. We'll use useLayoutEffect instead of useEffect for syncing to avoid flickering(useEffect vs useLayoutEffect).

Enhanced Accordion component with local state.

const useEventKey = (eventKey, onToggle) => {
  const [activeEventKey, setActiveEventKey] = useState(eventKey);

  useLayoutEffect(() => {
    setActiveEventKey(eventKey);
  }, [eventKey, onToggle]);

  return [activeEventKey, setActiveEventKey];
};

const Accordion = ({
  element: Component,
  activeEventKey,
  onToggle,
  children,
  ...otherProps
}) => {
  const [eventKey, setEventKey] = useEventKey(activeEventKey, onToggle);

  const handleToggle = useCallback(
    eventKey => {
      if (activeEventKey !== undefined) {
        onToggle(eventKey);
        return;
      }
      setEventKey(eventKey);
    },
    [activeEventKey, onToggle, setEventKey]
  );

  const context = useMemo(() => {
    return {
      activeEventKey: eventKey,
      onToggle: handleToggle
    };
  }, [eventKey, handleToggle]);

  return (
    <AccordionContext.Provider value={context}>
      <Component {...otherProps}>{children}</Component>
    </AccordionContext.Provider>
  );
};

Accordion.defaultProps = {
  // default render as div
  element: 'div',

  onToggle: () => {}
};

Finally, App component with both controlled and uncontrolled forms of the Accordion.

export default function App() {
  const [activeEventKey, setActiveEventKey] = useState(0);
  return (
    <div className="App">
      <h3>Uncontrolled Accordion</h3>
      <Accordion>
        {content.map(({ question, answer }, index) => (
          <Card key={index}>
            <Accordion.Toggle element={Card.Header} eventKey={index}>
              {index + 1}. {question}
            </Accordion.Toggle>
            <Accordion.Collapse eventKey={index} element={Card.Body}>
              {answer}
            </Accordion.Collapse>
          </Card>
        ))}
      </Accordion>

      <h3>Controlled Accordion</h3>
      <Accordion activeEventKey={activeEventKey} onToggle={setActiveEventKey}>
        {content.map(({ question, answer }, index) => (
          <Card key={index}>
            <Accordion.Toggle element={Card.Header} eventKey={index}>
              {index + 1}. {question}
              {activeEventKey !== index && <span>👇🏻</span>}
              {activeEventKey === index && <span>👆🏻</span>}
            </Accordion.Toggle>
            <Accordion.Collapse eventKey={index} element={Card.Body}>
              {answer}
            </Accordion.Collapse>
          </Card>
        ))}
      </Accordion>
    </div>
  );
}

Thanks for the reading 🙏🏻.

Variable Scope in Catch Block ~ JavaScript

Fri, 02 Aug 2019 08:41:36 GMT

Variable scope and hoisting are notorious in JavaScript land. Both newbies and seasoned programmers have difficulties to wrap their head around these when they encounter certain quirks. A few weeks ago, Kyle Simpson tweeted below code snippet with TIL caption.

function foo() {
  'use strict';
  err = 1;
  try {
    throw 'hello';
  } catch (err) {
    console.log(err);
    var err = 2;
  }
  console.log(err);
}
foo();

When I interpreted the code, I concluded the output below.

hello
2

Sadly my interpretation was incorrect. The actual output is.

hello
1

The enigma of variables within the catch block made me curious to take a gander at the spec. I found this note:

The Block of a Catch clause may contain var declarations that bind a name that is also bound by the CatchParameter. At runtime, such bindings are instantiated in the VariableDeclarationEnvironment. They do not shadow the same-named bindings introduced by the CatchParameter and hence the Initializer for such var declarations will assign to the corresponding catch parameter rather than the var binding.

In simple words, the catch parameter is block-scoped--can not be accessed outside the block. And, it overrides/shadows variables with the same name.

function foo() {
  'use strict';
  try {
    throw 'hello';
  } catch (err) {
    console.log(err); // hello
  }
  // `err` block scoped. Does not exist outside the catch block.
  console.log(err); // throws `err` is not defined.
}
foo();

Since the catch parameter overrides variables with the same name in the current execution context--enclosing function or global context--any initializer for the catch parameter does not affect those variables.

function foo() {
  let err = 0;
  try {
    throw 'hello';
  } catch (err) {
    console.log(err);
    err = 10;
  }
  console.log(err);
}

foo();

Of course, if we declare a block scope variable same as catch parameter inside the catch block, then Js will complain.

function foo() {
  try {
    throw 'hello';
  } catch (err) {
    console.log(err);
    let err = 2; // will throw an error.
  }
  console.log(err);
}

Declarations with var are not block-scoped and hoisted to the top of the function. Also, JavaScript is more forgiving towards re-declaration of variables with var. That's why no error is raised even in the 'strict' mode.

function foo() {
  'use strict';
  err = 1;
  try {
    throw 'hello';
  } catch (err) {
    console.log(err); // hello
    var err = 2;
  }
  console.log(err); // 1
}
foo();

Component Glossary 📖

Tue, 25 Jun 2019 12:59:23 GMT

Components are basic building blocks of modern web applications. They help web developers to break complex user interfaces into independent smaller blocks or pieces which can be reused and plugged with other pieces or components as is. In general a component is

"a part or element of a larger whole, especially a part of a machine or vehicle." ~ Google

This article explains various types of components with words and code.

Function Components

Function Components are JavaScript functions which take inputs known as props and returns a React Element as output. Here's a simple Greetings function component to greet.

function Greetings(props) {
  return <h1>Hello {props.name}</h1>;
}

// With arrow function
// const Greetings = props => <h1>Hello {props.name}</h1>;

People often mix up function components with "Functional Components". Every component is a functional component if it is functioning or working fine. 😀

React does not instantiate function components. It means they can not be accessed with the ref attribute. Lack of instantiation also makes the life-cycle hooks inaccessible to function components.

Function components don't have any state unless they are hooked.

Class Components

Components created with ES6 Classes are known as Class Components. Class components extend the base class React.Component. Unlike function components, class components can have state and access the life-cycle methods. Class Components define a render method which returns a react element as output. Here's a simple Clock component to display time.

class Clock extends React.Component {
  state = { now: new Date() };

  intervalId = null;

  updateTime = () => this.setState({ now: new Date() });

  componentDidMount() {
    this.intervalId = setInterval(() => this.updateTime(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.intervalId);
  }

  render() {
    return <p>{this.state.now.toLocaleTimeString({}, { hour12: true })}</p>;
  }
}

Instances of class components can be accessed with the ref attribute.

class App extends React.Component {
  clockRef = React.createRef();

  componentDidMount() {
    // instance of the clock component
    console.log(this.clockRef.current);
  }

  render() {
    return <Clock ref={this.clockRef} />;
  }
}

Pure Components

Let's discuss a simple Greetings React.Component first.

class Greetings extends React.Component {
  render() {
    console.count('Greetings --> render');
    return <p>Hello {this.props.name}!</p>;
  }
}

It greets with a name passed as props. An additional console.count statement is added to render method to count executions.

The App component below takes name from a form input control and passes it to the Greetings component.

class App extends React.Component {
  state = { name: 'Sheldon', text: '' };

  handleChange = event => {
    this.setState({ text: event.target.value });
  };

  handleSubmit = event => {
    event.preventDefault();
    this.setState({ text: '', name: this.state.text });
  };

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input
            type="text"
            value={this.state.text}
            required
            onChange={this.handleChange}
          />
          <input type="submit" value="Greet" />
        </form>
        <Greetings name={this.state.name} />
      </div>
    );
  }
}

When a user interacts with the input control, it updates the state of the App component. React invokes the render method--with the updated state and props--of the App component and its children to create a new React Element tree for diffing. Although, the state and props of the Greetings component are not changed, still React calls the render method of the Greetings component.

In large applications, such unnecessary executions of render methods create performance issues and bog down user interfaces. The shouldComponentUpdate life-cycle method is used to avoid these unnecessary re-renderings of the component. By default, shouldComponentUpdate return true, but its implementation can be easily overridden. Let's override shouldComponentUpdate for the Greetings component.

class Greetings extends React.Component {
  shouldComponentUpdate(nextProps) {
    // Re-render only when the `name` prop changes.
    return this.props.name !== nextProps.name;
  }

  render() {
    console.count('Greetings --> render');
    return <p>Hello {this.props.name}!</p>;
  }
}

After the very first render, Greetings component is re-rendered only when the name prop changes.

To solve the same problem, React introduces a variant of React.Component called React.PureComponent which implicitly implements shouldComponentUpdate. The implicit implementation compares props and state by reference(shallow comparison). Let's write the pure version of Greetings.

class PureGreetings extends React.PureComponent {
  render() {
    console.count('Pure Greetings --> render');
    return <span>Hello {this.props.name}!</span>;
  }
}

Here's the pen with full code.

Controlled/Uncontrolled Components

Working with form elements is a tad tedious. It requires a lot of malarky to get data from the form elements. That's because form elements maintain their own state internally. Developers have to throw a few lines to JavaScript to get the job done. Form elements in React are no exception. The way developers deal with a form element determines whether that element is a Controlled or Uncontrolled Element/Component. If the value of a form element is controlled by React then it's called a "Controlled Component" otherwise "Uncontrolled Component".

Controlled Components don't change their state on user interaction. State changes happen only when the parent component decides eg. the SubscriptionForm component below doesn't honor user inputs (Codepen).

class SubscriptionForm extends React.Component {
  handleSubmit = event => {
    event.preventDefault();
  };
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="email" value="smelly@smellycode.com" />
        <input type="submit" value="Subscribe" />
      </form>
    );
  }
}

Why changes are not honored? That's because the value attribute for the email input is set to smelly@smellycode.com. When React runs the diffing algorithm on the render tree. It always gets the email input as smelly@smellycode.com so it ends up rendering the same value regardless of inputs entered by the user. Let's fix it by setting up an event listener which will update the state on change event(Codepen).

class SubscriptionForm extends React.Component {
  state = { email: '' };

  handleSubmit = event => {
    event.preventDefault();
    console.log('Values --> ', this.state);
  };

  handleChange = event => this.setState({ email: event.target.value });

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type="email"
          value={this.state.email}
          onChange={this.handleChange}
        />
        <input type="submit" value="Subscribe" />
      </form>
    );
  }
}

Everything that goes into the input form elements is controlled by React here. That's why it is called "Controlled Component".

For "Uncontrolled Component", form data is not handled by React. DOM takes care of them. Here's an uncontrolled version of the SubscriptionForm.

class SubscriptionForm extends React.Component {
  inputRef = React.createRef();

  handleSubmit = event => {
    event.preventDefault();
    console.log('Value -->', this.inputRef.current.value);
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="email" ref={this.inputRef} />
        <input type="submit" value="Subscribe" />
      </form>
    );
  }
}

For elaborative comparison please refer the article.

Higher Order Components

Suppose there's an application which has a few malformed components--components whose elements/children are invalid react elements. Rendering of these components breaks the user interface.

// A sample malformed component.
class MalformedComponent extends React.Component {
  render() {
    // {new Date()} is not a valid react element. Rendering it will throw an error.
    return <p>Now:{new Date()}</p>;
  }
}

We need to implement an error handling mechanism to avoid crashes. React provides error boundary apis to handle such errors. So we refactor MalformedComponent as:

class MalformedComponent extends React.Component {
  state = {
    error: null
  };

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { error };
  }

  render() {
    if (this.state.error) {
      return (
        <details>
          <summary>Ouch! Things are messed up. We are sorry. 👾</summary>
          <pre style={{ color: `red` }}>{this.state.error.stack}</pre>
        </details>
      );
    }
    return <WrappedComponent {...this.props} />;
  }
}

Adding error boundaries only fixes the MalformedComponent. We need to fix the other components too, means we need to add error boundaries to other components.

How do we do it? Hmm, One way is to add the error handling code in every malformed component the way we did above. But it will make our component a bit cumbersome to maintain and less DRY.

What if we write a function to fill in the error handling code? Well, we can write but we shouldn't because we'll be modifying the existing component which is not recommended and may lead to unexpected behavior.

What if we write a function which takes a malformed component and returns a new component which wraps the malformed component with error boundaries? Interesting! Only thing is, it will add a new wrapper component in our component tree, but we can live with it. Let's code it.

const withErrorBoundaries = WrappedComponent => props => {
  return class extends React.Component {
    state = {
      error: null
    };

    static getDerivedStateFromError(error) {
      // Update state so the next render will show the fallback UI.
      return { error };
    }

    render() {
      if (this.state.error) {
        // Fallback ui.
        return (
          <details>
            <summary>Ouch! Things are messed up. We are sorry. 👾</summary>
            <pre style={{ color: `red` }}>{this.state.error.stack}</pre>
          </details>
        );
      }
      return <WrappedComponent {...this.props} />;
    }
  };
};

withErrorBoundaries can be used with any malformed component.

const SafeComponent = withErrorBoundaries(MalformedComponent);

▶ Higher Order Component Example

That's what precisely a higher order component is all about. It's a pattern which facilitates component logic reusability. You can think of a HOC as a function that takes a component and returns a new component. An in-depth explanation of HOCs is available here.

Dumb Components

Dumb components are also known as presentational or stateless components. They mostly contain HTML and styles. The purpose of dumb components is to render the DOM using props. Dumb Components don't load or mutate any data. Data required by dumb components are passed as input/props along with the actions. That's why dumb components don't have any state related to data. It makes them more reusable and manageable. Here is a very basic Greetings dumb component :

function Greetings(props) {
  return <h1>Hello {props.name}</h1>;
}

Smart/Container Components

Smart components are also known as Container Components. Smart Components know how to load and mutate data. Sometimes smart components mere act as a container and pass data to child components as props. Smart Components can also have state and logic to update the state. A simple Clock component with state and logic.

class Clock extends React.Component {
  state = { now: new Date() };

  intervalId = null;

  tick = () => this.setState({ now: new Date() });

  componentDidMount() {
    this.intervalId = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.intervalId);
  }

  render() {
    return <p>{this.state.now.toLocaleTimeString()}</p>;
  }
}

You can read more about Dumb Components and Smart components on Shade.codes.

CSRF in Action 🎭

Mon, 10 Jun 2019 10:09:19 GMT

Cross-Site Request Forgery(CSRF/XSRF) is one of the most popular ways of exploiting a server. It attacks the server by forcing the client to perform an unwanted action. This attack targets applications where the client/user is already logged in. It mainly changes the state of the server by making inadvertent updates or transfer of data. For example, updating vital information like emails contact numbers, etc. or transferring data from one entity to another.

This post demonstrates CSRF attack and elaborates concepts linger around it. It uses a simple todo app and an evil client--which updates the state of todos--for demonstration. Technologies used:

ReactJs for client.
ExpressJs and a couple of middlewares(CORS, body-parser, cookie-parser, etc) for server.
MongoDb as database and Mongoose for data modeling.
JWT for stateless session management.
and a few other stuff.

The sample todo app uses JSON Web Token for stateless session management and authentication. It stores the token in a cookie with httpOnly flag to make the token inaccessible to the JavaScript running on the client. Picture below depicts the auth flow of the app.

Let's take a gander at the code organization of the app. The codebase has three actors -- a server, a client, and an evil client.

The server exposes a few endpoints for CRUD operations on both user(/users) and todo(/todos). It uses mongoose to store data in MongoDB. It also supports cross-origin requests from a client running at localhost:3001(middleware cors is used to enable cross-origin resource sharing). The server runs at http://localhost:3000.

The client has a simple login form and a todo list. It uses ReactJs to build the UI and axios for ajax calls. When the client is loaded, it fetches todos(GET, /todos) of the logged in user. If there's an authentication error(status code is 401), it directs the user to login. Todos are successfully fetched only when the user is logged in.

The evil client runs at http://locahost:3002 with the help of the package http-server. It has a plain HTML page and a form. The form opens its action in a hidden iframe for silent submission. The app lures the user to click on a button which stimulates the form submission. Form submission makes a post call to http://localhost:3000/todos/complete which marks todos belonging to the logged in user as complete.

<!DOCTYPE html>
<html>
  <body>
    <h1>Hey There!</h1>
    <p
      >Having a rough day! Don't worry, I have got a picture of a cute cat to
      cheer you up. <button id="btn_cat">Show me 🐱</button>
    </p>
    <iframe style="display:none" name="csrf-frame"></iframe>
    <form
      method="POST"
      action="http://localhost:3000/todos/complete"
      target="csrf-frame"
      id="csrf-form"
    >
    </form>
    <script type="text/javascript">
      document.getElementById('btn_cat').addEventListener('click', () => {
        document.getElementById('csrf-form').submit();
      });
    </script>
  </body>
</html>

Evil client in action:

Let's address questions which create confusion.

Q: Why no authentication error? 🤔

The server does not throw any authentication error cause the request contains a valid JWT token. The request gets the token from cookies.

When receiving an HTTP request, a server can send a Set-Cookie header with the response. The cookie is usually stored by the browser, and then the cookie is sent with requests made to the same server inside a Cookie HTTP header. ~ Mozila

When the user logs in, the JWT is stored in an httpOnly cookie(see auth flow). Cookies are sent with every request to the same server. Because of that, the JWT becomes part of every request 🤖.

Q: Shouldn't the CORS setup help here?

Let's talk about CORS before jumping to the answer. Browsers limit the interaction of scripts or document loaded on one origin(a tuple of protocol, domain, and port) with another origin to avoid Jungle Raj. The mechanism used for imposing such limitations is known as Same Origin Policy. It ensures that applications are running in isolated environments. Sometimes, developers need to relax the same-origin policy so that applications can interact with each other. That's what originates the idea of Cross-Origin Resource Sharing(CORS). CORS allows site-a to interact with site-b only if site-b agrees--by responding with appropriate HTTP headers. To enable CORS, the server needs a tad of work(the sample todo app uses cors middleware for the same).

In the browser world, ajax requests are classified into three categories:

Simple Request
Non-simple request
Preflight request ✈️.

More details on these can be found here.

Whenever a cross-origin resource is requested using a non-simple request, the browser makes a pre-flight OPTIONS request. The server responds to the pre-flight request with appropriate response headers. If the origin and the request method are present in Access-Control-Allow-Origin and Access-Control-Allow-Methods, the browser originates the main request. Otherwise, a cors error is thrown with a pertinent message.

Network logs of the todo app with preflight requests.

For simple requests, the browser doesn't intiate any preflgiht request. The malicious client leverages this fact to bypass the Same Origin Policy with the help of an HTML form. That's why CORS set up doesn't help here 🤯.

Q: What if WebStorage is used to store JWT instead of httpOnly cookie?

Storing JWT in the Web Storage will make the app less vulnerable for CSRF attacks. But it spikes the chances of the token being compromised. That's because any JavaScript running on the client has access to the web storage. It's DANGEROUS 🛑.

Q: How to prevent CSRF?

The challenge for the server is to validate both the token and the source of the request i.e. origin. The token validation is already implemented. The server needs to verify the source of the request for CSRF protection. The source can either be verified with the help of CORS Origin Header or an XSRF Token. Shielding server with XSRF token(CSRF token) is more reliable and popular than CORS Origin Header.

The implementation of the XSRF token is straight forward. When the client represents valid credentials, the server generates a random unguessable unique string named as xsrfToken. It puts the xsrfToken in JWT along with other claims. The server also adds an xsrfToken in a cookie(why cookie? cause cookies are limited by same-origin policy). Here's a sample JWT payload with xsrfToken:

{
  "sub": "hk",
  "xsrfToken": "cjwt3tcmt00056tnvcfvnh4n1",
  "iat": 1560336079
}

The client reads the token from cookies and adds the token to request headers as X-XSRF-TOKEN before making requests. When the server receives a request, it reads xsrfToken from JWT payload and compares with the X-XSRF-TOKEN header. If both are same then the request is further processed otherwise it is terminated with status code 401. This technique is also known as Double Submit Cookies method.

The auth flow with XSRF token:

Code version of the same with express-jwt:

const expressJwt = require('express-jwt');

// Paths without token.
const publicRoutes = ['/users/register', '/users/authenticate'];

const isRevoked = async (req, payload, done) => {
  const { xsrfToken } = payload;
  done(null, xsrfToken !== req.get('X-XSRF-TOKEN'));
};

module.exports = () =>
  expressJwt({
    secret: process.env.JWT_SECRET,

    getToken: req =>
      req.get('X-XSRF-TOKEN') && req.cookies.jwtToken
        ? req.cookies.jwtToken
        : null,
    isRevoked
  }).unless({
    path: publicRoutes
  });

Client side request interceptor with axios:

import axios from 'axios';

const getCookies = () =>
  document.cookie.split(';').reduce((cookies, item) => {
    const [name, value] = item.split('=');
    cookies[name] = value;
    return cookies;
  }, {});

const baseURL = 'http://localhost:3000';

const ajax = axios.create({
  baseURL,
  timeout: 5000,
  withCredentials: true
});

// Add a request interceptor
ajax.interceptors.request.use(function(config) {
  const xsrfToken = getCookies()['xsrfToken'];
  // CSRF Token.
  if (xsrfToken) config.headers['X-XSRF-TOKEN'] = xsrfToken;
  return config;
});

export default ajax;

Note: Real-world applications require a more elegant mechanism for handling CSRF tokens. You may want to use the middleware csurf.

The evil client after CSRF token:

The final code of the sample app is uploaded here. Thanks for reading 🙏🏻.

NodeJs with(out) Express ~ Part 1

Mon, 27 May 2019 08:24:05 GMT

Learning a new tech stack is always challenging. It requires patience and a right set of materials. Material which not only scratches the surface but also helps people with relevant references to level up their skills. A few weeks ago, I started exploring NodeJs to learn server-side programming. I wanted to understand the underlying mechanics of basic stuff like authentication, session management, HTTP transactions, etc. So I googled keywords like "How to implement authentication in NodeJs", "Session Management in NodeJs", "Handle post request in NodeJs", etc. A large number of articles/links appeared respective to each of these. They all were using one framework or another. Most of them were using Express. I was looking for stuff with plain NodeJs. So I asked people if there's any source available which implements such stuff without any framework. I didn't get any response. So I decided to peel the layers of abstraction by myself and write one. This series of articles is all about how one can implement things without using any framework. It will parallelly demonstrate certain implementations in ExpressJs. Let's get started with a basic HTTP server and a few HTTP transactions.

HTTP Server

NodeJs has a native http module to create an HTTP server. It also provides modules for other protocols like UDP(dgram). For brevity, throughout this series we'll stick to HTTP. Here's a simple HTTP node server.

// Importing http module to create a server.
const http = require('http');

// Host for our server.
const HOST = 'localhost';

// Port at which our server will run/listen.
const PORT = 3000;

// Creating a server with handler.
const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello Stranger!!');
});

// Setup server at PORT.
server.listen(PORT, HOST, () => {
  console.log(`Server is running at http://${HOST}:${PORT}`);
});

To create a server, we have used the http.createServer api with a request handler. After creating a server instance, we set it up to port 3000 with hostname localhost. All the request made to localhost:3000 will be handled by our server. The job of request handler is to receive and process the incoming requests and respond with appropriate data or message(s). In the snippet above, the request handler sets the status code to 200 and sends Hello Stranger!! greeting as plain text.

Express version of the above snippet:

// Importing express module.
const express = require('express');

// Port at which our server will listen.
const PORT = 3001;

// Creating an express app.
const app = express();

// Setting up request handler also known as middleware
app.use((req, res) => {
  res.statusCode = 200;
  res.setHeader('Conent-Type', 'text/plain');
  res.send('Hello Stranger!!');
});

// Setup server at PORT.
app.listen(PORT, () => {
  console.log(`Server is running at ${PORT}`);
});

Express version more or less looks same as the native version. But a lot is happening under the hood. We'll keep peeking as we move forward. At this point, express has abstracted the server creation for us.

Snapshot of the source code of app.listen taken from the repo:

app.listen = function listen() {
  var server = http.createServer(this);
  return server.listen.apply(server, arguments);
};

It has also introduces a new way of registering handlers/middlewares using app.use. Middleware is basically a function which gets invoked with request, response and next arguments in request-response cycle. You can read more on middlewares here.

Here's the link for the repo, if you want to play with the code.

HTTP Transaction

Any call made by a client to a server with HTTP protocol is considered as HTTP transaction. HTTP has various transaction types--widely known as HTTP Methods.

When a server receives a request, it calls the request handler with request and response parameters.

request is an instance of IncomingMessage which is a ReadableStream. It has all the neccessary inforamtion like method, url, path, parameter, etc.
response is an instance of ServerResponse which is a WritableStream. It helps us to send data back to the client.

Let's quickly introduce a /greet endpoint which will take a query param name and return a greeting. eg. hitting /greet?name=Sheldon will return Hello Sheldon!!.

//... other require statements.
const url = require('url');

// ...necessary variable decalrations
// ............

// Request handler for /greet end point.
const handleGreetRequest = (req, res) => {
  const { method, url: reqUrl } = req;
  const urlParts = url.parse(reqUrl, true);
  if (method === 'GET') {
    const { query: queryParams } = urlParts;
    res.end(`Hello ${queryParams.name || 'Stranger'}!`);
  } else {
    res.statusCode = 404;
    res.end('Not found.');
  }
};

// Generic request handler.
const onRequest = (req, res) => {
  if (req.url.startsWith('/greet')) {
    handleGreetRequest(req, res);
  } else {
    res.statusCode = 404;
    res.end('Not found.');
  }
};

// Creating a server with handler.
const server = http.createServer(onRequest);

// ... server setup code
// ...............

We have defined the request handler as onRequest function. It invokes the respective request handler depending on the URL. If the URL doesn't match to any handler then 404 is sent to the client. onRequest function hands over requests made with /greet endpoint to handleGreetRequest function. handleGreetRequest parses the url--using url module--to get query params, creates a greeting with the value of name param in query and sends it to the client. The full code for the above snippet can be found here.

Let's introduce another endpoint called /echo. It will be POST call which will send the request body as is back to the client .

// .... require statements and some other declaration statements
// ........

const handleEchoRequest = (req, res) => {
  if (req.method === 'POST') {
    let body = [];
    req
      .on('data', chunk => {
        body.push(chunk);
      })
      .on('end', () => {
        body = Buffer.concat(body);
        res.end(body);
      });
  } else {
    res.statusCode = 404;
    res.end('Not found.');
  }
};

const onRequest = (req, res) => {
  if (req.url.startsWith('/echo')) {
    handleEchoRequest(req, res);
  } else {
    res.statusCode = 404;
    res.end('Not found.');
  }
};

// Creating a server with handler.
const server = http.createServer(onRequest);

// ... server setup code
// ...............

As we know that data are transferred as packages or chunks over the network, so we must set up an accumulator which collects the data as soon as they arrive. That's why we have set up a data event listener which pushes chunks to body array. We've also added an end event listener which gets triggered when all chunks are received. Here we collate chunks and send back to the client.

If you look at the above snippets you might realize that we are doing so many other things instead of focusing on the core logic of endpoints. Also, the retrieval of data from the request is a tad tedious. That's why ExpressJs and many other frameworks/modules have got a lot of traction because they remove the clutter and let developers focus on core business logics.

Let's write both /greet and /echo endpoint using Express.

const express = require('express');
const bodyParser = require('body-parser');

const PORT = 3001;

const app = express();

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.get('/greet', (req, res) => {
  const {
    query: { name }
  } = req;
  res.send(`Hello ${name || 'Stranger'}!`);
});

app.post('/echo', (req, res) => {
  res.send(req.body);
});

// Setup server at PORT.
app.listen(PORT, () => {
  console.log(`Server is running at ${PORT}`);
});

Express version looks much cleaner because has abstracted the nitty gritty of HTTP transactions and exposed apis relevant to HTTP methods. We have also used a body-parser module which acts as a middleware to accumulates data from the request and make them available as request.body to subsequent middlewares.

Conclusion

Creating applications with plain NodeJs requires a little extra effort cause we directly deal with native apis. Sometimes, it can be a bit overwhelming and tedious. Frameworks like ExpressJs remove these pain points and help us write applications in a more elegant way with seamless development experience. But it is also important to be familiar with things lying under the hood. So that frameworks can be leveraged!

React starter kit for Chrome Extensions with Live Reloading 🤓

Tue, 07 May 2019 15:54:15 GMT

Software is eating the world. And JavaScript is eating software. Chrome extensions are not an exception here. They are also built using JavaScript. A few days ago, I got an opportunity to work on a small side project which needed a chrome extension. Since I am new to ReactJs and want to tame it, so I decided to build the desired extension with it. Before I narrate the whole story, let's take a gander on how one develops a chrome extension.

Chrome extension overview

Every chrome extension starts with a manifest.json file which provides an overview of the permissions, background scripts, content scripts, popups and many other things used by the extension. Here's a sample manifest file.

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "permissions": ["storage"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "page_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    }
  },
  "manifest_version": 2
}

Folder/bundle containing a manifest file, scripts, and other assets, is loaded into chrome from chrome://extensions/ page. Chrome reads the manifest file and installs the extension. If any change is made in script or any other file, we reload the extension to install the latest change.

Here's a link to the official documentation which elborates chrome extensions and their installations.

After getting familiar with the basics of extension development, I put on my developer hat 🤠 and started building an extension with create-react-app. Here are the steps I followed:

Created a react app by runnning

create-react-app hello-extensions

Replaced manifest.json file with below content.

{
  "name": "Hello Extension",
  "description": "My first chrome extension",
  "version": "1.0",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "index.html"
  },
  "content_security_policy": "script-src 'self' 'sha256-5As4+...'; object-src 'self'"
}

Build the app using

npm run build

Loaded the build in chrome.

...and it worked. Yay!!

My "Hello World" moment with extension made me happy but my happiness didn't last for long when I decided to change the background color. I found out that I have to build and reload the extension again 😩.

Build changes 🤖

Running an app(created by create-react-app) in development mode with npm run start doesn't write files to the disk. I needed files to be present on the disk so that they can be loaded in chrome. As we know, the create-react-app utility uses webpack under the hood with a predefined configuration. And to customize that predefined config we must eject it first. So I ejected the config with the command npm run eject. It generated some config files and scripts.

After ejecting the configuration, I needed to find a way to write files to disk in development mode. I ran to the webpack dev server api document for help and found an option writeToDisk. As its name suggests, setting writeToDisk true will write files to disk. So I set it true in the dev server config. It helped but it took a toll on the dev server. Dev server became sluggish. Its sluggishness convinced me to look for a better alternative.

I thought for a while and realized that I didn't need a dev server. I needed a "watch server" 😅. A server to watch files and copy them--with the latest changes--to build directory on the change event. I leveraged webpack.watch api and ended up with the watch script below.

// some neccessary setup code
...
...
...

// Webpack watch
webpack(config).watch({}, (err, stats) => {
  if (err) {
    console.error(err);
  } else {
    copyPublicFolder();
  }
  console.error(
    stats.toString({
      chunks: false,
      colors: true
    })
  );
});

function copyPublicFolder() {
  fs.copySync(paths.appPublic, paths.appBuild, {
    dereference: true,
    filter: file => file !== paths.appHtml
  });
}

Reload changes 🔄

After dealing with the build barrier, the next challenge was to automatically reload the extension. I found a supercool webpack plugin webpack-chrome-extension-reloader which reloads chrome extensions out of the box. A million thanks to Rubens for writing it. A sneak peek of config with the plugin.

// Other configuration
...
...
...
...

  plugins: [
    // Other plugins
    ...
    ...
    ...
    // Chrome extension hot reloading.
      isEnvDevelopment &&
        new ChromeExtensionReloader({
          reloadPage: true // Force the reload of the page also
          entries: {
            // The entries used for the content/background scripts
            contentScript: 'content-script',
            background: 'app' // *REQUIRED
          }
        })
  ].filter(Boolean),

Illustration of the starter kit with live reloading.

Here's the link to complete package/starter kit. I hope it will be helpful. If you have any idea/suggestion to make it better, please do share. Thanks 🙏🏻. Happy Coding!

JS one-liners 😻

Fri, 01 Mar 2019 18:30:00 GMT

I am a huge fan of Arrow functions. They have changed the way we write code. They have cured the cloudy behaviour of this. They let us define functions without function keyword 😅. This article collates one-liners — written using arrow functions — with their explanations.

Remove Duplicates from Array

Interviewer often asks candidates to write a function which removes duplicates from an array. This can be done in many ways. We’ll discuss only those which are relevant to this post.

const removeDuplicates = arr =>
  arr.filter((item, index) => index === arr.indexOf(item));

As you can see we are using filter and indexOf methods of the Array class. We get the index of the item using indexOf method and compare it with the current index. If both are equal then the item is unique else its repeated.

To remove duplicates we can also use Set data structures. We create a set from the array and then convert set back to the array using spread operator or Array.from method.

// Using spread operator.
const removeDuplicates1 = array => [...new Set(array)];
// Using Array.from method
const removeDuplicates2 = array => Array.from(new Set(array));

Flatten Array

Flattening an array means converting a multi-dimension array to one-dimensional array. eg.

// 2-dimensional array.
[[1, 2, 3], [4, 5, 6]]
// After flattening
[1, 2, 3, 4, 5, 6]
// Multi-dimentional array
[1, [2, [3, 4, [5], 6], 7], 8], 9]
// After flattening
[1, 2, 3, 4, 5, 6, 7, 8, 9]

We can use Array.concat method with spread operator to flatten an array.

// Flattens an array(doesn't flatten deeply).
const flatten = array => [].concat(...array);

This approach flattens an array at only one level. Below function fully flattens an array.

const flattenDeep = arr =>
  arr.reduce(
    (fArr, item) => fArr.concat(Array.isArray(item) ? flatten(item) : item),
    []
  );

Merge Arrays

To merge arrays we can use Array.concat method with spread operator.

// Merge arrays
const merge = (...arrays) => [].concat(...arrays);

Pipe (Function Composition)

We often need to “pipe” the output of one function as an input to another function. Here’s a simple implementation of the pipe function using Function Composition.

// Pipe fn
const pipe = (...fns) => arg => fns.reduce((v, fn) => fn(v), arg);

// Example
const addTwo = x => x + 2;
const double = x => x * 2;
const square = x => x * x;
const fn = pipe(addTwo, double, square);
console.log(fn(1)); // square(double(addTwo(1))) -> 36

Compose(Pipe reverse)

Just like the pipe function, compose also supplies the output of one function as an input to another but it does it in reverse order.

const compose = (...fns) => fns.reduce((a, b) => (...args) => a(b(...args)));

// Example
const addTwo = x => x + 2;
const double = x => x * 2;
const square = x => x * x;
const fn = compose(addTwo, double, square);
console.log(fn(1)); // -> 4 addTwo(double(square(1)))

Range Function

You might have used range function of Lodash. Here’s a one-liner implementation of range using Array.from method. It generate range from start to end (exclusive). It also takes an optional step parameter.

// Generates range [start, end) with step
const range = (start, end, step = 1) =>
  Array.from(
    { length: Math.ceil((end - start) / step) },
    (_, i) => start + i * step
  );

Color Function

Generates a random hex color code.

// Generates random hex color code.
const color = () =>
  '#' +
  Math.floor(Math.random() * 0xffffff)
    .toString(16)
    .padEnd(6, '0');

Conclusion

Before we conclude there’s one thing that should be kept it mind while writing one-liners. One-liners do more things with less code, which tempts people to write more one-liners. But sometimes, writing less code makes it less readable and hard to debug. So if you are writing code which you feel should or can be broken into multiple lines. Just go ahead and do it. You’ll thank yourself later 🙂.

One liners are great but one should always make sure that they don’t take a toll on the legibility of code.

Here’s the gist of all the one-liners used in this post. If there’s any one-liner which should be added to the list, please feel free to share. I’ll add it. Thanks for Reading 🙏🏻.

Data Structures with Iterable Protocol

Sat, 26 Jan 2019 18:30:00 GMT

Iterators and Generators have been around for a while. They have changed the way we loop through the values of an object. Earlier, we used to use the for-in loop to iterate over the values, but there was no guarantee of the order in which values will be iterated. Also, it was quite cumbersome cause we had to use keys from the for-in loop to get values. Generator and Iterators remove the pain of iterating objects. For an object to be iterable, it just needs to comply with iteration protocols. This post provides a quick overview of Generators and Iterators/Iterables and explains how common data structures can be made iterable.

Iteration Protocols

The advent of ES5 brought two iteration protocols to JavaScript: Iterable Protocol and Iterator Protocol.

Iterable Protocol

For an object to be iterable, it must have an iterator method. An iterator method is defined using @@iterator key i.e. the Symbol.iterator constant. Iterator method can be any javascript function which takes zero arguments and returns an object conforming Iterator Protocol(will be discussing soon). Here’s the sample code, if you are lost in jargon.

class IteratorDemo {
  // Iterator Method with @@iterator key
  // i.e. Symbol.iterator constant
  [Symbol.iterator]() {
    // Method stub which returns an iterator object.
  }
}

Iterator Protocol

The iterator protocol defines a standard way to produce a sequence of values (either finite or infinite), and potentially a return value when all values have been generated. ~MDN

For an object to be an iterator object, it needs to implement a next method which fulfils below criteria:

It should take zero arguments. Although, you may pass arguments to next and there won’t be any error but you shouldn’t cause when your iterable object will be used with spread operator or for-of loop you won’t be able to pass any arguments.
It should return an object with at least one of the two properties.
- value: Any javascript value which we want to return from our iterator.
- done: A boolean flag to indicate whether we reached the end of the sequence or not.

Here’s a quick range iterator example borrowed from MDN.

class RangeIterator {
  constructor({ start = 0, end = 1000, step = 1 }) {
    this.start = start;
    this.end = end;
    this.step = step;
  }

  [Symbol.iterator]() {
    let start = this.start;
    const iterable = {
      // Next fn complying with Iterator protocol.
      next: () => {
        if (start <= this.end) {
          const result = {
            value: start,
            done: false
          };
          start += this.step;
          return result;
        }

        return {
          done: true
        };
      }
    };
    return iterable;
  }
}

const range = new RangeIterator({
  start: 0,
  end: 20,
  step: 5
});
console.log(...range); // 0 5 10 15 20

Generators

Sometimes explicitly maintaining the internal state of iterators and returning an iterable object is too much of work. Generators reduce that amount of work and provide an alternate approach to make an object iterable with the help of yield keyword. Generators functions have special syntax. They are written as function *. You can read more on generators here.

Here’s our previous example re-written with the help of generators.

class RangeGenerator {
  constructor({ start = 0, end = 1000, step = 1 }) {
    this.start = start;
    this.end = end;
    this.step = step;
  }

  *[Symbol.iterator]() {
    let start = this.start;
    while (start <= this.end) {
      yield start;
      start += this.step;
    }
  }
}

const range = new RangeGenerator({
  start: 0,
  end: 20,
  step: 5
});
console.log(...range); // 0 5 10 15 20

Alright, enough about Iterators and Generators. Let’s use them with common data structures like LinkedList, Stack, BinaryTree.

LinkedList

LinkedList is a linear data structures where each node/element holds the data and pointer to the next node. The start and end of the list are called head and tail. Here’s an implementation of Linked List.

class Node {
  constructor(value) {
    this.value = value;
    this.next = null;
  }
}

class LinkedList {
  constructor() {
    this.head = null;
    this.tail = null;
  }

  get isEmpty() {
    return this.head === null;
  }

  add(value) {
    const node = new Node(value);
    if (this.head === null) {
      this.head = this.tail = node;
      return this;
    }
    this.tail.next = node;
    this.tail = node;
    return this;
  }

  addHead(value) {
    const node = new Node(value);
    node.next = this.head;
    this.head = node;
  }

  removeHead() {
    if (this.isEmpty) {
      return null;
    }
    const head = this.head;
    this.head = this.head.next;
    return head.value;
  }

  removeTail() {
    if (this.isEmpty) {
      return null;
    }

    const { value } = this.tail;
    if (this.head === this.tail) {
      // List with single node.
      this.tail = this.head = null;
      return value;
    }

    let prev = null;
    let current = this.head;
    while (current.next !== null) {
      prev = current;
      current = current.next;
    }

    // Adjust tail pointer.
    prev.next = null;
    this.tail = prev;

    return value;
  }

  remove(x) {
    let prev = null;
    let current = this.head;
    while (current !== null) {
      const { value, next } = current;
      if (value !== x) {
        prev = current;
        current = next;
        continue;
      }
      // If value is at head.
      if (prev === null) {
        this.head = next;
      } else {
        prev.next = next;
      }
      return x;
    }
    return null;
  }
}

const list = [2, 1, 3, 4, 5].reduce(
  (list, value) => list.add(value),
  new LinkedList()
);

We need to add an iterator to make the linked list iterable. Our iterator function will have an internal state variable called current (which initially refers to head) representing the current node we are at. Every next call, will return the data of the current node and move the current node to the next node. Once the next method is done traversing all nodes, it returns done as true to stop the iteration.

 /**
   * Iterator function.
   *
   * @returns
   * @memberof LinkedList
   */
  [Symbol.iterator]() {
    let current = this.head;
    const iterable = {
      next: () => {
        if (current === null) {
          return {
            done: true
          };
        }
        const {
          value,
          next
        } = current;
        current = next;
        return {
          value,
          done: false
        };
      }
    };
    return iterable;
  }

Generator version of the above.

 // Generator function.
  *[Symbol.iterator]() {
    let current = this.head;
    while (current !== null) {
      const { value } = current;
      current = current.next;
      yield value;
    }
  }

You can find the full code here.

Stack

A Stack is a linear data structure which follows Last In First Out(LIFO) pattern which means items inserted into the stack last will come off first. To keep things DRY, we’ll use our earlier Linked List data structure to implement Stack. We’ll also leverage its iterator method to make our stack iterable.

class Stack {
  constructor() {
    this.list = new LinkedList();
  }

  get isEmpty() {
    return this.list.isEmpty;
  }

  /**
   * Iterator function.
   *
   * @returns
   * @memberof Stack
   */
  [Symbol.iterator]() {
    return this.list[Symbol.iterator]();
  }

  push(value) {
    this.list.addHead(value);
    return this;
  }

  pop() {
    if (this.isEmpty) {
      throw new Error('STACK_UNDERFLOW');
    }
    return this.list.removeHead();
  }
}

const stack = [1, 2, 3, 4, 5, 6].reduce(
  (stack, value) => stack.push(value),
  new Stack()
);
console.log(...stack); // 6 5 4 3 2 1

Binary Tree

Binary Tree is a subclass of Tree data structure. In Binary Tree, each node can have maximum 2 children called left and right. You can read more about Binary Trees in my post A Bit About Binary Tree. Since trees are non-linear data structure so they can be traversed in many ways. We’ll implement their Level Order or Breadth First Order traversal in our iterator method. Here’s the class which represents BinaryTreeNode for our BinaryTree.

export class BinaryTreeNode {
  constructor(value) {
    this.value = value;
    this.left = null;
    this.right = null;
  }

  /**
   * Inserts node in level order.
   *
   * @param {*} x
   * @returns
   * @memberof BinaryTreeNode
   */
  add(x) {
    const queue = [this];
    const newNode = new BinaryTreeNode(x);

    while (true) {
      const node = queue.shift();
      if (node.left === null) {
        node.left = newNode;
        return this;
      }

      if (node.right === null) {
        node.right = newNode;
        return this;
      }
      queue.push(node.left);
      queue.push(node.right);
    }
    return this;
  }
}

And finally, BinaryTree with iterator method.

import { BinaryTreeNode } from './BinaryTreeNode';
export class BinaryTree {
  constructor() {
    this.root = null;
  }

  get isEmpty() {
    return this.root === null;
  }

  add(x) {
    if (this.isEmpty) {
      this.root = new BinaryTreeNode(x);
    } else {
      this.root.add(x);
    }
    return this;
  }

  /**
   * Iterator. Traverses in level order.
   *
   * @memberof BinaryTree
   */
  *[Symbol.iterator]() {
    const queue = this.isEmpty ? [] : [this.root];
    while (queue.length) {
      const { value, left, right } = queue.shift();
      if (left !== null) {
        queue.push(left);
      }

      if (right !== null) {
        queue.push(right);
      }
      yield value;
    }
  }
}

Well, that’s all about Data Structures with Iterable Protocol. I have created a git-repository of examples used in this post. I hope you find them useful. Thanks for reading 🙏🏻.

Level up your Regex Game 🚀

Sat, 13 Oct 2018 18:30:00 GMT

Regular expressions are one of the most powerful tools which programmers can have in their arsenal. But learning them is one of hell of a painful thing. This week I mustered up some courage and decided to go through that pain. I am still learning about them. In this post, I’ll share what I have learned so far. So let’s get started.

Definition

Regular expressions are patterns used to match character combinations in strings. ~ MDN

When ugly cryptic symbols meet gorgeous characters, they produce patterns which can be used by a regex engine(a tool which understands those patterns) to match strings/characters in a text. These patterns are called “Regular Expressions”. Let’s have an example.

Suppose you want to check the presence of ‘Sheldon’ in text ‘Bazinga! I am Sheldon Cooper’. You might say, you’ll use the String.indexOf API. But we are not learning about string APIs here. We are learning regex so we’ll do it the regex way.

In JavaScript, a regular expression can be created using one of the following two ways

Using regex literals(with the help of a pair of forward slashes /).
And the RegExp constructor.

We’ll use literal way throughout this post. You can read about the constructor way on MDN if you wish to.

Alright! Let’s create a regex to find ‘Sheldon’ in a text. As we saw earlier we use / to create regex. So whatever we write between a pair of / becomes a pattern for matching. eg /Sheldon/ creates a regex which matches ‘Sheldon’ in a text. Congratulations! We just made our first regex.

Hold on Hitesh! You haven’t explained how I am gonna use it. I can hear you.

Well, what if I tell you that regex our also JavaScript objects which have some useful methods to make our life simpler. One such method is RegExp.test which is used to test pattern with respect to a text. It returns true if the pattern matches otherwise false.

const regex = /Sheldon/; // matches 'Sheldon' in text.
regex.test('Bazinga! I am Sheldon Cooper'); // Returns true.
regex.test('Penny! Penny! Penny!'); // Return false.

Understanding and debugging a regex — especially when you are getting started — is difficult, let’s be honest. There are some helpful tools like Regex Visualiser, Regex101 and the almighty console.dir which can help you throughout journey. Ok! Enough ado!! Let’s take a plunge.

Mostly, we create regular expressions by juggling with simple characters(mainly alphanumeric) and special characters/symbols. Simple characters don’t hold any specific meaning but special characters do for sure. That is why they are defined in various categories/classes. We’ll take a gander at each category with the help of some examples.

Character Classes

This class holds .,\d, \D, \w, \W, \s and many more characters which are beyond the scope of the article. Here’s the full list.

Dot(.) Character Class

Dot character has candid nature. It gels well with every single character(except line terminators) which comes on its way while matching the text.

const regex = /./;
// Statements below return true.
regex.test('!'); // matches '!'
regex.test('Voila!'); // macthes 'V'
regex.test('$'); // matches '$'
regex.test(' '); // macthes ' ' (space)
regex.test("'"); // matches '(single quote)
/.Script/.test('JScript JavaScript'); // macthes 'JScript'
/.Script/.test('@Script $Script'); // macthes '@Script'
// Statements below return false
regex.test(''); // no character present.
regex.test('\n'); // line terminator.

Note: Dot loses its special meaning when it appears in a character set and matches the literal dot. Please refer to Character Sets section for more details.

Digit Character Class(\d and \D)

As the name suggests, digit character class is used for matching numbers. \d matches digits(numbers) while \D matches non-digit characters.

const regex = /\d/;
regex.test('1'); // true matches '1'
regex.test('23'); // true matches '2'
regex.test('1e10'); // true matches '1'
regex.test('e'); // false
/\D/.test('1'); // false
/\D/.test('A'); // true matches 'A'
/\D/.test('A2'); // true matches 'A'

Word Character Class(\w and \W)

\w matches any alphanumeric character including underscore (_). \W is the negation of \w i.e. it matches all the non-alphanumeric characters excluding the underscore.

const regex = /\w/;
regex.test('1'); // true matches '1'
regex.test('23 is my roll number.'); // true matches '2'
regex.test('1e10'); // true matches '1'
regex.test('e'); // true
regex.test(' '); // false
regex.test(' _jedi '); // true matches '_'
regex.test('!@#$%^&*()'); // false
/\W/.test('1'); // false
/\W/.test('23 is my roll number.'); // true matches ' '(first space)
/\W/.test('1e10'); // false
/\W/.test('e'); // false
/\W/.test(' '); // true
/\W/.test('_jedi '); // false
/\W/.test('!@#$%^&*()'); // true matchs '!'

Space Character Class(\s and \S)

Space character(\s) matches a white space character in a text. White space in text can be any space, tab, new line or any other character which can create white space in text(eg. unicode space characters). Any non-white space character can be matched by \S.

const regex = /\s/;
regex.test('1 '); // true matches ' '
regex.test('1\t'); // true matches tab  " "
regex.test('\n'); // true matches "↵"
regex.test(' '); // true
regex.test('Name'); // false
/\S/.test(' '); // false
/\S/.test(' 1'); // true matches "1"
/\S/.test('\t'); // false
/\S/.test('\n'); // false

Character Sets([]) and Alternation

Character Sets are pretty useful especially when we want to match text against a set of characters. We create a character set by enclosing characters in brackets []. Character Set matches any of the character enclosed within brackets. eg. pattern [abc] is a character set which matches a, b, and c in a text.

const regex = /[abc]/;
regex.test('a'); // true
regex.test('b'); // true
regex.test('c'); // true
regex.test('abc'); // true
regex.test('This is plain text'); // true matches "a"

We can also define a range in character sets using a hyphen(-) eg. pattern [0–4] will match any digit between 0 to 4 in a text. Hyphen loses its special meaning when it’s on the boundary(appears as the first or the last character in the character set), and treated as literal hyphen character. eg. [04-] will macth 0, 4 and -.

/[0-4]/.test('0'); // true
/[0-4]/.test('4'); // true
/[0-4]/.test('2'); // true
/[0-4]/.test('54'); // true matches "4"
/[0-4]/.test('a4'); // true matches "4"
/[0-4]/.test('5'); // false
/[0-4]/.test('a'); // false
// Below is equivalent to \w.
/[A-Za-z0-9_]/.test('_jumbo');
// Hyphen loses special meaning when on boundary
/[04-]/.test('0'); // true
/[04-]/.test('4'); // true
/[04-]/.test('2'); // false
/[04-]/.test('-'); // true macthes "-"
/[04-]/.test('non-digit'); // true matches "-"
/[0-4-7]/.test('non-digit'); // true matches "-"
/[0-4-7]/.test('0'); // true
/[0-4-7]/.test('4'); // true
/[0-4-7]/.test('2'); // true
/[0-4-7]/.test('5'); // false
/[0-4-7]/.test('7'); // true
/[0-4-7]/.test('-'); // true macthes "-"
// Dot(.) and asterisk(*) also lose their power with charset.
/[.*]/.test('*'); // true
/[.*]/.test('.'); // true
/[.*]/.test('.*'); // matches "."
/[.*]/.test('abc'); // false

Character set also allows negation using ^ which means we can match any character except the one present in charset. The only stipulation is it has to be the first character of the charset. If it’s not the first character then it will have its literal meaning.

const regex = [^0-4]; // any character except range 0 to 4.
regex.test('0'); // false
regex.test('4'); // false
regex.test('2'); // false
regex.test('5'); // true
regex.test('a'); // true
// When ^ is not first character
/[a^c]/.test('a'); // true
/[a^c]/.test('c'); // true
/[a^c]/.test('^'); // true
/[a^c]/.test('abc'); // matches "a"

Alternation is achieved with the help of OR (|) operator. The behavior is akin to the logical OR operator. eg. /green|red/ will match either green or red in a text.

Boundaries

Just like string APIs (String.startsWith, String.endsWith, etc), regular expressions also provide ways to test if a string starts or ends with certain characters. It advances the game further with the help of word boundary(\b) which will be discussing soon.

Beginning (^)

It matches the beginning of the text.

const regex = /^T/;
regex.test('The Coldplay'); // true matches "T" of "The"
regex.test('the Coldplay'); // false
regex.test('the Mike Tyson'); // false

Beginning character has different meaning when it appears in a charset. Please refer the charset section.

Ending ($)

It matches end of the text.

const regex = /End$/;
regex.test('The End'); // true matches "End"
regex.test('The end'); // false
regex.test('The End.'); // false

Word Boundaries(\b)

A word boundary is a position where a word starts or ends. It is basically an empty string before or after the word which acts as a boundary. Let’s use String.replace method to grok it.

// Below regex matches all word boundaries in text.
// "g" is global flag which will discuss in flags section.
const regex = /\b/g;
const str1 = 'Regular Expressions'.replace(regex, '~');
const str2 = 'Regular_Expressions'.replace(regex, '~');
const str3 = 'Regular-Expressions'.replace(regex, '~');
console.log(str1); // ~Regular~ ~Expressions~
console.log(str2); // ~Regular_Expressions~
console.log(str3); // ~Regular~-~Expressions~

In regular expressions, a word can only have characters of word character \w class which means that ‘Regular_Expressions’ will be treated as a single word while ‘Regular-Expressions’ will have two words. You can read more about word boundaries here.

Regex also has non-word boundaries \B which is opposite of \b.

Quantifiers

Quantifiers are used for matching occurrence eg. matching wow in a text where wow can be present with multiple ‘o’(wow, woow, woooow or woooooooo).

* matches zero or more occurrence of the preceding character.

const regex = /wo*/;
regex.test('wooohooo'); // true matches "wooo"
regex.test('wink'); // true matches "w";
regex.test('blink');; /false

+ matches 1 or more occurrence of the preceding character.

const regex = /wo+w/;
regex.test('wow'); // true
regex.test('woooow'); // true
regex.test('www'); // false

? matches 0 or 1 time.

const regex = /wo?w/;
regex.test('wow'); // true
regex.test('woooow'); // false
regex.test('www'); // true matches "ww"

{n,m} matches n to m times where n ≥ 0 and m > 0. Also m is optional means {n} match exact n occurrence and {n,} matches n or more occurrence.

/wo{1}w/.test('wow'); // true
/wo{1}w/.test('ww'); // false
/wo{1}w/.test('wo0w'); // false
/wo{1,}w/.test('wow'); // true
/wo{1,}w/.test('woooow'); // true
/wo{1,3}w/.test('ww'); // false
/wo{1,3}w/.test('wow'); // true
/wo{1,3}w/.test('woow'); // true
/wo{1,3}w/.test('wooow'); // true
/wo{1,3}w/.test('woooow'); // false

Flags

Flags are mainly used to provide additional information to the regex engine.Flags are mainly used to provide additional information to the regex engine. We place flags at the end of the regex — after the last forward slash.

g global match; we have seen that by default a regex returns the first match but, with the help of global match flag, we can also get all the matches. Regex engine leverages lastIndex property of a regex for global matching. Global match examples with String.match.

// only first match
const regexWithout = /foo/;
'foo foosball football'.match(regexWithout); // ["foo"]
// matches all "foo"s
const regexWith = /foo/g;
'foo foosball football'.match(regexWith); // ["foo", "foo", "foo"]

i ignore cases;

const regex = /Regex/i;
// All returns true
regex.test('regex');
regex.test('REGEX');
regex.test('rEgEx');

m multiline; when it is passed the beginning (^) and end ($) characters work with lines instead of the whole input.

const text = `
Roses are red
violets are blue
Regex are awesome
so do you`;
/blue$/m.test(text); // true matches the second line end.
/blue$/.test(false);

There are two more flags; sticky y and unicode u which got introduced in ES6. You can read about them here.

Grouping and Back References

Consider a scenario where we want to check whether a sentence starts and ends with the same word. To achieve it, regex needs some ways to remember the matches. Grouping and back references are used for such scenarios. We use parenthesis () for grouping. Regex remembers whatever is captured in the group which can be referenced later using \n where n is the ordered position of group starting from 1. In a regex object groups are referred using $1, $2…

// matches "a" and back reference it using \1
const regex = /(a)b\1d/;
regex.test('abad'); // true
regex.test('abd'); // false
// multiple groups
/(a)b(c)\1d\2/.test('abcadc'); // true
// Regex matches a sentence which starts and ends with same word
const sentenceRegex = /^([\w]+\b).*\1\.$/i;
sentenceRegex.test('Apple is red so red is apple.');

Sometimes we just use grouping for legibility. For such scenarios, we can avoid the performance penalty of remembering them using non-capturing group (?:). Non-captured group will not be available to \n.

Assertions (?=) and (?!)

When we want to test whether a character/string is followed by a certain character/string or not we use assertions.

// Matches "Sheldon" followed by "Cooper"
const regex = /Sheldon(?=Cooper)/;
regex.test('SheldonCooper'); // true, only "Sheldon" is matched
regex.test('SheldonLeeCooper'); // false
// Matches "Sheldon" not followed by "Cooper"
const regex = /Sheldon(?!Cooper)/;
regex.test('SheldonCooper'); // false
regex.test('SheldonLeeCooper'); // true, only "Sheldon" is matched

Conclusion

All Rise! The Regex Man is here.(Source)

A Bit about Binary Tree 🌳

Sat, 18 Aug 2018 18:30:00 GMT

In the previous post, A Gentle Introduction to Trees 🌳, we acquainted ourselves with trees and their properties. We saw that the naturally hierarchical data are well represented using trees. We learned that the topmost element in the hierarchy/tree which does not have any parent is called the root of a tree. Today’s post talks about a special type of tree called Binary Tree.

Binary tree is a tree where each node can have maximum two children. Since there are only two children so it’s quite intuitive to call them left and right child. Let’s get our hands dirty and code a BinaryTreeNode class in JavaScript as per the definition above.

/**
 * Represent a BinaryTreeNode
 */
class BinaryTreeNode {
  constructor(value) {
    // Value which our beloved node represents.
    this.value = value;
    // Reference of the left child.
    this.left = null;
    // Reference of the right child.
    this.right = null;
  }
}

Here’s our first binary tree created using the BinaryTreeNode class.

const root = new BinaryTreeNode(10);
const left = new BinaryTreeNode(20);
const right = new BinaryTreeNode(30);
root.left = left;
root.right = right;
console.log(root);
// Our first binary tree.
//
//    10
//   /  \
//  20   30

This is a naive way to create a binary tree. There are many far better ways to create a binary tree. We will discuss some of them as we move on.

There are four basic operations Create, Read, Update and Delete(CRUD), which are performed on every data structure. Let’s perform them on Binary Tree as well. At first, we’ll start with the “Read” operation cause it’s relatively easy(a million thanks to recursion). Also, it will strengthen our bond with the binary tree.

Traversal

Reading data from a data structure is also known as traversal. As we know Binary Tree is a non-linear data structure. So its data can be traversed in many ways. In general, data traversal for trees is categorized as Breadth First Traversal(BFS) aka Level Order Traversal and Depth First Traversal(DFS).

Note. These traversal methods are not specific to binary trees. They can be used for any tree. But, for brevity, we’ll only discuss them for binary trees.

Depth First Traversal

In depth-first traversal, we start with the root node and go into the depth of it. We dive deep as much as possible until we reach the end. Once we reach the bottom i.e. the leaf node, we backtrack to traverse other nodes. It’s really important to notice that while diving or backtracking, how are we dealing with the root node or the node acting as root node? Are we traversing root node before diving? Are we traversing root node after backtracking? Answer of these questions leads to 3 new categories of depth-first traversal in-order, pre-order and post-order. I hope I my poor articulation is not confusing you.

Inorder Traversal

Inorder Traversal(Source)

For in-order traversal, we start with the root node and go to the left of the tree as far as possible until we reach the end or leaf node. If there’s any leaf node, we read its data and backtrack to the immediate parent node or root node. Otherwise, we simply read data from the root node and move the right child, if there’s any, and repeat the same for the right node. The traversal sequence for in-order is left-root-right. Here are some sample binary trees which we will use for traversing.

       Sample binary trees
       ====================
    1)                      2)
  -----                   ------
    a                       j
  /   \                   /   \
 b     c                 f     k
                       /  \     \
                      a    h     z

For tree 1) and 2), in-order traversals will be b-a-c and a-f-h-j-k-z. Let me explain how we got them. For tree 1), we start with its root node i.e. node a and move to the left that is node b. Then we again move to the left of node b. Since there’s no node to visit which means we have reached to the farthest left. We read/print its data and move back(backtrack) to the root node a. We read data from it and move to its right child that is node c. and repeat the same for it. Similarly, we can traverse tree 2).

Let’s see how does it look in the code.

/**
 * Prints the values of binary tree in-order.
 *
 */
const traverseInorder = root => {
  if (root === null) {
    return;
  }

  // Traverse the left node.
  traverseInorder(root.left);

  // Print root node's value.
  console.log(root.value);

  //Traverse the right node.
  traverseInorder(root.right);
};

We learned from our previous post that trees are recursive in nature. So we leveraged their recursiveness and wrote a recursive function traverseInorder which traverses a binary tree in order. As we know that for every recursive solution there’s an equivalent iterative solution. And we can go with the iterative solution as well but to keep it simple we will continue with recursion and will discuss the iterative solution on some other day.

In-order traversal is commonly used for binary search tree cause for BST it retrieves data in sorted order.

Preorder Traversal

Preorder Traversal(Source)

Pre-order traversal is similar to in-order. The only difference is we traverse the root node first then, we move to the left and the right child. The traversal sequence is root-left-right. For tree 1) and 2) in our boring example pre-order traversals are a-b-c and j-f-a-h-k-z. Here’s the Js code.

/**
 * Print the values of binary tree in pre-order.
 *
 */
const traversePreOrder = root => {
  if (root === null) {
    return;
  }
  // Print root node's value.
  console.log(root.value);
  // Traverse the left node.
  traversePreOrder(root.left);
  //Traverse the right node.
  traversePreOrder(root.right);
};

If you look at the code, you’ll realize that we have only changed the order of statement compared to in-order traversal. And that’s all is required.

Postorder Traversal

Post Traversal(Source)

In post-order traversal, we traverse the root node in the end. The traversal sequence is left-right-root. For tree 1) and 2) post-order traversal will be b-c-a and a-h-f-z-k-j. Js code:

/**
 * Print the values of binary tree in post-order.
 *
 */
const traversePostOrder = root => {
  if (root === null) {
    return;
  }
  // Traverse the left node.
  traversePostOrder(root.left);
  //Traverse the right node.
  traversePostOrder(root.right);
  // Print root node's value.
  console.log(root.value);
};

Breadth First Traversal

In the breadth-first traversal, we traverse tree horizontally i.e. we traverse tree by levels. We start with the root node (or first level), explore it and move to the next level. Then traverse all the nodes present on that level and move to the next level. We do the same for all remaining levels. Since nodes are traversed by levels, so breadth-first-traversal is also referred as Level Order Traversal. Here’s an illustration.

Depth-First vs Breadth-First(Source)

We accomplish level order traversal with the help of a queue. We create an empty queue and enqueue the root node. Then we do the followings, while the queue is not empty.

Dequeue a node.
Explore the node.
If the node has a left child, enqueue it.
If the node has a right child, enqueue it.

/**
 * Traverses  binary tree in level order.
 *
 */
const levelOrder = root => {
  if (root === null) {
    return;
  }

  const queue = [root];
  while (queue.length) {
    const node = queue.shift();
    // pirnt/explore node.
    console.log(node.value);
    // enqueue left
    if (node.left !== null) {
      queue.push(node.left);
    }
    // enqueue right.
    if (node.right !== null) {
      queue.push(node.right);
    }
  }
};

Create

There’s no restriction on the data stored in a binary tree which gives us the flexibility to create it. We will discuss following two popular methods to create a binary tree:

From array representation.
Level Order Insertion.

From array representation

A binary tree can also be represented using an array. For child i, in the array representation, the left child will be at 2*i + 1 and the right child will be at 2*i + 2. The index of the root node is 0. Here’s the JS code to create binary tree from array representation.

/**
 * Creates a binary tree from it's array representation.
 *
 * @param {any[]} array
 */
const createTree = array => {
  if (!array.length) {
    return null;
  }
  const nodes = array.map(value =>
    value !== null ? new BinaryTreeNode(value) : null
  );
  nodes.forEach((node, index) => {
    if (node === null) {
      return;
    }
    const doubleOfIndex = 2 * index;
    // Left node -> (2 * i) + 1.
    const lIndex = doubleOfIndex + 1;
    if (lIndex < array.length) {
      node.left = nodes[lIndex];
    }
    // Right node -> (2 * i) + 2.
    const rIndex = doubleOfIndex + 2;
    if (rIndex < array.length) {
      node.right = nodes[rIndex];
    }
  });
  return nodes[0];
};

Let’s consider an array and use above function to create a binary tree.

const array = [1, 2, 3, 4, 5, 6];
const tree = createTree(array);
console.log(tree);
// Tree represented by array.
//                1
//             /     \
//            2       3
//          /  \     /
//         4    5   6

Level Order Insertion

In this approach, we insert an item at the first available position in the level order.

Since we are inserting values in level order, so we can use iterative level order traversal. If we find a node whose left child is null then we assign a new node to its left child. Else if we find a node whose right child is null then we assign a new node to its right child. We keep traversing until we find a left or a right null/empty child. Here’s the JS code for level order insertion.

/**
 * Insert the value into the binary tree at
 * first position available in level order.
 *
 */
const insertInLevelOrder = (root, value) => {
  const node = new BinaryTreeNode(value);
  if (root === null) {
    return node;
  }
  const queue = [root];
  while (queue.length) {
    const _node = queue.shift();
    if (_node.left === null) {
      _node.left = node;
      break;
    }
    queue.push(_node.left);
    if (_node.right === null) {
      _node.right = node;
      break;
    }
    queue.push(_node.right);
  }
  return root;
};

Update

Updating a value of a node in a binary tree is relatively easy, cause values stored in a binary tree doesn’t have to maintain any specific tree property. To update the value, we simply find the node, whose value is being updated, using one of the traversals discussed above and replace its value.

Delete

Deleting a node form a binary tree is not as easy as it seems. It’s because there are so many scenarios which we need to deal with while deleting. Scenarios like:

Is targeted node a leaf node?
Does targeted node only have a left child?
Does targeted node only have a right child?
Does targeted node have both the left and the right child?
Are we only deleting the node and not its subtree?
Are we deleting both the node and its subtree? To avoid intricacies, we’ll only consider case 6 here i.e. we delete both the node and its subtrees. We’ll discuss other scenarios someday with Binary Search Tree.

To delete/remove a node from its subtree we need the reference of its parent. If the target is on the left of parent then we set left of the parent to null else we set right of the parent to null. We let the garbage collector take care of the reset i.e. removing subtrees and freeing the memory. We are simply setting the reference to null, so it doesn’t matter which traversal we use. We’ll end up with the same result, but time and space complexities may vary. Let’s use Breadth-First Traversal for now.

/**
 * Removes a node and it's subtrees from a
 * binary tree.
 * @param root
 * @value
 *
 * @return updated root.
 */
const remove = (root, value) => {
  if (root === null) {
    return null;
  }
  if (root.value === value) {
    return null;
  }
  const queue = [root];
  while (queue.length) {
    const node = queue.shift();

    // If target is on left of parent.
    if (node.left && node.left.value === value) {
      node.left = null;
      return root;
    }
    queue.push(node.left);

    // If target is on right of parent.
    if (node.right && node.right.value === value) {
      node.right = null;
      return root;
    }
    queue.push(node.right);
  }
  return root;
};
let tree = fromArrayRepresentation([1, 2, 3, 4]);
tree = remove(tree, 2); // Remove 2 and 4(its child of 2).
console.log(tree);

Note: If a language(like C or C++) doesn’t have the garbage collector, then we may need to traverse the tree in post-order remove the children first before deleting the targeted node. For more detail please refer here.

Summary

Binary Tree is a special tree in which each node can at most contain two children called left and right. To read/traverse data from a binary tree we have two major approaches Depth-First Traversal and Breadth-First Traversal. Depth-First traversal is further classified in pre-order, in-order, post-order traversal. In depth-first traversal, we visit the node and its children first, then we visit siblings of the node. In breadth-first traversal, we visit the node and its siblings(nodes which are at the same level) first, then we move to the next level. Depth-First traversal is also referred as Level Order Traversal. There are many ways to create a binary tree. One can create a binary tree from its array representation. In array representation value at ith, index will have children at 2*i + 1 and 2*i + 2. A binary tree can also be created using level order insertion where any new value is inserted at first available position in the level order. Updating a value in a binary tree is relatively easy because values in a binary tree don’t maintain any specific property with respect to each other. Among all operations, deleting a node is a bit complicated cause a node may carry children. So we have to take care of its children as well.

I have created a repository on Github which contains the implementation of the binary tree along with many other data structures in JavaScript. Please feel free to fork/clone it. If you have any suggestion or correction, please post them in the comment section. Thank you for reading.

A Gentle Introduction to Trees 🌳

Sat, 14 Jul 2018 18:30:00 GMT

Source

Most of the time when people embark upon the journey of learning data structures, they get started with linear data structures like array, stack, linked list, queue etc. And if the journey “continues”, they acquaint themselves with non-linear data structures like trees and graphs. Fortunately, I continued the journey and stumbled upon an infamous non-linear data structure called Tree. In this series of post, we’ll take a closer look at trees and different types of trees like Binary Tree, Binary Search Tree.

Let’s first understand linear and non-linear data structures before starting with trees.

Linear Data Structure:

“A data structure is a linear data structure if its data items(elements) form a sequence or a linear list”.

In plain English, linear data structures have a logical beginning and a logical end. Examples: array, stack, linked list, queue.

MyCodeSchool

Non-Linear Data Structure:

Unlike linear data structures, elements of a non-linear data structure do not form a sequence because of that they can be traversed in any desired order or non-sequential order. Examples: Tree, Graph etc.

As a programmer, we often need to decide which data structure to use. Should we use a linked list ? or should we use a stack? Or Should we always use an array? Well, the choice of data structure depends upon the circumstances.

“Bad programmers worry about the code. Good programmers worry about data structures and their relationships.” ~ Linus Torvalds

One may take the following factors into considerations:

What needs to be stored ?
Memory usages or consumptions.
Ease of implementation.

Let’s address the elephant in the room. Trees are basically non-linear data structures which are mostly used to organize data in a hierarchical way. Let’s take some of the real life examples.

Here the Stark Family Tree from Game of Thrones.

Game of Thrones: Stark family tree ( Source )

By looking at this tree, we can easily define relationships between each character.

We can say that Rickard and Unknown(yet to be revealed) are grandparents of Arya and her siblings i.e. Robb, Sansa, Bran, Rickon, and Eddard & Catelyn are their parents.

Also Arya and Jon Snow are cousin cause their parents are siblings. I hope Jon Snow at least knows this 😄.

Here’s another example which shows tree of a directory on file system.

Middle Georgia University

Tree Terminology:

 Sample tree
  -----------
       j    <-- root
     /   \
    f      k
  /   \      \  <-- edge
 a     h      z    <-- leaves

node: A basic entity in tree which can contain data or value and references to other nodes. We can say, a tree is collection of these nodes. In above sample tree j, f, k, a, h, and z are nodes of the tree.
root: is the top most node of a tree. j is the root node.
children: f and k are children of j. Similarly a & h are children of f while z is child of k.
parent: j is parent of f and k, and grandparent of a, h and z.
sibling: children which have same parent are called sibling. f and k are sibling. a and h are also siblings. But z is cousin of a and h cause their parents are siblings.
leaf: A node with no child is called leaf node. Here a, h and z are leaf node.
edge: Nodes are connected by edges. Sometimes edges are also referred as links.

Tree Properties:

Sample tree
   -----------
       j    <-- root - L-0
     /   \
    f      k         - L-1
  /   \      \
 a     h      z      - L-2

A tree with n nodes will have exacly n-1 edges or links (Tree with only root node has 0 link/edge). In the sample tree, we have 6 nodes and 5 edges (6 - 1).
The Depth of node x = length of the path from the root to node x. Length of a path is basically the number of edges in the path. So we can say that the depth of node x is the number of edges in the path from the root to x. The depth of the root node is 0. In the sample tree, depth of nodes f and k is 1, and depth of nodes a, h and z is 2. Nodes with the same depth have the same level the in tree. We can see f and k have the same depth and they are at the same level L-1.
The Height of node x = number of edges in the longest path from x to a leaf node. The height of a leaf node is 0 and the height of an empty tree is considered as -1. The height of a tree can be defined by the height of root node.

Note: In some books, the depth of a node x is referred to the number of nodes in the path from the root to node x. In that case, depth of the of the root node will be 1. Similarly, the height of the node x is also referred as the number of nodes in the longest path from node x to leaf node which means the height of leaf node will be 1 and height of empty tree will be 0 instead of -1. In this series of posts, we will consider this definition of height and depth. You can read detailed discussion on depth and height here.

Another notable property of trees which make them super-powerful is their recursive nature.

Yes, Trees are recursive in nature.

It means that a tree is composed of many small trees called subtree. If we ignore root node then every node in a tree represents a subtree. This property of trees helps us to write recursive algorithms for many operations like search and traversal, which are extremely simple to grok and implement.

Applications:

Here are some common uses of trees taken from Wikipedia.

Representing hierarchical data.
Storing data in a way that makes it efficiently searchable .
Representing sorted lists of data.
As a workflow for compositing digital images for visual effects.
Router algorithms.

Here’s a sample Tree class with a countLeaves method which counts the number of leaf nodes in a tree inspired by Raganwald post on stinking recursion.

class Tree {
  constructor(...children) {
    this.children = children;
  }
  countLeaves() {
    if (!this.children.length) {
      return 1;
    }
    return this.children.reduce((leaves, child) => {
      return leaves + child.countLeaves();
    }, 0);
  }
}
const tree = new Tree(new Tree(new Tree()), new Tree());
console.log(tree.countLeaves()); // 2 leaves

Demystifying Interpolation formula for Interpolation Search

Fri, 19 Jan 2018 18:30:00 GMT

Interpolation Search is similar to Binary Search. In Binary Search, we always calculate middle of the array and compare it with the key. If the key is equal to mid then we return otherwise we reduce our array to subarray based on our comparison. But, with Interpolation Search, instead of calculating the mid, we apply interpolation formula on our uniformly distributed array/input to calculate the nearest position to the key. As mentioned on GeeksforGeeks,

the idea of the formula is to return higher value of position when the element to be searched is closer to the end of the array OR to return smaller value of the position when the element to be searched is closer to the beginning of the array.

Let’s consider a real-life example to grok it better. Suppose you want to search “Yoyo” in a dictionary. If you follow traditional binary search, you’ll flip to the middle of the dictionary and lexically compare the word “Yoyo” with the middle word. But if you apply interpolation search, you’ll flip directly somewhere closer to the end of the dictionary since you know that word “Yoyo” will be closer to the end.

Derivation

To understand the formula let’s derive it. Suppose we have a linear function y = f(x) where the relationship between y and x is defined in the diagram below.

Linear Function y = f(x).

Consider two points (x1, y1) and (x2, y2) where y1 = f(x1) and y2 = f(x2) ∀ x1 < x2. Let’s place them somewhere on the graph.

y = f(x) with (x1, y1) and (x2, y2)

Suppose we want to find an x where x1 <= x <= x2 for a given value of y such that y = f(x). How can we find it? We can use trigonometry.

Deriving Interpolation Formula with Trigonometry

As depicted in the diagram above, the value of tan𝛳 for △ABC will be equal to the value of tan𝛳 for △ADE. From trigonometry, we know that

It means tan𝛳 for △ABC is:

And tan𝛳 for △ADE is:

Since angle 𝛳 is same for both triangles. Therefore, we can say

which implies that

Or we can say that

Let’s see how this formula can help us to find mid for interpolation search. If we consider our input array as a function f(x) then

x1 => low and y1 => array[low]
x2 => high and y2 => array[high]
x => pos and y => array[pos] i.e. key.

After putting these values in formula

Here’s the implementation of Interpolation Search in JavaScript.

const interpolationSearch = (array, key) => {
  // if array is empty.
  if (!array.length) {
    return -1;
  }

  let low = 0;
  let high = array.length - 1;
  while (low <= high && key >= array[low] && x <= array[high]) {
    // calculate position with
    let pos =
      low +
      Math.floor(
        ((high - low) * (key - array[low])) / (array[high] - array[low])
      );

    // if all elements are same then we'll have divide by 0 or 0/0
    // which may cause NaN
    pos = Number.isNaN(pos) ? low : pos;

    if (array[pos] === key) {
      return pos;
    }

    if (array[pos] > key) {
      high = pos - 1;
    } else {
      low = pos + 1;
    }
  }

  // not found.
  return -1;
};

Binging Binary Search 🔎

Tue, 09 Jan 2018 18:30:00 GMT

Data Structures and Algorithms(DSA) is one of the essential tools which every engineer should have in his/her arsenal. Generally, they are taught in the first year of engineering but, in my first year, I was busy in making “binary trees” 🙂. Because of that, I couldn’t focus on learning and started blindly toying with them. But for 2018, I’ve made a resolution that I will tame this demon of DSA and will not let it haunt me every time I try to step out of my comfort zone. So I’ve started studying DSA and it looks like it’s a long journey but as we know:

“The journey of a thousand miles begins with a single step”.

For me that single step is Binary Search, so let’s get started with it.

Searching

Searching/finding is the most elementary task that we do on daily basis e.g. searching a name in the phone book, searching a book on the bookshelf. The way we search an item majorly depends on how items are kept/arranged. For example, on a bookshelf, if books are kept haphazardly then one may have to check every book till he/she finds the desired book. But in case of the phone book, one can directly jump to the initials of the name.

Giphy

In computer science, we are a handful of search algorithms. Some popular elementary search algorithms are Linear/Sequential Search, Binary Search, Interpolation Search, Ternary Search etc. Every search algorithm has it’s own pros and cons. In this post we’ll discuss a bit about Linear Search and then we’ll dive into Binary Search.

Linear/Sequential Search

In Linear Search as the name suggests we linearly/sequentially compare each item of the collection to the key item. We stop searching when we find the item else we continue searching until all the items are compared. Let’s take an example to understand it. Suppose we have been given a list of employee numbers in ascending order present on a particular day. We need to check whether employee 5 was present or not. We can leverage Linear Search to figure it out. We compare every id/number in the list with 5. If it’s found then we say that employee 5 was present else we’ll say employee 5 was absent. Here’s the implementation in javascript:

/**
 * Linear Search.
 * @param array
 * @param element
 */
const linearSearch = (array, element) => {
  // Traverse elements of the array and compare
  // them
  for (let i = 0; i < array.length; i++) {
    // Compare element at ith position with
    // key element. If both are equal then return
    // the index.
    if (array[i] === element) {
      return i;
    }
  }
  // no element found. Returns -1.
  return -1;
};

const employees = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const employeeId = 5;
const flagPresent = linearSearch(employees, employeeId) !== -1;

if (flagPresent) {
  console.log(`Employee ${employeeId} was present.`);
} else {
  console.log(`Employee ${employeeId} was absent.`);
}

By looking at the number of comparisons we make to find the element using Linear Search, we can say that it’s time complexity is O(n) (You can read more about time complexity in my previous post An Ode to Asymptotic Notation) which means time taken by Linear Search is directly proportional to the size of the input.

We can conclude that Linear Search is good especially when input size is small but it’s sluggish when the input is relatively large. Also, it doesn’t take advantage of the fact that input i.e. employees list is sorted in ascending order. Let’s see if we can do better with Binary Search.

Binary Search

Binary Search is based on Divide and Conquer Technique. According to CLRS, Divide and Conquer technique is comprised of followings:

Divide: Break or divide the problem into the number of subproblems which are smaller instances of the same problem.

Conquer: Continue breaking the subproblems into smaller subproblems. If the subproblem size is small enough then solve it in a straightforward manner. Combine: the solutions of the subproblems into the solution for the original subproblems.

Binary Search repeatedly divides the problem into two subproblems that may contain the item. It discards one of the subproblems by utilising the fact that items are sorted. It continues halving the subproblems until it finds the item or it narrows down the list to a single item. Since binary search discards the subproblems because of that it’s pseudo Divide & Conquer algorithm. Here’s the pseudocode for binary search:

1. LET A is the list of items of size N and k is the key item.
2. LET min = 1 and max = N.
3. Repeat step 4, 5, 6 TILL min <= max.
4. LET mid = (min + max) / 2.
5. IF A[mid] ===  k THEN RETURN 'Item Found.'
6. IF A[mid] < key THEN SET min = mid + 1 ELSE SET max = mid - 1.
7. RETURN 'Item not found'.

Here’s the JavaScript implementation for the same:

/**
 * Iterative Binary Search Implementation
 * @param array: array of items.
 * @param key: key to be searched.
 *
 */
const binarySearch = (array, key) => {
  // Min and max for our beloved array.
  let min = 0;
  let max = array.length - 1;

  while (min <= max) {
    // Calculating mid for guessing and dividing the problem.
    const mid = Math.floor((min + max) / 2);

    if (array[mid] === key) {
      // Yeah! key is present in the array. Let's return it's
      // position.
      return mid;
    }

    // Shifting mix and max respectively to focus
    // on subarray which may contian key.
    if (array[mid] < key) {
      min = mid + 1;
    } else {
      max = mid - 1;
    }
  }

  // We have reached here. It means key is not present in array.
  // Let's return -1 as an indicator for "Not found".
  return -1;
};

The beauty of binary search is that in every iteration if it doesn’t find the key item, then it simply reduces the list to at least it’s half for the next iteration which makes a huge difference when we talk about its time complexity. Let’s consider worst-case scenario for an array of size 32. In the first iteration, we do not find the key element so we cut down the array length to 16. In next iteration, again we do not find the key element so again we cut it down to 8, then to 4, then to 2, and then to 1. Here’s the visual representation of Binary Search and Linear Search:

Visualising Binary Search & Linear Search Source

Complexity

The best case of binary search is when the first comparison/guess is correct(the key item is equal to the mid of array). It means, regardless of the size of the list/array, we’ll always get the result in constant time. So the best case complexity is O(1).

In worst case scenario, the binary search finds the item at the end of the list/array when it’s narrowed down to a single item. As we saw earlier with the list of size 32, to narrow it down to a single item we make at least 5 comparisons.

32/2 --> 16 // 1
16/2 --> 8 // 2
8/2 --> 4 // 3
4/2 --> 2 // 4
2/2 --> 1 // 5
Total = 5 guesses/comparisons.

If we double the size to 64 then only one more comparison is extra made.

64/2 --> 32 // 1
32/2 --> 16 // 2
16/2 --> 8 // 3
8/2 --> 4 // 4
4/2 --> 2 // 5
2/2 --> 1 // 6
Total = 6 guesses/comparisons.

If we look at the comparison and size of the input we see a pattern here eg. 32 = 2⁵ and 64 = 2⁶. Let’s assume n is the size of input and k is the number of comparisons then we can say that

Let’s apply logarithm to both sides with base 2(you can read more about logarithms here).

By the help of the equation above we can make a blanket statement that the worst case complexity of binary search is O(log n).

Limitations

Binary search can be applied iff items are sorted otherwise one must sort items before applying it. And we know that sorting is relatively an expensive operation.
Binary search can only be applied to data structures which allow direct access to elements. If we do not have direct access then we can not apply binary search on it eg. we can not apply binary search to Linked List.

Conclusion

Binary search is a powerful tool to find an element in a large collection especially when the collection is sorted and allows direct access to its element. We learned that for best-case binary search runs with constant time i.e. O(1) while for average and worst-case its runtime is O(log n).

An Ode to Asymptotic Notations

Sat, 26 Aug 2017 18:30:00 GMT

On the La La Land of algorithms, there are ample ways to depict the efficiency and scalability of an algorithm especially when the input size is large. Altogether, these ways are called as Asymptotic Notations(Asymptotic Analysis). In this post, we’ll acquaint ourselves with these notations and we’ll see how we can leverage them to analyse an algorithm.

Note: I am writing this post in order to learn cause I strongly believe in learning by teaching. In case, you have suggestion/correction, please feel free to post in comment section.

Before we delve into the analysis of an algorithm, we need to know what’s an algorithm and why studying/analysing algorithms is important. So let’s get started.

What is an algorithm?

According to Merraim Webster,

An algorithm is a procedure for solving a mathematical problem (as of finding the greatest common divisor) in a finite number of steps that frequently involves repetition of an operation; broadly : a step-by-step procedure for solving a problem or accomplishing some end especially by a computer.

In other words an algorithm is simply a finite set of well-defined instructions, written to solve a specific problem (Ted-Ed: What’s an algorithm?). e.g. We want to find an element in an array. One way to find it, we traverse each element in the array and compare with the key element. If it’s equal then we say that element is present in the array else we continue traversing till the end of the array (Linear Search).

Source: TutorialsPoint

Generally, algorithms are written in the pseudo code. Pseudo code is simply the text written in an informal language which explains the algorithm and can be translated in any programming language. Think of pseudo code as a text-based algorithmic design tool. Let’s write pseudo code for the example above.

Algorithm:
Find Element(array, key)
a) Set i = 1;
b) if i is greater than array_size then go to step g.
c) if array[i] is equal to key then go to step f.
d) set i = i + 1;(increase i by 1).
e) go to step b.
f) print 'Present' and go to step h.
g) print 'Not present'.
h) Exit.
Pseudo Code:
findElement(array, key)
    for each item in array
        if item == key
            return 'Present'.
    return 'Not present'.

Here’s another algorithm which might be helpful for you if you are living alone.

Living Alone Algorithm

According to Cormen’s Introduction to Algorithm,

An algorithm is said to be correct if, for every input instance, it halts with the correct output.

We supply various instances of input (including edge cases) to an algorithm to measure its correctness. For example, how linear search algorithm will behave if we pass an empty array as input.

Algorithms are unambiguous in nature.

It means that for an algorithm, each of its steps & inputs/outputs must be clear and lead to only one meaning.

Why Studying Algorithms?

As engineers, we always strive to provide better solutions. We know that often there are many ways to solve a problem and each way has its own strengths and weaknesses. Studying solutions/algorithms helps us to decide which solution to pick. For example to find an element in an array, instead of Linear Search we can use Binary Search if we know that our input array is sorted. While studying an algorithm we consider following questions:

Does it solve the problem with all possible inputs?
Does it use resources efficiently?
Can it be optimised?
Is it scalable?
Is there any better algorithm?
and the list goes on…

Execution of an algorithm requires many resources like computational time, memory, communication bandwidth, computer hardware etc. When we analyse an algorithm, we primarily focus on computational/running time and memory/space required for the algorithm (aka Time Complexity & Space Complexity). Let’s determine the time complexity of our Linear Search algorithm. Here’s a simple JavaScript program for LinearSearch.

/**
 * Linear Search.
 * @param array
 * @param element
 */
const linearSearch = (array, element) => {
  // Traverse elements of the array and compare
  // them
  for (let i = 0; i < array.length; i++) {
    // Compare element at ith position with
    // key element. If both are equal then return
    // the index.
    if (array[i] === element) {
      return i;
    }
  }
  // no element found. Returns -1.
  return -1;
};

You can see that our linearSearch function takes two parameters: array and element we wish to find. It simply traverses the array using for loop and compares every item of the array with element parameter. Let’s assume comparison statement takes time a unit of computer time and the size of array is n then

Best Case: First entry in the array is equal to element. Only one iteration, so time = a; (minimum time required to find the element).
Worst Case: Last entry in the array is equal to element Or Element not present in the array. n iterations, so time = a \* n; (maximum time required to find the element).
Average Case: Any entry between first and last matches to element. so required time will be between min and max time (a ≤ time ≤ a \* n).

By looking at above scenarios, we can conclude that the running time of an algorithm depends on the size of the input and the time taken by the computer to run the lines of code of the algorithm. In other words, we can think of running time as a function of the size of its input. eg. For Linear Search, it is F(n) = an.

Another important thing which we consider for analysis is the rate of growth of the function. The rate of growth(aka Order of Growth) describes how the running time increases when the size of input increases. Here’s the plot of running time for Linear Search with respect to input size.

Linear Search Graph(Math CS)

When we talk about the rate of growth, we mainly focus on the part of our function which has high impedance and causes drastic changes in the running time of algorithm especially when the input size is very large.

Consider a quadratic function F(n) = an² + bn + c. For very large value of n, term (bn + c) becomes less significant and the addition of it to an² barely make any difference. It’s like throwing a bucket filled with water in the ocean or on Big Show 😀. So we can knock it off. Now we are left with an².

As we know that a is constant coefficient and we want our entire focus to be on the size of input so we can knock off a as well. Consequently, we are left with n² and that’s what indeed matter for us. It tells us that running time of our function grows as n² which means that it’s growth rate is quadratic. Similarly, we can say that growth rate for Linear Search is linear (n).

When we remove the less significant terms and coefficients, we get the rate of growth of our function but we need more formal/generic way of describing them, that’s when we use asymptotic notations.

Think of asymptotic notations, as a formal way to speak about functions and classifying them.

Asymptotic notations has following classes or notations for describing functions:

O-Notation (Big Oh).
𝛺-Notation (Big Omega).
ϴ-Notation (Theta).
o-Notation (Little Oh).
𝜔-Notation (Little Omega).

In this post, we will discuss top 3 notations i.e. O, 𝛺 and ϴ. If you wish to read about other two notations, you can read them in CLRS. So let’s disucss them one by one.

O-Notation:

In plain English, Big oh notation is a way of estimating upper bound/limit of a function when the input is very large. Let’s write it in mathematical form.

O(g(n)) = {
    f(n): there exist positive constants c and k such that
    0 ≤ f(n) ≤ cg(n) for all n ≥ k
}

Don’t worry if you are not able to understand it. I am with you and “May the force be with us”. Let me break it down for you. At first, we have chosen an arbitrary constant called k as a benchmark for large input means our input is considered large only when n ≥ k. After that, we are defining the upper bound for our function f(n) with the help of function g(n) and constant c. It means that our function f(n)’s value will always be less than or equal to c * g(n) where g(n) can be any non-negative function for all sufficiently large n. For example, for Linear Search g(n) = n. So Time Complexity of Linear Search, for both worst case and average case, is O(n) i.e. Order of n. Time Complexity of Linear Search for best case is O(1) i.e. constant time (key element is the first item of the array).

Source: GeeksforGeeks

Big Oh notation is the most widely used notation for time complexity cause it talks about the upper bound of an algorithm which helps us to decide which algorithm is better. eg. algorithm of complexity O(n) will do better than algorithm of complexity O(n²) for sufficiently large input(it may not be true when input is small).

𝛺-Notation:

Omega notation is converse of Big Oh notation. It is a way of estimating lower bound/limit of a function when the input is significantly large.

Ω (g(n)) = {
    f(n): there exist positive constants c and k such that
    0 ≤ cg(n) ≤ f(n) for all n ≥ k
}

As we can see, the value of function is always greater than or equal to lower bound i.e. c * g(n).

Source: GeeksforGeeks

Omega notation is mainly useful when we are interested in the least amount of time required for the function/algorithm which make it the least used notation among other notations.

ϴ-Notation:

Theta notation is asymptotically tight bound, it means our function lies between upper bound and lower bound.

Θ(g(n)) = {
    f(n): there exist positive constants a, band k such that
    0 ≤ b * g(n) ≤ f(n) ≤ a * g(n) for all n ≥ k
}

Source: GeeksforGeeks

As we can see, if f(n) is theta of g(n) then f(n) always lies between b * g(n) and a * g(n) for all values of n which are greater than or equal to k. eg. we know that upper bound for Insertion Sort is order of n² (when array is sorted in reverse order, worst case) and lower bound is order of n (when array is already sorted, best case). So in ϴ notation we describe the time complexity for insertion sort using following statements:

Worst case time complexity of insertion sort is ϴ(n²).
Best case time complexity of insertion sort is ϴ(n).
Average case time complexity of insertion sort is ϴ(n²).

Which notation to use?

Often people ask which notation shall we use to describe the complexity of an algorithm? Well, it depends on the situation and the desired statement. Let’s take an example of Insertion Sort. We know that for Insertion Sort the worst case time complexity is ϴ(n²) and best case time complexity is ϴ(n). Can we say that the time complexity of insertion sort is ϴ(n²)? No. We can’t cause we know that for the best case it is ϴ(n). Similarly, we can not say that it’s ϴ(n) cause for the worst case it is ϴ(n²). An astute reader might ask, is there any way to make a single/blanket statement which covers both cases and tells us about the complexity instead of talking about the best case and the worst case? Yes. There is. What if in lieu of ϴ notation, we use Big O notation, then we can say that the time complexity of insertion sort is Order of n² i.e. O(n²) then we don’t need to worry about linear time i.e. O(n) cause upper bound n² covers it. A details discussion about which notation to use can be found on this StackExchange thread.

Summary

To summarise, we can say that asymptotic notations are fancy ways/classes of speaking about algorithms. They help us to compare one algorithm with another. They also help us to reason about our algorithms with various cases like best case, worst case, and average case.

References:

Introduction to Algorithm by CLRS.
Asymptotic Notations by GeeksForGeeks.
Khan Acadamy.
and of course Stackoverflow.

Salient Notes from “The Monk Who Sold His FERRARI”

Sat, 05 Aug 2017 18:30:00 GMT

Books are the ultimate source of inspiration. They change the way we look at our beautiful world. They help us to live and lead a life filled with joy and prosperity. I am glad that I have cultivated the habit of reading books. This week I completed Robin Sharma’s The Monk Who Sold His FERRARI. Whenever I read a book, I jot down my thoughts and quotable quotes which I come across. This post is a collection of all the salient thoughts and quotes which I noted down when I was reading The Monk Who Sold His Ferrari. Hope you’ll enjoy reading them.

Life becomes so much simpler and meaningful when you leave the baggage of past behind.
Everything happens for a reason. Every event has a purpose and every setback its lesson. Failure, whether of personal, professional or even spiritual kind, is essential to personal expansion. It brings inner growth and a whole host of psychic rewards. Never regret your past. Rather, embrace it as the teacher that it is.
Life is all about the choices. One’s destiny unfolds according to the choices one makes.
Success on the outside means nothing unless you have success within.
When the student is ready, the teacher appears.
There are no free lunches.
Never overlook the power of simplicity.
If you care for your mind, if you nurture it and if you cultivate it just like a fertile, rich garden, it will blossom far beyond your expectations. But if you let the weeds take root, lasting peace of mind and deep inner harmony will always elude you.
The most joyful, dynamic and contented people of this world are no different from you or me in terms of their makeup. We are all flesh and bones. We all come from the same universal source. However, the ones who do more just exists, the one who fan the flames of their human potential and truly savour the magical dance of life do different things than those whose lives are ordinary.
Your I can is more important than your I.Q.
There are no mistakes in life, only lessons. There is no such thing as a negative experience, only opportunity to grow, learn and advance along the road of self-mastery. From struggle comes strength. Even pain can be a wonderful teacher.
The laws of nature always ensure that when one door closes another opens.
Things are always created twice: first in the workshop of the mind and then, and only then, in reality.
When you are inspired by some great purpose, some extraordinary project, all of your thoughts break their bonds: your mind transcends limitations, your consciousness expands in every direction and you find your self in a new, great and wonderful world. Dormant forces, faculties, and talents become alive and you discover yourself to be a greater person than you ever dreamed yourself to be.
The secret of happiness is simple: find out what you truly love to do and then direct all of your energy towards doing it. Once you do this, abundance flows into your life and all your desires are filled with ease and grace.
Saying that you don’t have time to improve your thoughts and your life is like saying you don’t have time to stop for gas because your are too busy driving. Eventually it will catch up with you.
A rose is very much like life: you will meet thorns along the way but if you have faith and believe in your dreams you will eventually move beyond the thorns into the glory of the flower(Heart of Rose).
One must not allow the clock and the calendar to blind him to the fact that each moment of life is a miracle and a mystery.
Self-knowledge is the stepping stone to self-mastery.
The quality of your thinking determines the quality of your life.
Run your own race.
Fatigue dominates the lives of those who are living who are living without direction and dreams.
The purpose of life is a life of purpose.
You will never be able to hit a target that you can not see.
The main reason people do not follow through on any resolutions they make is that it is too easy to slip back into their old ways. Pressure is not always a bad thing. Pressure can inspire you to achieve great ends. People generally achieve magnificent things when their back are up against the wall and they are forced to tap into the wellspring of human potential that lies within them.
Three mirrors that forms a person’s reflection; the first is how you see yourself, the second is how others see you and the third mirror reflects the truth. Know yourself, know the truth.
What lies behind you and what lies in front of you is nothing when compared to what lies within you.
Never forget the importance of living with unbridled exhilaration. Never neglect to see the exquisite beauty in all living things. Today, and this very important moment, is a gift. Stay focused on your purpose. The universe will take care of everything else.
The degree of courage you live with determines the amount of fulfilment you receive. It allows you to truly realise all the exquisite wonders of the epic that is your life. And those who master themselves have an abundance of courage.
You practice the art of kaizen by pushing yourself daily. Work hard to improve your mind and body. Nourish your spirit. Do the things you fear. Start to live with unbridled energy and limitless enthusiasm. Watch the sunrise. Dance in a rain shower. Be the person you dream of being. Do the things you have always wanted to do but you didn’t because you tricked yourself into believing that you were too young, too old, too rich or too poor. Prepare to live a soaring, full alive life. In the East they say luck favours the prepared mind. I believe life favours the prepared mind.
Fear is nothing more than a negative stream of consciousness.
Try not to live your life bound by the shackles of your schedule.
Stop making excuses, just do it.
There’s nothing wrong in making mistakes. Mistakes are part of life and essential for growth. It’s like that saying, “Happiness comes through good judgment, good judgment comes through experience, and experience comes through bad experience”. But there’s something very wrong with making same mistakes over and over again, day in and day out. This shows the complete lack of self-awareness, the very quality that separates humans from animals.
We don’t laugh because we are happy. We are happy because we laugh.
You sow a thought, you reap an action. Reap an action, you sow a habit. Sow a habit, you reap a character. Sow a character, you reap your destiny.
The universe favours the brave. When you resolve to lift your life to its highest level, the strength of your soul will guide you to a magical place with magnificent treasures.
Through the steel of discipline, you will forge a character rich with courage and peace. Through the virtue of Will, you are destined to rise to life’s highest ideal and live within a heavenly mansion filled with all that is good, joyful and vital. Without them, you are lost like a mariner without a compass, one who eventually sinks with his ship.
Truly enlightened people never seek to be like others. Rather, they seek to be superior to their former selves. Don’t race against others. Race against yourself.
Words are the verbal embodiment of power. By filling your mind with words of hope, you become hopeful. By filling your mind with words of kindness, you become kind. By filling your mind with thoughts of courage, you become courageous. Words have power.
Time mastery leads to life master. Guard time well. Remember it’s not non-renewable resource.
Learn to say no. Having the courage to say no to the little things in life will give you the power to say yes to the big things.
Push yourself to do more and to experience more. Harness your energy to start expanding your dreams. Yes, expand your dreams. Don’t accept a life of mediocrity when you hold such infinite potential within the fortress of your mind. Dare to tap into your greatness. This is your birthright!
When all is said and done, no matter what you have achieved, no matter how many summer homes you own, no matter how many cars sit in your driveway, the quality of your life will come down to the quality of your contribution.
A little bit of fragrance always clings to the hand that gives you roses.
Friends add humour, fascination and beauty to life. There are few things more rejuvenating than sharing a belly-bursting laugh with an old friend. Friends keep you humble when you get too self-righteous. Friends make you smile when you are taking yourself too seriously. Good friends are there to help you when life throws one of its little curves at you and things look worse than they seem.
Past is water under the bridge and the future is a distant sun on the horizon of your imagination. The most important moment is now. Learn to live in it and savour it fully.
Don’t kid yourself into believing that you will start to enrich your mind, care for your body and nourish your soul when your bank account gets big enough and you have the luxury of more free time. Today is the day to enjoy the fruits of your efforts. Today is the day to seize the moment and live a life that soars. Today is the day to live from your imagination and harvest your dreams. And please never, ever forget the gift of family.
Life doesn’t always gives you what you ask for, but it always gives you what you need.
Make the decision to spend more time with those who make your life meaningful. Revere the special moments, revel in their power. Do the things that you have always wanted to do. Climb that mountain you have always wanted to climb or learn to play the trumpet. Dance in the rain or build a new business. Learn to love music, learn a new language and rekindle the delight of your childhood. Stop putting off your happiness for the sake of achievement. Instead, why not enjoy the process? Revive your spirit and start tending to your soul. This is the way to Nirvana.
We are all here for some special reason. Stop being a prisoner of your past. Become the architect of your future.

Insertion Sort with Callback.

Tue, 16 May 2017 18:30:00 GMT

interface SortCallback {
  (a: any, b: any): boolean;
}
class InsertionSort {
  private sortCb(a, b): boolean {
    return a > b;
  }
  public sort(array, cb: SortCallback = this.sortCb) {
    for (let i = 1; i < array.length; i++) {
      let j = i - 1;
      let key = array[i];
      while (j >= 0 && cb(array[j], key)) {
        array[j + 1] = array[j];
        array[j] = key;
        j -= 1;
      }
    }
  }
}
let iSort = new InsertionSort();
let array = [5, 2, 4, 6, 1, 3];
console.log(JSON.stringify(array));
iSort.sort(array, (a, b) => b > a);
console.log(JSON.stringify(array));

Angular => extend, copy & merge

Sat, 11 Feb 2017 18:30:00 GMT

Superheroic AngularJs comes with a set of utility functions which are not specific to angular and can be leveraged anywhere. In this post, we will discuss angular.copy(), angular.extend() & angular.merge(). Before delving into these, we need to walk through two important concepts Deep Copy and Shallow Copy cause these functions linger around these concepts.

Shallow Copy is a field by field copy of an object. All the fields of an object are copied to another object. If a field value is a reference to an object (e.g., a memory address) it copies the reference and if field value is a primitive type it copies the value of the primitive type. Since we copy the reference only so if one object is modified then changes will be visible in other object also.

Deep Copy duplicates everything. In lieu of copying the references, it creates a new copy of object and then copy the refrence of new object to destination object. Since we create a brand new object and refer it. Thus the changes made in one objects are not visible to another object. A detailed discussion on deep copy and shallow copy can be found here.

Well now it’s high time for our celebrated functions. Let’s look into them one by one.

angular.copy() does deep copy of an object. In other words, it creates the new destination object(if not supplied) by duplicating the values from supplied source object.

angular.copy(source, [destination]);

As you can see the second parameter is optional. So when it is not passed a new object is created otherwise properties will be copied to destination object.

var source = {
  a: 'a',
  b: 'b'
};
var destination = {
  x: 'my ex',
  y: 'your y'
};
var sourceCopy = angular.copy(source);
sourceCopy.a = 'Changed a';
console.log(source.a, sourceCopy.a); //"a", "Changed a"

Here are some cases from the official api doc for angular.copy() which extensively talks about it.

If no destination is supplied, a copy of the object or array is created.
If a destination is provided, all of its elements (for arrays) or properties (for objects) are deleted and then all elements/properties from the source are copied to it.
If source is not an object or array (inc. null and undefined), source is returned.
If source is identical to destination an exception will be thrown.

angular.extend() as name suggests it extends the destination object by copying enumerable properties of source object. Let's see it in action.

var source = {
  a: 'a'
};
var destination = {
  b: 'b'
};
angular.extend(destination, source);
console.log(destination); //{a: 'a', b: 'b'}
var obj = {
  c: 'c'
};
//if you don't want to mess with original destination obj.
var r = angular({}, obj, source);
console.log(r); //{a: 'a', c:'c'}

angular.extend() does shallow copy which means if changes are made in non-primitive property of source object than they will be visible in destination object or vice versa.

var source = {
  a: {
    c: 'Some value of c'
  }
};
var destination = {
  b: 'this is b'
};
angular.extend(destination, source);
console.log(destination); // {a: {c: 'Some value of c'}, b: 'this is b'}
source.a.c = 'modified c';
console.log(destination.a.c); // "modified c"

Note: angular.extend() does not support rescursive merge(deep copy). That's where angular.merge() comes into picture. See the code below.

var objA = {
  a: {
    b: 'b'
  }
};
var objB = {
  a: {
    c: 'c'
  }
};
var r = angular.extend({}, objA, objB);
// It will log { a: { c : "c" } } instead of // { a: { b: "b", c : "c" }}
console.log(r);

angular.merge() deeply extends destination object by copying enumerable properties from the source to destination. Unlike extend(), merge() recursively descends into object properties of source and perform copy.

var objA = {
  a: {
    b: 'b'
  }
};
var objB = {
  a: {
    c: 'c'
  }
};
var r = angular.merge({}, objA, objB);
console.log(r); // { a: { b: "b", c : "c" }}

That’s all folks!! Here are the references: angular.extend(), angular.copy() & angular.merge().