DEV Community: Vikas yadav

JavaScript Jungle: Who is the Proxy

Vikas yadav — Fri, 29 Oct 2021 12:27:39 +0000

I remember one of my interview few years ago. I was asked:

Given an object and how can we track when some property is accessed or updated on that object.

Example that was given by interviewer was as follows:

const obj = {name: 'Rick', planet: 'Earth'};

/**
* Case 1: Reading property:  
* Whenever I read any property
* it should print 
* GETTING value for <property_name> 
*/

obj.name; // GETTING value for name

/**
* Case 2: Setting property:  
* Whenever I set any property
* it should print 
* SETTING <property_name> = <new_value>
*/

 obj.planet = 'Mars' 
// SETTING planet = Mars

I was like what!!!

But any how I said to my self:

Let's pass this object into a function
Function somehow enhance this object and return it.

So I wrote:

function enhance(obj) {
  // do something with obj to enhance
}

Interviewer asked me about my thought process on this? After thinking and remembering a lot 🤷🏼‍♂️ I said, I know we have to some how intercept the read and write operation on the object, but I am not sure how to do it on the fly. I know when we define properties using Object.defineProperty, we have some control on how that property will behave but the object is already defined so I am not sure. Deep inside I was still not sure 😂 I was still thinking 🙇🏻‍♂️:

Interviewer dropped me a hint that if I am using Object.defineProperty then I need to redefine the properties on the object. Then after some hit and trial I came up with this:

function enhance(plainObject) {
   const keys = Object.keys(plainObject);

  const storedObject = {};

  keys.forEach((key) => {
    storedObject[key] = plainObject[key];
    Object.defineProperty(plainObject, key, {
      get: function () {
        console.log(`GETTING value for  [${key}]`);
        return storedObject[key];
      },
      set: function (value) {
        console.log(`SETTING ${key} = ${value}`);
        storedObject[key] = value;
      }
    });
  });

  return plainObject;
}


let obj = { name: "rick", planet: "earth" };

const enhancedObj = enhance(obj);

console.clear();
console.log(enhancedObj.name);
// GETTING value for  [name] 
// rick 
enhancedObj.planet = "Mars";
// SETTING planet = Mars

🌴 Explanation:

As we know, we have to redefine the properties again. First thing we need to do is to stored all the existing keys in keys variable.
Defined a new object storedObject
Then for each key we copied everything form plainObject to storedObject
Next we defined all the properties on plainObject again but this time we used Object.defineProperty to defined it.
WE have overwritten the get which is called when we read property of an object and set which is called when we set a value to a property of an object.
We put the appropriate log there.
Also whenever set is called we will store that value in storedObject and return from storedObject when get is called.

During this time I was explaining my thought process to interviewer and I did a lot of hit and trial as it was hard for me to remember methods on Object.

My solution has issues some issues:

If we add a new property on enhancedObject it will not be tracked. By the way, interviewer asked me this question as well 😆. But I could not come up with any solution back then. 😅


....

let obj = { 
    name: "rick", 
    planet: "earth" 
};

const enhancedObj = enhance(obj);

// this will not be tracked
enhancedObj.age = 30;

I was completely unaware that there is a better solution in ES6. After coming home when I researched, I found out a solution which is so much easy to implement as well as to understand.

Before we jump into our solution, let's learn a bit about JavaScript Specification of Object.

🌳 Internal Methods

JavaScript specification describes some lower level internal methods on Object like [[Get]], [[SET]], [[VALUE]], [[Writable]], [[Enumerable]] and [[Configurable]]. As per the specifications:

Each object in an ECMAScript engine is associated with a set of internal methods that defines its runtime behaviour.

Point to note: It defines runtime behaviour

But we cannot directly modify the behaviour of the Object at runtime using this so called Internal Methods as we cannot access it directly. As per the specifications:

These internal methods are not part of the ECMAScript language. They are defined by this specification purely for expository purposes.

There are some other internal methods as well. You can checkout full list here

But in ES6 we have a way to tap into these Internal methods at runtime.

🌳 Introducing Proxy

Proxy is a middleman. It does following:

It wraps another object.
It intercepts all the operations related to Internal Methods.
It can handle these operations by its own or it can forward these operation to the wrapped object.

🌴 Anatomy of Proxy


let proxy = new Proxy(target, handler)

Proxy is an inbuilt object that take two arguments:

target: An object that we need to wrap
handler: An object that defines various methods corresponding to Internal Methods that we need to intercept at run time.

Handler methods are often refer to as traps because it traps or intercept the Internal method.

Example


const character = {
   name: 'Rick',
   planet: 'Earth'
};

const proxy = new Proxy(character, {});

// update name 

proxy.name = 'morty';


console.log(character.name) // morty

👾 GOTCHA 👾 : If you do not define any handler function. Proxy will pass the all the operations to wrapped object as if it is not there at all.

🌴 Handler methods

For each of the Internal Method there is a handler method defined on the Proxy object. Some of them are:

Internal Method	Handler Method	Triggered On
[[Get]]	get	When reading a property
[[Set]]	set	When writing a value to a property
[[HasProperty]]	has	When used with `in` operator
[[Delete]]	deleteProperty	When deleting a property with `delete` operator
[[Call]]	apply	When we do a `function` call

You can refer to full list on MDN Docs and TC39 docs

🌴 Invariants

There are certain condition attached to each of the handle methods. These condition must be fulfilled by the trap or handler methods. These are often referred as Invariants. You can read more on this in note section here.

As an example for [[SET]] Operation these are the invariants as per TC39 docs:

The result of [[Set]] is a Boolean value.
Cannot change the value of a property to be different from the value of the corresponding target object property if the corresponding target object property is a non-writable, non-configurable own data property.
Cannot set the value of a property if the corresponding target object property is a non-configurable own accessor property that has undefined as its [[Set]] attribute.

🌴 [[SET]] Trap

If we set a trap for [[SET]] operation and then we can modify the input before setting on original object name


const character = {
  name: "Rick",
  planet: "Earth"
};

const proxy = new Proxy(character, {
/**
* [[SET]] trap
* target: original object 
*         that has been wrapped
* prop: Property that has been set
* value: value to set to the property
*/
  set: function (target, prop, value) {
    // modifying the value 
    const capitalName = value.toUpperCase();
    // setting the value to target
    target[prop] = capitalName;
    return true;
  }
});

// update name

proxy.name = "morty";


// Log is MORTY instead of morty
console.log(character.name); // MORTY

🌴 [[GET]] Trap

Same as [[SET]] trap we can set the [[GET]] trap. Suppose when we access a property we want to print the log Getting <property_name>. We can achieve that by using [[GET]] trap like this:


const character = {
  name: "Rick",
  planet: "Earth"
};

const proxy = new Proxy(character, {

/**
* [[GET]] trap
* target: original object 
*         that has been wrapped
* property: Property name 
*/

  get: function(target, property) {
    // printing the log before setting value
    console.log(`Getting: ${property} `);
    return target[property];
  }
});

const characterName = proxy.name;
console.log(characterName); 

// Getting: name  
// Rick

🌳 Reflect

Before I jump to Proxy solution of the problem. There is also a sister object of Proxy, which is known as Reflect. As per MDN docs

Reflect is a built-in object that provides methods for interceptable JavaScript operations. The methods are the same as those of proxy handlers. Reflect is not a function object, so it's not constructible.

Point to note here is

It has methods same as Proxy
It is not a function
It is not constructible i.e you cannot use it like new Reflect

All the methods on Reflect are static so you can directly call them like

Reflect.get(...)
Reflect.set(...)

🌴 Relationship between Reflect and Proxy:

All the methods that you can define on the Proxy, Reflect has a same method with same argument.
Reflect can invoke the Internal Method by using the methods defined on it.

Proxy method	Reflect call	Internal method
get(target, property, receiver)	Reflect.get(target, property, receiver)	[[Get]]
set(target, property, value, receiver)	Reflect.set(target, property, value, receiver)	[[Set]]
delete(target, property)	Reflect.deleteProperty(target, property))	[[Delete]]

You can check other methods of Reflect on MDN Reflect Docs

🌴 What do we need Reflect for

We know there are a lot of Invariants that we need to deal with when we trap some operation in Proxy and forward it to the original wrapped object. Remembering every rule can be hard.

We can simply use Reflect to forward any operation on original object and it will take care of all the Invariants

So now our [[SET]] and [[GET]] trap will change like this:

const character = {
  name: "Rick",
  planet: "Earth"
};

const proxy = new Proxy(character, {
  set: function (target, prop, value, receiver) {
    const capitalName = value.toUpperCase();
    return Reflect.set(target, prop, capitalName, receiver)
  },

  get: function(target, property, receiver) {
    console.log(`Getting: ${property} `);
    return Reflect.get(target, property, receiver);
  }
});

🌳 Solution to original Problem:

With Proxy and Reflect now we can build our solution like this:

 const proxyObject = function (obj) {
  return new Proxy(obj, {
    set: function (target, property, value, receiver) {
      console.log(`SETTING ${property} = ${value}`);
      return Reflect.set(target, property, value, receiver);
    },
    get: function (target, property, receiver) {
      console.log(`GETTING value for  [${property}]`);
      return Reflect.get(target, property, receiver);
    }
  });
};


let character = { name: "morty", planet: "earth" };

character = proxyObject(character);



console.log(character.name);
// GETTING value for  [name] 
// morty 
character.planet = "Mars";
// SETTING planet = Mars 


/**
* ES5 solution does not work if we set new properties
* ES6 Proxy will work for new properties as well and 
* print our log
*/

charter.grandParent = 'Rick';
// SETTING grandParent = Rick

🍃 Browser Support for Proxy

As you can see most of latest browsers already support Proxy except IE, Baidu and Opera. So if you do not care about these three, you can use it like a breeze.

🦾 Practical Usage

You might be thinking, hmmmmm... this ok but what is the practical usage of this. During my research for this article I came across an example of a JavaScript framework that is utilising the powers of Proxy and that frameworkkkkkk isssss....

Vue 3 : Vue 3 uses Proxy to be reactive and yes you got it right, Vue 3 does not support IE 😝. Vue 3 uses Proxy for change detection and firing side effects.

If you are not tired after reading my blog I will highly recommend you watch this free video to see full potential of Proxy.

You can play with my solution here

🌳 What to read next

JavaScript Jungle: Curious case of sparse array in JS

Vikas yadav for XenoX ・ Sep 19 '21

#javascript #webdev #beginners #development

JavaScript Jungle: Convert any object to Iterable

Vikas yadav for XenoX ・ Oct 4 '21

#javascript #webdev #react #programming

Thank you for reading.

Follow me on twitter

🖖🏼 References

JS-DS: LinkedList- A JavaScript Implementation

Vikas yadav — Mon, 18 Oct 2021 01:49:59 +0000

In this series which I called JS-DS (JavaScript Data Structure), I will implement various Data Structures in Javascript. The first Data Structure that I am implementing is LinkedList.

One of the widely used data structure is Array in JavaScript. In contrast to Arrays which are inbuilt in JavaScript, LinkedLists is not inbuilt. Let's briefly know what is LinkedList and then deeply dive into the implementation.

LinkedList

@vaidehijoshi in her awesome medium blog post says:

LinkedList is linear data structure, which means that there is a sequence and an order to how it is constructed and traversed.

One of the famous analogy which is given for LinkedList is chain link. You can think of LinkedList as chain link. Each link in the chain is connected to another link to form the whole chain.

Basic building block

As you can see in the picture above, the basic building block of a chain is link, in similar fashion the basic building block of a LinkedList is node.

Node

A node has two parts

Data
Pointer or reference to next node

One of the important thing about node is, it only cares about the data it holds and the pointer to next node. Apart from this it does not know anything about other nodes in LinkedList.

Head

First node of the LinkedList is referred as head. When there is no element in LinkedList, the head is null. Head is the starting point of LinkedList.

Tail

The last node of the LinkedList is referred as tail. The tail of the LinkedList points to null as it is the last element in the list.

In Summery there is three main parts of LinkedList

Head
Node
Tail

Difference between LinkedList and Array

In her blog @vaidehijoshi says:

The biggest differentiator between arrays and linked lists is the way that they use memory in our machine.

Array requires allocation of contiguous memory while in LinkedList the memory allocation is dynamic which means the elements of LinkedList can be anywhere in memory.
When we add or remove element at start of the Array, it needs to shift all the elements (reindex all the items)
When we add or remove items from between the elements, array need to be reindexed again.
When we add more items in the array and it does not have enough memory for items, it will recreate a new array with enough memory (point to note here that it need to find enough contiguous memory again) and copy all the items from the previous array to new array then add our new items.

Adding and deleting items in Arrays is costly operation due to the reindexing, whereas LinkedList do not suffer the same issue.

Implementation of LinkedList

So now when basics are clear. Let's start implementing the LinkedList.

Node

As discussed above, Node has 2 properties:

data : Contains value of element added
next : Pointer to next element

To create a Node we need some element or data that we need to add to LinkedList. In ES 6 we have class so let's use it to implement Node.

// src/linkedlist/model.js

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

Equality of node

Equality of nodes is one thing that we need later in our LinkedList implementation.

Anatomy of equals method:

Take two nodes as params
Perform some operation to decide whether nodes are equal or not
Return a boolean

For a default I am going to write a defaultEquals method which simply compares two nodes with === operator.

// src/linkedlist/utils.js

const defaultEquals = (nodeA, nodeB) => {
  return nodeA === nodeB;
};

LinkedList

Now it's time to write our LinkedList class.

// src/linkedlist/linkedlist.js

class LinkedList {
  constructor(equals = defaultEquals) {
    this.equals = equals;
    this.head = null;
    this.count = 0;
  }
}

As you can see LinkedList constructor will take an equals methods which is equal to defaultEquals. If user of the LinkedList want to override the equals, he/she can provide his/her own implementation of the equals method.

We initialise 3 internal properties of LinkedList :

equals : Which is initialised as passed defaultEquals methods
head: Pointer to the start of LinkedList. Initialised as null
count : Keep count of number of elements in LinkedList. Initialised as 0

Methods of LinkedList

add(element): Takes an element and add it to the list
insertAt(element, index): Adds the element at the specified index
addFirst(element): Takes an element and add it to start of the list
getAt(index): Return the element at the specified index
indexOf(element): Returns index of the passed the element. If the element do not exist in list it returns -1
removeAt(index): Removes the element at the specified index and return the removed element
remove(element): Removes the element if it exist in list and returned the removed element
size: A getter method which return size of the list
isEmpty(): Return true if list is empty otherwise return false
clear(): Clears the list
toString(): Return the string representation of the list

add(element)

Steps:

Create the new Node for the passed element.
Check if the list is empty i.e. size === 0. If yes then it is easy we just assign the node to the head

If list is not empty we need to go through the whole list to reach to the end of the list. As we know that the last element always points to null so that will be our breaking condition.
After we find last node, we simply assign the newly created node to the next of last node

Last but not the least we need to increase the count of the list.

// src/linkedlist/linkedlist.js

add(element) {
    const node = new Node(element);
    if (this.size === 0) {
      this.head = node;
    } else {
      let currentNode = this.head;
      while (currentNode.next !== null) {
        currentNode = currentNode.next;
      }
      currentNode.next = node;
    }

    this.count++;
  }

insertAt(element, index)

Steps:

First thing we check that the passed index is within the bounds i.e. between 0 and size. For this I have written an utility method _isIndexWithinBound

 _isIndexWithinBound(index) {
    return index >= 0 && index <= this.count;
  }

If it is not in bounds then we simply throw a Error that the provided index is out of bound
If the index is within the bounds of list then
Create the new Node for the passed element.
If we want to add the element to start of the list i.e. index === 0 then we simply need to point the head to our newly created node and then point the next of new node to the old head

        const currentNode = this.head;
        node.next = currentNode;
        this.head = node;

If the index is not 0 then we need to find the previous node of the provide index. We need to find it because we need to break the link between previous node and the node at the provided index. To find previous node, I have implemented a utility method _getNodeAt(index), which return node at the provided index.
In _getNodeAt(index) we start from head and loop until we reach the specified index. Once we reach that index we return the node. If the head is null then we return undefined.

 _getNodeAt(index) {
    if (this._isIndexWithinBound(index)) {
      let currentNode = this.head;
      for (let i = 0; i < index && currentNode !== null; i++) 
      {
        currentNode = currentNode.next;
      }
      return currentNode;
    }
    return undefined;
  }

After we find the previous node using _getNodeAt(previousIndex) then we point the next of previous node to our newly created node and next of our newly created node to the existing node at that index.

        const previousNode = this._getNodeAt(index - 1);
        node.next = previousNode.next;
        previousNode.next = node;

At last we increase the count and return true to specify that the operation is success.

In summery whole insertAt will be like this

// src/linkedlist/linkedlist.js

insertAt(element, index) {
    if (this._isIndexWithinBound(index)) {
      const node = new Node(element);

      if (index === 0) {
        const currentNode = this.head;
        node.next = currentNode;
        this.head = node;    
      } else {
        const previousNode = this._getNodeAt(index - 1);
        node.next = previousNode.next;
        previousNode.next = node;
      }
      this.count++;
      return true;
    }
    throw new Error(
      `IndexOutOfBoundError: Provided index ${index} is not 
        within bounds[${0} - ${this.size}] of LinkedList`
    );
  }

addFirst(element):

After implementing insertAt(element, index) it is very easy to implement addFirst. We just need to pass element and index = 0 for adding at the start.

  addFirst(element) {
    return this.insertAt(element, 0);
  }

getAt(index)

To implement getAt(index) we simply use _getNodeAt(index) to get the node at that index and if the node exist then we return data of the node.

  getAt(index) {
    const node = this._getNodeAt(index);
    return node && node.data;
  }

indexOf(element)

Steps

To find index of provided element we start from head.
For every node and use our equals method to check that provided node is equal to our current node or not.
If it is equal to our current node then we return the index.
If head is null or we have visited all the nodes and we do not find any of the elements to be equal to provided node then we return -1.

indexOf(element) {
    let currentNode = this.head;
    for (let i = 0; i < this.count && currentNode != null; 
    i++) {
      if (this.equals(element, currentNode.data)) {
        return i;
      }
      currentNode = currentNode.next;
    }

    return -1;
  }

removeAt(index)

Steps

First we check that the passed index is within bounds of list.
Then we check if the index === 0 means we want to delete first node of list. Then we assign second node (this.head.next) to head.

If index !== 0 then we need to find previous node to provided index. We can find that by using _getNodeAt(index - 1).
Then we point next of previous node to next node of current node (we can find current node by previousNode.next).
Lastly we decrease the count and return data of deleted node.

removeAt(index) {
    if (this._isIndexWithinBound(index)) {
      let currentNode = this.head;
      if (index === 0) {
        this.head = currentNode.next;
      } else {
        const previousNode = this._getNodeAt(index - 1);
        currentNode = previousNode.next;
        previousNode.next = currentNode.next;
      }
      this.count--;
      return currentNode.data;
    }
    return undefined;
  }

remove(element)

Now that we know that how to find index of a given element and we also know how to remove a element at a given index.

Combining these two methods, we can implement remove(element) as follows:

  remove(element) {
    const elementIndex = this.indexOf(element);
    return this.removeAt(elementIndex);
  }

get size()

I have implemented size as getter to make it similar to length property in Array. Implementation is very easy, we just return count of the list

  get size() {
    return this.count;
  }

isEmpty()

If the size of the list is 0 then list is empty.

isEmpty() {
    return this.size === 0;
  }

clear()

To clear a list we simply set head to null and reset the count to 0.

 clear() {
    this.head = null;
    this.count = 0;
  }

toString()

I wanted the string implementation of LinkedList to be similar to Java implementation of toString of LinkedList which is something like this:

If we have added 1, 2 and 3 in LinkedList then toString will return [1,2,3]

To make it simpler, I first made this LinkedList iterable by implementing [Symbol.iterator] generator. If you do not know how to make any object in JavaScript iterable. I highly recommend this Convert any object to Iterable blog. Implementation is as follows :


 *[Symbol.iterator]() {
    let currentNode = this.head;
    while (currentNode) {
      yield currentNode.data;
      currentNode = currentNode.next;
    }
  }

Once our LinkedList is iterable we simply take advantage of ... (spread operator) and convert our linkedlist to array and call toString on it.

 toString() {
    return `[${[...this].toString()}]`;
  }

Whole implementation

import { Node } from "./model";
import { defaultEquals } from "./utils";

export class LinkedList {
  constructor(equals = defaultEquals) {
    this.equals = equals;
    this.head = null;
    this.count = 0;
  }

  add(element) {
    const node = new Node(element);
    if (this.size === 0) {
      this.head = node;
    } else {
      let currentNode = this.head;
      while (currentNode.next !== null) {
        currentNode = currentNode.next;
      }
      currentNode.next = node;
    }

    this.count++;
  }

  _isIndexWithinBound(index) {
    return index >= 0 && index <= this.count;
  }

  _getNodeAt(index) {
    if (this._isIndexWithinBound(index)) {
      let currentNode = this.head;
      for (let i = 0; i < index && currentNode !== null; i++) 
      {
        currentNode = currentNode.next;
      }
      return currentNode;
    }
    return undefined;
  }

  getAt(index) {
    const node = this._getNodeAt(index);
    return node && node.data;
  }

  insertAt(element, index) {
    if (this._isIndexWithinBound(index)) {
      const node = new Node(element);

      if (index === 0) {
        const currentNode = this.head;
        node.next = currentNode;
        this.head = node;
      } else {
        const previousNode = this._getNodeAt(index - 1);
        node.next = previousNode.next;
        previousNode.next = node;

      }

      this.count++;

      return true;
    }
    throw new Error(
      `IndexOutOfBoundError: Provided index ${index} is not 
        within bounds[${0} - ${
        this.size
      }] of LinkedList`
    );
  }

  addFirst(element) {
    return this.insertAt(element, 0);
  }

  addLast(element) {
    return this.insertAt(element, this.count);
  }

  removeAt(index) {
    if (this._isIndexWithinBound(index)) {
      let currentNode = this.head;
      if (index === 0) {
        this.head = currentNode.next;
      } else {
        const previousNode = this._getNodeAt(index - 1);
        currentNode = previousNode.next;
        previousNode.next = currentNode.next;
      }
      this.count--;
      return currentNode.data;
    }
    return undefined;
  }

  indexOf(element) {
    let currentNode = this.head;
    for (let i = 0; i < this.count && currentNode != null; 
    i++) {
      if (this.equals(element, currentNode.data)) {
        return i;
      }
      currentNode = currentNode.next;
    }

    return -1;
  }

  remove(element) {
    const elementIndex = this.indexOf(element);
    return this.removeAt(elementIndex);
  }

  isEmpty() {
    return this.size === 0;
  }

  get size() {
    return this.count;
  }

  getHead() {
    return this.head;
  }

  getTail() {
    return this.getAt(this.size - 1);
  }

  clear() {
    this.head = null;
    this.count = 0;
  }

  *[Symbol.iterator]() {
    let currentNode = this.head;
    while (currentNode) {
      yield currentNode.data;
      currentNode = currentNode.next;
    }
  }

  toString() {
    return `[${[...this].toString()}]`;
  }
}

Thank you for reading.

You can play around the code on Codesandbox

Access the repository on Github

thejsdeveloper / JS-DS-LinkedList

Created with CodeSandbox

JS-DS: LinkedList- JavaScript Implementation

This repository contains implementation of LinkedList in JavaScript.

To know in detail please refer to my blog in JS-DS series.

Setup

Clone the repository

git clone https://github.com/thejsdeveloper/JS-DS-LinkedList.git

Enter into JS-DS-LinkedList directory

cd JS-DS-LinkedList

To Run

yarn start

To run Test Cases

yarn test

Instructions

You can find implementation in /src/linkedlist directory
I have added some test cases in /src/tes directory
I have also added some use cases in /src/index

After running yarn start look into the console of your browser for result

View on GitHub

Read my other articles

Special kind of array in Typescript - Tuple

Vikas yadav for XenoX ・ Sep 26 '21

#javascript #webdev #typescript #react

JavaScript Jungle: Curious case of sparse array in JS

Vikas yadav for XenoX ・ Sep 19 '21

#javascript #webdev #beginners #development

Follow me on twitter

References

@vaidehijoshi's [blog] on LinkedList part-1 (https://medium.com/basecs/whats-a-linked-list-anyway-part-1-d8b7e6508b9d)
@vaidehijoshi's [blog] on LinkedList part-2 (https://medium.com/basecs/whats-a-linked-list-anyway-part-2-131d96f71996)
@vaidehijoshi's video Lecture series on LinkedList
Learning Javascript DataStructure book

JavaScript Jungle: Convert any object to Iterable

Vikas yadav — Mon, 04 Oct 2021 01:16:54 +0000

When ES6 launched, it introduced two important protocols Iterable and Iterator. Basically we can convert any type of object to iterable by implementing these two protocols. By converting the object to iterable we can perform looping with for...of loop. We can also use spread operator in array (which is ... symbol in JS) on these objects. First let's understand these two protocols:

Iterable Protocol:

As per MDN

The iterable protocol allows JavaScript objects to define or customize their iteration behavior, such as what values are looped over in a for...of construct.

In simple terms it is a rule and by following this rule we can do two things:

If an object is already iterable, we can modify it's existing iteration behaviour
If an object is not iterable, we can add iteration behaviour to it.

If you have used JavaScript as a beginner then you have already used one of the famous iterable Arrays. Obviously there are other built in iterables in JavaScript as well. Some of the examples are :

Map
Set
WeakMap
WeakSet

Now the main question comes into picture.

How do we implement this protocol ?

This is very simple. We just need to implement @@iterator. This @@iterator is special property in JS. So to make any object iterable we need to add this @@iterable property to it.

We can get this by using constant symbol [Symbol.iterator]. If you do not known what Symbols are, please read here.

@@iterator should be a simple method with no arguments which will return a value that should comply with iterator protocol.

To summarise, we can convert any object to Iterable by using following steps:

Take an object
Add @@iterable property via [Symbol.iterator]
@@iterable should be a no argument method
Return of @@iterable method should be an iterator.

Before we explore deep into Iterable Jungle. Let's talk about iterator protocol

Iterator protocol:

As per MDN

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.

In plain English:

It is a rule which defines shape of values during iteration.
It also needs to tell us that there are no more values when we have gone through all the values.

To make any object iterator we need to implement next() method which will return an object which should have these two properties to it:

value - value which will be available during iteration
done - boolean value to indicate that there are more values or not

That's quite simple. Isn't it ? here is an example of Infinite Counter iterator

You can create a finite counter iterator as well

Notice how when limit is reached we return done: true. This is to tell the iterator like for...of loop that there is no more values and you can stop the loop.

Now that we know how to implement iterator, let's head back to our iterable and implement it fully.

So for our example we want user to be iterable and return us [key, value] when we iterate through for...of loop. If you try to iterate user in for...of without implementing iterable you will get following error:

TypeError: user is not iterable

So here is a codesandbox implementation of making user iterable:

As you can see, we have added [Symbol.iterator] which intern return an object containing our next() function which implements iterator protocol.

We can reduce some of code if we use as special kind of function called Generator Functions

 // with our own implementation of iterator 
 [Symbol.iterator]: function () {
    const keys = Object.keys(this);
    let index = 0;

    return {
      next: () => {
        if (index < keys.length) {
          const key = keys[index];
          const val = this[key];
          index++;
          return {
            value: [key, val],
            done: false
          };
        }
        return {
          value: undefined,
          done: true
        };
      }
    };
  }


//with Generator function
[Symbol.iterator]: function* () {
    const keys = Object.keys(this);
    for (let i = 0; i < keys.length; i++) {
      const key = keys[i];
      const val = this[key];
      yield [(key, val)];
    }
  }

Generator Functions:

Generator Functions are just a syntactic sugar. In our own implementation of iterator function we need to keep track of internal states like value and done. Generator functions returns a special iterator which is called Generator

Generator functions are declared with function* syntax. And it uses a special keyword yield to give us values over course of iteration.


//definde function with * 

function* counter() {
 //yield something here
}

yield Vs return

yield is very different from return. When we return from a function, it simply means end of execution and we come out of function. Where as when we yield, generator function pauses the execution and keep track of what to yield next. So when we call next again on our generator it will yield next value in line.

Let's take a look of an example

// defined Counter generator
function* Counter() {
  yield 1;
  yield 2;

}
// create an instance of COunter
const counterInstance = Counter();

//first call 
console.log(counterInstance.next()) 
//{done: false, value: 1}

// second call 
console.log(counterInstance.next()) 
//{done: false, value: 2}

// Third call 
console.log(counterInstance.next()) 
//{done: true, value: undefined}

As you can see when we create instance of our generator it return us an iterator. It does following:

When we call next first time it will yield a {done: false, value: 1} and pause.
When we call next again it keeps track of it's state and yield {done: false, value: 2}
When we call last next as there is nothing to yield any more it gives us {done: true, value: undefined}

You can keep on calling next() after it is done, but it will always give you {done: true, value: undefined}.

Now let's use generator for our Infinite Counter

Infinite Counter with Generators

function* InfiniteCounter() {
  let count = 0;
  while(count !== Number.infinity) {
    yield ++count;
  }

}

const counterInstance = InfiniteCounter();

console.log(counterInstance.next()) 
// {done: false, value: 1}
console.log(counterInstance.next()) 
// {done: false, value: 2}
console.log(counterInstance.next()) 
// {done: false, value: 3}

As you can see, with Generator it is a lot cleaner.

You might be thinking, it's all cool. But I do not want to do all this just to make an object Iterable. I have Object.entries I will use that. Give me some good practical example.

So here it is.

Practical example

LinkedList

I am going to implement very basic LinkedList. It only contain following methods

add - To add new elements to LinkedList
size - A getter the size of LinkedList
head - A getter for head node
tail - A getter for tail

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

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

  get size() {
    return this.count;
  }

  add(value) {
    const node = new Node(value);

    if (!this.head) {
      this.head = node;
    } else {
      const tail = this.tail;
      tail.next = node;
    }
    this.tail = node;
    this.count++;
  }

  *[Symbol.iterator]() {
    let currentNode = this.head;
    while (currentNode) {
      yield currentNode.value;
      currentNode = currentNode.next;
    }
  }

  toString() {
    return `[${[...this].toString()}]`;
  }
}

Main portion of code to check is this:

*[Symbol.iterator]() {
    let currentNode = this.head;
    while (currentNode) {
      yield currentNode.value;
      currentNode = currentNode.next;
    }
  }

You can see how I made LinkedList iterable by implementing [Symbol.iterator]. * in front of [Symbol.iterator] makes it a generator and I am yielding the values until whole list is exhausted.

Next portion to look at is toString

toString() {
    return `[${[...this].toString()}]`;
  }

You can see here use take advantage of Spread operator in array of Iterable. I spread it in an array then take advantage of toString of Array object.

Redux Saga

Recently I got to know that one of Redux libraries Saga uses generators heavily.

Some of example used here can be found in this Codesandbox.

Thank you for reading.

Read my other articles

JavaScript Jungle: Curious case of sparse array in JS

Vikas yadav for XenoX ・ Sep 19 '21

#javascript #webdev #beginners #development

Special kind of array in Typescript - Tuple

Vikas yadav for XenoX ・ Sep 26 '21

#javascript #webdev #typescript #react

Follow me on twitter

References

Special kind of array in Typescript - Tuple

Vikas yadav — Sun, 26 Sep 2021 03:27:25 +0000

In strictly typed programming languages, array is a Data structure of homogeneous data types with fixed length. In contrast JavaScript is dynamic. In here, array can have elements of heterogeneous data type and length can vary.

In JavaScript:

const elements = ['rick', 23, false];

const len = elements.length; // len = 3

elements.push({name: 'morty'}); 

const changedLen = elements.length; // changedLen = 4

With Typescript, we can restrict that and force arrays to have homogeneous data type what I mean is this.

In Typescript:

const elements: string[] = ['rick', 'morty'];

const len = elements.length; // len = 2

Now if we try to push number or any other data type other than string in elements then Typescript will yell at us.

const elements: string[] = ['rick', 'morty'];

elements.push(1) // Error
/**
* Error: Argument of type 'number' is not assignable to 
* parameter of type 'string'.
*
*/

Even though Typescript enforces the type but length is still not fixed. We can push another element of type string in elements array.

const elements: string[] = ['rick', 'morty'];

const len = elements.length; // len = 2

elements.push('summer')

const changedLen = elements.length; // changedLen = 3

What if our requirement changes like this:

Requirement 1:

An Array with type number, boolean and string only.

Solution

Well! that is easy, we can use union type with array in Typescript like this:

const elements: Array<number|boolean|string> = ['summer'];

elements.push(23); // ok
elements.push(true); // ok 

console.log(elements) // ["summer", 23, true] 

elements.push({name: 'morty'}) // Not OK : Error
/**
* Error: Argument of type '{ name: string; }' is not 
* assignable to parameter of type 'string | number | 
* boolean'.
*/

One point to note here is:

The sequence of the data type is not fixed as we defined during the declaration. What it means that, we can push number, boolean and string in any order.

For example, This is also perfectly valid and OK with TypeScript:

const elements: Array<number|boolean|string> = [true];

elements.push(23); // ok
elements.push('summer'); // ok 

console.log(elements) // [true, 23, "summer"]

By Array<number|boolean|string>, we only narrowed the type and told Typescript that this collection should only have elements of type number, boolean and string. The order can be anything. Typescript do not mind as long as the type is one of the declared types.

Requirement 2 :

An array with a fixed number of items
type of elements are fixed at each index
The type of elements need not be same at all the index

What did you just say An array with a fixed number items ??

And it can have different type at different index? oh okkkk......

Solution

Actually this is possible with new type called tuple in Typescript.

Tuple - Special kind of Array

As per official docs:

Tuple types allow you to express an array with a fixed number of elements whose types are known, but need not be the same.

Tuple fulfils all the requirements described above. Let's see how can we define a tuple.

/**
* let's define a info of character id, name and activeStatus
*/
 const info: [number, string, boolean] = [33, 'Rick' , true];

An array with a fixed number items

Just by doing this, now we fixed number of elements in info i.e. 3. So now if you try to access the element at index 4 Typescript will yell at you.

 const info: [number, string, boolean] = [33, 'Rick' , true];

const item = info[4] // error
/**
* Tuple type '[number, string, boolean]' of length '3' has no 
* element at index '4'.
*/

// In contrast if we declare an array with union type like
// below, it will be ok to access the element at index 4 

const arr: Array<number|string|boolean>
                 = [33, 'Rick' , true];
const arrItem = arr[4] //undefined

Type of elements are fixed at each index

By defining [number, string, boolean], we have fixed the type of elements at each index. Typescript will infer the type from tuple.

 const info: [number, string, boolean] = [33, 'Rick' , true];
 const item1 = info[0] // type number
 const item2 = info[1] // type string
 const item3 = info[2] // type boolean

 // In contrast, array with union type 

const info: Array<number| string| boolean>
                 = [33, 'Rick' , true];

// type of items can be either string, number or boolean

 const item1 = info[0] // type string | number | boolean
 const item2 = info[1] // type string | number | boolean
 const item3 = info[2] // type string | number | boolean

Advantage of doing this is, I can get all the methods available to string for item2.

The type of elements need not be same at all the index

The type of elements in tuple can be same as well as different:

const a: [number, string, boolean] = [33, 'Rick' , true];
const b: [string, string, string] = ['Mr', 'Rick' , 'alive'];

Practical example:

You might be thinking, it looks great but where do we use it.

One of the examples that I can think of is in our custom hooks where we have to return an array consisting values of different data type. Take for example useToggle custom hook

import { useCallback, useState } from "react";

export const useToggle = (
  intialValue: boolean = false
): [boolean, () => void] => {
  const [state, setState] = useState(intialValue);

  const setToggle = useCallback(
       () => setState((flag) => !flag), 
   []);

  return [state, setToggle];
};

Here we have to return current status of toggle and a function to change the status. That's why, the return type is a tuple [boolean, () => void].

If we simply return an array, and assign the second argument i.e. setter function to onClick, Typescript will throw a compile time error as the return type is union of boolean and () => void .

Type 'boolean | (() => void)' is not assignable to type 

'((event: MouseEvent<HTMLButtonElement, MouseEvent>) 
    => void) 
   | undefined'.

You can checkout these examples here:

Thank you for reading.

Read my other TypeScript articles

Unknown and any type in Typescript

Follow me on twitter

References

JavaScript Jungle: Curious case of sparse array in JS

Vikas yadav — Sun, 19 Sep 2021 11:16:12 +0000

I have never heard about sparse array before one of my colleagues shared this interesting issue.

 const range = new Array(10).map((_, i) => i);

This code looks good to me. What can go wrong!! It should create the array of length 10 which will have values ranging from 0 - 10.

[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Let's see....

Output

Whhaaaatttt on the earth is that output.....!!!!

The length of the array is 10 but when we try to access the value at index 0 the output is undefined. Same for other indices.

Ok. That is super weird. Next thing that usually comes to mind is this:

map isn't working. Let's use forEach.

 const range = [];
 new Array(10).forEach((_, i) => range.push[i]);

Output

Nooooooooooo!!

Earlier, at-least we had length 10 which was what we expected. But now we lost that too. As you can see above in the output that length of range is 0 and since length is 0 that's why no element at any indices, that's why we get undefined at range[0]

Code looks correct, then why is it that output is unexpected.

Actually all these unexpected behaviour is caused by sparse array.

OK. So what on earth is sparse array ?

Enter the maze

Sparse Array

Any array will be sparse array if one of the values at any given index is empty

Empty value does not mean undefined or null. Empty mean that there is no value at all.

So in above example if I print range in chrome browser console. This will be the output:

Basically new Array(length) will create an array of specified length but all the values will be empty. It's like array has holes in it.

You can create the sparse array by following:

const range = [,,,];
const numbers = [1,2,,4];
const planets = ['earth', 'venus', 'mars'];
delete planets[1]; 
// when we delete element at certain index it creates a hole

Output

Explanation of the real issue

Now we know about sparse array. So let's begin with our initial problem.

Scenario 1 : map

 const range = new Array(10).map((_, i) => i);

So here new Array(10) will create a sparse array of length 10.

(10) [empty × 10]

Now what will happen when we call map on sparse array ?
As per MDN Docs

Due to the algorithm defined in the specification, if the array which map was called upon is sparse, resulting array will also be sparse keeping same indices blank.

As our whole array is sparse that is why resulting array is also sparse and all the values are blank or empty.

If we have following code, result will be different

[1,2,,4].map((num, i) => i * num)

Output

As you can see that callback of map does not do anything on the index which is empty.

Scenario 2: forEach

 const range = [];
 new Array(10).forEach((_, i) => range.push[i]);

As per MDN Example

No operation for uninitialised values (sparse arrays)

Which simply means that the callback will not be invoked for empty values.

As our whole new array is sparse, callback will be skipped for all the elements and no value is pushed to range array.

Other ways to create range

With Array.from

 Array.from({length: 5}, (_, i) => i);

With new Array(length) and fill

  const a = new Array(3).fill(0).map((_, i) => i)

Output

Thank you for reading.

Follow me on twitter

JavaScript Jungle: Convert any object to Iterable

Vikas yadav for XenoX ・ Oct 4 '21

#javascript #webdev #react #programming

References

MDN Array
2ality
Freecodecamp article

World of Any and Unknown in Typescript

Vikas yadav — Sun, 12 Sep 2021 09:59:41 +0000

Apart from the primitive types i.e. string, number, boolean ,null and undefined, there are two special types in TypeScript :

Any
Unknown

Most of us are familiar with any type because that is the first thing we commonly use when we could not find a type or we feel lazy to write the type for a big and complex object.

For those who are seeing this first time. Here is a short brief on any:

Any

If you want to avoid type checking and you do not want typescript to complain about it you can simply use any type. As the name suggests, any accepts all the types. It is also known as top type.

The top type is sometimes called also universal type, or universal supertype as all other types in the type system of interest are subtypes of it.

Syntax

Implications of assigning any type

You can assign anything to any typed variable.

You can also assign any typed variable to other type of variables.

You can assess the properties which do not exist on any typed variable.

You can call any typed variable as function, even if it is not a function.

Word of wisdom

Use any type as last resort because it takes away all the power that is provided by typescript

Enter the world of unknown

unknown type is first introduced in Typescript 3.0. It is also another top type in Typescript. As per official docs:

unknown is the type-safe counterpart of any

It is similar to any because it can accept all types of values. It enforces a bit more restriction than any because you cannot perform any action on unknown typed variable without type assertion or narrowing it to more specific type.

Syntax

Implications of assigning unknown type

You can assign anything to unknown typed variable.

unknown typed variable is only assignable to unknown or any type.

You can not perform any operations without narrowing or type assertion.

Only equality operators are allowed with unknown

You cannot create rest from unknown type

Union with unknown and other types produces unknown type with an exception of union with any which produces any type

When taking Intersection with unknown, it is absorbed by other types.

Perform operation on unknown type

Before performing any operation on unknown type we need to narrow it down using typeof or instanceof operator. We can also use type assertions with as or we can provide a custom function which acts as type guard

Using typeof

Using instanceof

Using type assertion

Example

LocalStorage

Following is an example of saving data into localStoarage. As anything can be saved in localStorage that's why the type of data is unknown.

Params to a http request

Word of wisdom

Use unknown before trying to use any

References