Forem: vedanth bora

I Built a CLI That Gives Your LLM Accurate Library Docs — No MCP Server Needed

vedanth bora — Mon, 02 Mar 2026 10:23:24 +0000

The Problem

You're building with Next.js 15 and ask your AI assistant to write an API route. It gives you the Pages Router pattern from Next.js 12. You paste React docs into the prompt, but they're already outdated by the time you copy them.

Context7 solved this by indexing documentation directly from source repos and serving it through an MCP server. Cursor, Claude Code, and other AI editors use it to get real, version-specific docs instead of hallucinated APIs.

But MCP has a constraint: you need an MCP-compatible client. If you're working in the terminal, running a script, or using a local LLM — you're out of luck.

The Solution

I built c7 — a CLI that pulls from the same Context7 database and outputs docs as plain text to stdout.

c7 react hooks
c7 express middleware
c7 nextjs "app router"

That's it. No server, no configuration, no IDE integration. Just text you can pipe anywhere.

How It Works

The CLI does two things:

Resolves a library name to a Context7 ID (e.g., react → /websites/react_dev)
Fetches documentation for that library, filtered by topic

Under the hood it's two API calls using Node.js built-in fetch against Context7's v2 API. The entire project is ~220 lines across two files with zero dependencies.

bin/c7.js   — 136 lines (CLI parsing + output formatting)
lib/api.js  —  87 lines (Context7 v2 API client)

No axios. No commander. No chalk. Just process.argv and fetch.

The Real Power: Pipes

Because c7 outputs plain text to stdout, it composes with everything:

Pipe into LLMs

# Claude
c7 react hooks | claude "summarize the key patterns and show examples"

# Ollama (local models)
c7 express middleware | ollama run codellama "explain this middleware pattern"

# Any LLM CLI
c7 nextjs "api routes" | llm "write an API route based on these docs"

Pipe into Unix tools

# Search docs
c7 nextjs "api routes" | grep "export"

# Page through docs
c7 prisma "schema" | less

# Copy to clipboard
c7 react "useEffect" | pbcopy

# Build context files
c7 nextjs "app router" >> context.txt
c7 react "server components" >> context.txt

Use in scripts

# Pre-load context for a coding agent
DOCS=$(c7 nextjs "app router middleware")
claude "Build a Next.js middleware that handles auth. Use these docs:\n$DOCS"

c7 vs MCP Server

	MCP Server	c7 CLI
Setup	Install server, configure MCP client, restart editor	`npx @vedanth/context7`
Works in	MCP-compatible editors	Terminal, scripts, CI, anywhere
Composable	Limited to MCP protocol	Pipes, redirects, subshells
Dependencies	Several npm packages	Zero
Lines of code	~1000+	~220

They're complementary. Use the MCP server in your editor, use c7 everywhere else.

Getting Started

# Run without installing
npx @vedanth/context7 react hooks

# Or install globally
npm install -g @vedanth/context7
c7 react hooks
c7 express middleware
c7 nextjs "app router" | claude "summarize"

No API key required for basic usage. For higher rate limits, get a free key at context7.com/dashboard.

Currying in JavaScript

vedanth bora — Fri, 28 Oct 2022 13:39:47 +0000

What is Currying?

Currying is a function that takes one argument at a time and returns a new function expecting the next argument. It is a conversion of functions from callable as f(a,b,c) into callable as f(a)(b)(c).

Currying doesn’t call a function. It just transforms a function. They are constructed by chaining closures by immediately returning their inner functions simultaneously.

How does currying work?

Currying is a function that takes multiple arguments as input. It transform the function into a number of functions where every function will accept one argument.

Let’s understand this with examples

***Convert f(a, b) into f(a)(b)*

/* f(a,b) implementation */

function f(a,b) {
    return a + b
}

/* f(a)(b) implementation */

function f(a) {
    return (b) {
          return a + b
        }
}

console.log(f(1)(2)) // 2
console.log(f(1)); /* () => {} */        // will retrun a function

/*Simple function*/ 
const add = (a, b, c)=>{
    return a + b + c
}

console.log(add(1, 2 ,3)); // 6

/* Curried Function */

const addCurry = (a) => { // takes one argument
    return (b) => {                 //takes second argument
        return (c) => {             //takes third argument
            return a + b + c
        }
    }
}

console.log(addCurry(1)(2)(3)); //6

A currying function that takes infinite arguments.

const sum = function(a) {
    return function(b) {
        if (b) {
            return sum(a + b);
        } else {
            return a;
        }
    }
}

// sum(1)(2)(3)....()

How can we manipulate DOM using currying?

<div>
  <h1 id="header">Hello World</h1>
</div>

want browser to show "Hello Currying" instead of "Hello World".

Let's try it using currying.

Steps:

1️⃣ Take the id of the element as one argument and the content inside the element as another argument.

const updateElemText = (id) => (content) => document.querySelector(`#${id}`).textContent= content;

2️⃣ Now call the function with element id and and the content

const updateHeaderText = updateElemText('header');

updateHeaderText('Hello Currying!');

What is showing up on the browser? 👀

Hope this blog helped you understand currying better.

Let’s understand map, filter and reduce by writing polyfills for them.

vedanth bora — Fri, 28 Oct 2022 12:42:29 +0000

Intro

In this blog we will understand how map , filter and reduce work by writing polyfils for them.

A polyfill is a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it.

map

The map() method creates and returns a new array populated with the results of calling a provided function on every element in the calling array.

Parameters

Return Value

const array = [1, 2, 3, 4];

// pass a function to map
const mapResult = array.map(x => x * 2);

console.log(mapResult);
// output: Array [2, 4, 6, 8]

Let’s understand this by writing a polyfill for map.

Array.prototype.myMap = function (callbackFunction) {
        let newArray = []

        for ( let i = 0; i < this.length; i++ ) {

                newArray.push(callbackFunction(this[i], i, this))

        } 
    return newArray
}

filter

The filter()method creates a new array filled with elements that pass a the callback provided. It creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided callback function.

Parameters

Return Value

const array = [1, 2, 3, 4];

// pass a function to filter
const filterResult = array.map(x => x > 2);

console.log(filterResult);
// output: Array [1,2]

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

Let’s understand this by writing a polyfill for filter

Array.prototype.myFilter = function (callbackFunction) {
        let newArray = []

        for ( let i = 0; i < this.length; i++ ) {

              if(callbackFunction(this[i], i, this)) {
                        newArray.push(this[i])
                }

        } 

   return newArray
}

reduce

The reduce() method executes a "reducer" callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.

The first time that the callback is run there is no "return value of the previous calculation". If supplied, an initial value may be used in its place. Otherwise the array element at index 0 is used as the initial value and iteration starts from the next element (index 1 instead of index 0).

Lets understand this by adding a array of numbers

const array = [1, 2, 3, 4];

const initialValue = 0;

const reducer = (previousValue, currentValue) => previousValue + currentValue

// 0 + 1 + 2 + 3 + 4
const sum = array.reduce(reducer,initialValue);

console.log(sum);
// expected output: 10

Parameters

Return Value

Let’s understand this by writing a polyfill for reduce

Array.prototype.myReduce = function (reducerCallback, initialValue) {
        let accumulator = initialValue 

        for ( let i = 0; i < this.length; i++ ) {

              accumulator = accumulator ? reducerCallback(accumulator, this[i], i, this) : this[0]

        } 

   return accumulator
}

map vs forEach

Both map and forEach are methods that let us loop through an array and execute a callback function.

The main difference between map and forEach is that map returns an array but forEach does not.

const array = [1,2,3,4,5]

const mapResult = array.map(x => x + 1)

const forEachResult = array.forEach(x => x + 1)

console.log(mapResult) // [2,3,4,5,6]

console.log(forEachResult) // undefined

The forEach callback function still runs but it just does not return anything, it returns undefined.

conclusion

The map() method creates and returns a new array populated with the results of calling a provided function on every element in the calling array.
The filter()method creates a new array filled with elements that pass a the callback provided. It creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided callback function.
The reduce() method executes a "reducer" callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.
Both map and forEach are methods that let us loop through an array and execute a callback function. The main difference between map and forEach is that map returns an array but forEach does not.

Call, Bind And Apply in JavaScript with pollyfills.

vedanth bora — Fri, 28 Oct 2022 09:36:41 +0000

Intro

In this article, we will discuss three of the most important concepts in JavaScript: call, bind and apply along with their pollyfils. We will see how these concepts can be used to write better code.

Call

The call() method is used to call a function with a given this value and arguments provided individually.

For example, consider the following code:

const personDetails = {
  name: 'Jane',
  hello(age) {
    console.log("Hello " this.name + '! age:' + age);
  },
};

console.log(personDetails.hello("21")); // Hello, Jane! age: 21

But what if we wanted to call the hello() function with a different this value, in other words with a different object / context. We can use the call() method to do this


const personDetails = {
  name: 'Jane',
  hello(age) {
    console.log("Hello " this.name + '! age:' + age);
  },
};

const newPersonDetails = {
  name: 'John',

};

console.log(personDetails.hello.call(newPersonDetails, "26)); // Hello, John! age: 26

As we can see, the call() method takes two arguments: the first argument is the value of this, and the second argument is the age that should be used in the hello() function.

Let’s take a look at some more examples to understand this better.

function Product(name, price) {
  this.name = name;
  this.price = price;
}

function Food(name, price) {
  Product.call(this, name, price);

  this.category = 'food';
}

function Toy(name, price) {
  Product.call(this, name, price);

  this.category = 'toy';
}

const cheese = new Food('feta', 5);

const fun = new Toy('robot', 40);

pollyfill for call

This pollyfil for bind is fairly simple, its a function with takes the context or this value and the arguments the function should be called with and executes the function

Function.prototype.myCall = function (obj = {}, ...args) {
  if (typeof this !== 'function') {
    throw new Error(this + ' cannot be bound as this is not callable');
  }

  obj.fn = this;

  obj.fn(...args); // call the function with the args and the context provided
};

Bind

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

For example, consider the following code:

const personDetails = {
  name: 'Jane',
  hello(age) {
    console.log("Hello " this.name + '! age:' + age);
  },
};

const newPersonDetails = {
  name: 'John',

};

const newPersonDetailsHello = personDetails.hello.bind(newPersonDetails, "26")

console.log(newPersonDetailsHello()) // Hello, John! age: 26

Lets take a look at a few more example to understand better

this.x = 9; // 'this' refers to the global object (e.g. 'window') in non-strict mode

const module = {
  x: 81,
  getX() {
    return this.x;
  },
};

module.getX();
//  returns 81

const retrieveX = module.getX;
retrieveX();
//  returns 9; the function gets invoked at the global scope

//  Create a new function with 'this' bound to module
//  New programmers might confuse the
//  global variable 'x' with module's property 'x'
const boundGetX = retrieveX.bind(module);

boundGetX();

//  returns 81
Copy to Clipboard

Pollyfill for bind

The polyfill for bind is similar to call only difference is that it returns a function which is called with the this value and arguments provided

Function.prototype.myBind = function (obj = {}, ...args) {
  if (typeof this !== 'function') {
    throw new Error(this + ' cannot be bound as this is not callable');
  }

  obj.fn = this;

  return () => {
    return obj.fn(...args);
  };
};

apply

The apply() method is similar to call() method but calls the specified function with a given thisvalue, and argumentsprovided as an array.

For example, consider the following code:

const personDetails = {
  name: 'Jane',
  hello(age) {
    console.log("Hello " this.name + '! age:' + age);
  },
};

const newPersonDetails = {
  name: 'John',

};

console.log(personDetails.hello.call(newPersonDetails, ["26"])); // Hello, John! age: 26

Lets take a look at a more examples

const array = ["a", "b"];

const elements = [0, 1, 2];

array.push.apply(array, elements);

console.info(array); // ["a", "b", 0, 1, 2]

pollyfill for apply

The polyfill for bind is similar to call() only difference arguments provided are in array

Function.prototype.myApply = function (obj = {}, args = []) {
  if (typeof this !== 'function') {
    throw new Error(this + ' cannot be bound as this is not callable');
  }

  obj.fn = this;

  obj.fn(...args);
};

Hope this blog helped you understand the difference between call() bind() and apply().

Debouncing and Throttling in JavaScript

vedanth bora — Tue, 25 Oct 2022 08:42:32 +0000

Intro

Debouncing and Throttling are performance optimisation techniques, both of them control how many times we allow a function to be executed over time

What is debouncing ?

Debouncing is an approach to rate-limiting a function in JavaScript. It is a technique that is often used to improve performance, by ensuring that a function is only executed once within a given time period.

It is most commonly used when attaching event handlers to scroll, resize or keypress events.

There are a number of ways to implement debouncing, but the most common is to use a setTimeout() function.

For example, when a user is scrolling through a web page, there is no need to execute a function on every scroll event. Instead, we can debounce the function so that it is only executed once the user has finished scrolling.

Let’s understand this with an example. Let’s say we have a autocomplete search input.

Type in the input to see how many times fetch data is being called.

const input = document.getElementById("input");
const output = document.querySelector(".output");

let counter = 0;

const getData = () => {
  console.log("fetch data");
  counter++;
  output.innerText = "fetch data " + counter++;
};

input.addEventListener("keyup", getData);

We can see that there are too many fetchData calls because the keyup event is fired every time the user types, this results in unnecessary calls to the api. We can solve this problem by using Debouncing. What we want to do is we want the getData function to execute after the user as stopped typing.

Let’s do this by implementing our own debounce function

const myDebounce = (callback, delay = 250) => {
  let timer;

  return (...args) => {
    if(timer) clearTimeout(timer)

    timer = setTimeout(() => {
      callback(...args)
    }, delay)
  }
}

Now we need to pass the getData function as a callback in the myDebounce function we have just written .

const input = document.getElementById("input");
const output = document.querySelector(".output");

let counter = 0;

const getData = () => {
  console.log("fetch data");
  counter++;
  output.innerText = "fetch data " + counter++;
};

const myDebounce = (callback, delay = 250) => {
  let timer;

  return (...args) => {
    if(timer) clearTimeout(timer)

    timer = setTimeout(() => {
      callback(...args)
    }, delay)
  }
}

input.addEventListener("keyup", myDebounce(getData));

You can see the difference in this code pen compared to the one earlier without debouncing.

Lets take a look another example of debouncing on a scroll event, the event is fired 100ms after the user has stopped scrolling

So debouncing is a technique that will executed a function once the user has stopped interacting with the page for the specified period of time.

What is throttling ?

Throttling is a technique for rate-limiting a function in JavaScript. It is similar to debouncing, but instead of waiting for the user to stop interacting with the page, it is executed at a fixed interval.

This interval is known as the "throttle interval".

There are a number of ways to implement throttling, but the most common is to use a setInterval() function.

Throttling is most commonly used when attaching event handlers to scroll, resize or keypress events.

For example, when a user is scrolling through a web page, we may only want to execute a function every 100 milliseconds. This would ensure that the function is not executed on every scroll event, but at a throttled rate.

This can be useful for things like recalculating positions or dimensions, or even making Ajax requests.

Let’s look at the scroll example without throttling. We can see that the event is fired may times in less than one second and this is again an expensive operation and hampers performance. We can solve this using throttling.

The way throttling works is by executing a function at a fixed interval. Let’s write our own throttle function

const myThrottle = (callback, delay = 250) => {
        let last = 0

        return (..args) => {
                let now = new Date().getTime()

                if(now - last < delay) return 

                last = now

                return callback(..args)

        }
}

Now let’s look at the scroll example but with throttling.

Throttling vs debouncing

At first glance, throttling and debouncing may seem like similar techniques. However, there are a few key differences between the two

Debouncing	Throttling
Debouncing ensures that a function is only executed once the user has stopped interacting with the page.	Throttling ensure a function is executed at a fixed interval.

Memoization In JavaScript

vedanth bora — Tue, 19 Jul 2022 08:00:54 +0000

Memoization is a performance optimization technique used to speed up programs by storing the results of expensive function calls and returning the cached results when the same inputs occur again.

In JavaScript, memoization can be used to speed up recursive functions that call the same values multiple times. By storing the results of the function calls, we can avoid having to recalculate them each time, which can lead to significant performance gains.

For example, consider the following recursive function that calculates the nth Fibonacci number:

function fib(n) {
  if (n <= 1) {
    return n;
  }
    return fib(n - 1) + fib(n - 2);
 }

This function works by recursively calling itself with different values for n. The first time it's called, it will calculate the Fibonacci numbers for n = 0 and n = 1. The second time it's called, it will calculate the Fibonacci numbers for n = 1 and n = 2. And so on.

Each time the function is called, it must recalculate the Fibonacci numbers for n - 1 and n - 2. However, many of these values have already been calculated in previous function calls. For example, when calculating the Fibonacci number for n = 5, the function must calculate the values for n = 3 and n = 4 even though they were already calculated when n = 4 was calculated.

This calculation is wasted effort because the values don't change between function calls. We can avoid this wasted effort by memoizing the results of the function calls. Memoization is a technique for caching the results of function calls and returning the cached results when the same inputs occur again.

We can memoize the fib function by adding a cache as a global variable:

var cache = {};

function fib(n) {
   if (n <= 1) {
     return n;
   }

   if (!(n in cache)) {
     cache[n] = fib(n - 1) + fib(n - 2);
   }

  return cache[n];
}

Now, when the function is called, it will first check to see if the result is already cached. If it is, it will return the cached result. If it's not, it will calculate the result and cache it before returning it.

This technique can be used to speed up any recursive function that calls the same values multiple times. However, it's important to note that memoization only provides performance gains if the function is called multiple times with the same inputs. If the function is only called once, or if it's called with different inputs each time, memoization will actually slow down the program

Some other common use cases for memoization include caching the results of database queries, API calls, and computationally expensive functions..

One potential pitfall of memoization is that it can use up a lot of memory if the function is called with a large number of different inputs. In our Fibonacci example, the cache could potentially grow to contain the results of every Fibonacci calculation from 0to n. For very large values of n, this could use up a significant amount of memory.

Another potential issue is that memoized functions can be difficult to debug because the cached results are stored outside of the function. This can make it hard to track the flow of execution through the code.

Overall, memoization is a powerful performance optimization technique that can speed up recursive functions by storing the results of previous function calls. However, it's important to use memoization wisely to avoid potential memory and debugging issues.

Another example of memoization is to use a closure to create a cache that is available to the function being memoized:

var memoize = function(fn) {
  var cache = {};

  return function(x) {

    if (cache[x] === undefined) {
      cache[x] = fn(x);
     }

    return cache[x];
   };
};

This implementation can be used to memoize any function, as long as it only takes a single argument. To use it, simply wrap the function to be memoized with a call to memoize:

var factorial = memoize(function(n) {
  if (n === 0) {
   return 1;
   }
   return n * factorial(n - 1);
});

This implementation has a number of advantages. First, it is very simple and easy to understand. Second, it is completely general, meaning that it can be used to memoize any function, no matter how complex.

However, this implementation also has a few drawbacks. First, it only works for functions that take a single argument. Second, it is not very efficient, because it requires the function to be memoized to be called twice in order to retrieve the cached value.

A more efficient implementation of memoization can be achieved by using an object as a cache, and using the Function.prototype.apply method to call the memoized function with the arguments passed in:

var memoize = function(fn) {
  var cache = {};

 return function() {
     var key = JSON.stringify(arguments);

     if (cache[key] === undefined) {
        cache[key] = fn.apply(this, arguments);
     }

         return cache[key];
        };
};

This implementation can be used to memoize any function, no matter how many arguments it takes. To use it, simply wrap the function to be memoized with a call to memoize:

var factorial = memoize(function(n) {
  if (n === 0) {
   return 1;
   }
   return n * factorial(n - 1);
});

This implementation is more efficient than the previous one because it only requires the function to be memoized to be called once. In addition, it can be used to memoize any function, no matter how many arguments it takes.

The disadvantage of this implementation is that it is more complex, and therefore more difficult to understand. In addition, it is not possible to use the same cache for multiple functions, because the cache key is specific to the arguments passed to the function.

A final way to implement memoization in JavaScript is to use the Map data structure:

var memoize = function(fn) {

var cache = new Map();

return function(x) {
    if (!cache.has(x)) {
                cache.set(x, fn(x));
        }

    return cache.get(x);
  };
};

Conclusion

As you can see, memoization is a simple technique that can be used to improve the performance of JavaScript programs. By memoizing expensive function calls, we can avoid having to perform the computations multiple times, which can give our program a significant performance boost.

JavaScript Testing 101

vedanth bora — Sun, 17 Jul 2022 06:37:24 +0000

The goal of a test is to increase your confidence that the subject of your test is functioning the way it should be. Not all tests provide the same level of confidence (some provide very little confidence at all). If you’re not doing things correctly, you could be wasting your time and giving yourself a false sense of security (even worse than having no tests at all).

A software bug is an error, flaw or fault in the design, development, or operation of computer software that causes it to produce an incorrect or unexpected result, or to behave in unintended ways. The process of finding and correcting bugs is termed "debugging" and often uses formal techniques or tools to pinpoint bugs. Since the 1950s some computer systems have been designed to deter, detect or auto-correct various computer bugs during operations.

The Middle English word bugge is the basis for the terms "bugbear" and "bugaboo" as terms used for a monster.

The term "bug" to describe defects has been a part of engineering jargon since the 1870s[7] and predates electronics and computers; it may have originally been used in hardware engineering to describe mechanical malfunctions. For instance, Thomas Edison wrote in a letter to an associate in 1878:

... difficulties arise—this thing gives out and [it is] then that "Bugs"—as such little faults and difficulties are called—show themselves[9]

The First "Computer Bug" Moth found trapped between points at Relay # 70, Panel F, of the Mark II Aiken Relay Calculator while it was being tested at Harvard University, 9 September 1947. The operators affixed the moth to the computer log, with the entry: "First actual case of bug being found". (The term "debugging" already existed; thus, finding an actual bug was an amusing occurrence.) In 1988, the log, with the moth still taped by the entry, was in the Naval Surface Warfare Center Computer Museum at Dahlgren, Virginia, which erroneously dated it 9 September 1945. The Smithsonian Institute's National Museum of American History and other sources have the correct date of 9 September 1947

The term bug is used to describe a problem in a system. And we write a lot of systems now in code with software. And we find bugs in our systems all the time. It's one of the fun things about software is it's so fluid. And that fluidity is a great opportunity for bugs to sneak into things.

So we're finding bugs a lot more than they used to find moths in relays. But yeah, this is what a bug is and we don't want bugs in our software. So what kind of bugs are there? What kind of bugs do you find in software?

There are security bugs. What other kind of bugs can you find in software? What's the bug that you found yesterday cuz you find them all the time? What kind of bugs? Memory leaks, logic bugs. Integration bugs, you're talking to Twitter's API or something. There's a bug in that integration or even your own APIs. Race conditions, No pointer exception. Accessibility.

There are lots and lots of different kinds of bugs. And this isn't a comprehensive list or anything, but bugs can surface in all areas of our software.

So what do we do about these bugs? How do we prevent these bugs from happening? So using a type checker in JavaScript? Like TypeScript or Flow? I highly recommend that you leverage static typing in your Javascript. It will just take away a whole category of bugs that could appear in your software. It will also take you a lot longer to write JavaScript because it sometimes adding types to Javascript is really frustrating.

But in general, it makes your software better and so I definitely recommend static typing. This is also a form of static analysis. Linting, ESLint is a fantastic tool. If you're not using ESLint, I recommend you do. If you're using ESLint to check style, code style, please stop. We don't need that.

We have prettier formatted all. ESLint's job should be to catch common bugs that static type checkers can't catch. And lots of that involves domain specific things like in our code base, we can't do this because of this other thing or whatever. So you can write a custom ESLint rule for that.

So and ESLint also has a bunch of rules that are useful that static types don't generally catch, type checkers don't catch. So linting is another form of testing, and these two things are generally pretty easy to set up. And so I definitely recommend using these things.

So then testing is the next thing, the next layer of defense. ESLint can't catch logic errors. Type checking can't catch logic errors, anything like that. And so there's still a big category of bugs that we need to catch with testing.

So what kinds of test are available to us, these automated tests? I'll give you a hint, there's unit tests, what other kinds?

Or yeah, or the text is way longer in language x than English or something. So yeah, there's some things you can do to automate that, and then a whole bunch of other things. We're not gonna cover all of these. It would take weeks to cover all of these with any amount of depth.

So yeah, we're gonna focus on just a couple of these. So this is an example of static code analysis. 'three' is not defined. ESLink can save us from that. And then Flow can tell us, hey, well, three is defined, but it's a string. It should be a number.

Static code analysis

And so it can tell us that these types are incompatible with each other. Unit tests, this is a basic unit test. We've got a little function here and we call it and we did a value back. That's the simplest form of a code automated test that I can think of.

Unit Tests

function sum(a, b) {
  return a + b
}

test('sum adds numbers', () => {
  expect(sum(1, 3)).toBe(4)
})

And we're gonna be seeing what that test function and what that expect function are supposed to do. We'll be writing it ourselves. But that's, yeah, that's basic unit test. Integration test are generally a little bit more complicated. You have to start up the server, and then you have to hit an endpoint or something like that.

Integration Tests

let api, server

beforeAll(async () => {
  server = await startServer()
  const {port} = server.address()
  api = axios.create({
    baseURL: `http://localhost:${port}/api`
  })
})

afterAll(() => server.close())

beforeEach(() => resetDb())

test('can register a user', async () => {
  const registerData = {username: 'bob', password: 'wiley'}
  const testUser = await api
    .post('auth/register', registerData)
    .then(response => response.data.user)
  expect(testUser.username).toBe(registerData.username)

  const readUserUnauthenticated = await api
    .get(`users/${testUser.id}`)
    .then(response => response.data.user)
  expect(readUserUnauthenticated).toEqual(testUser)
})

Maybe you have to have a database up and running. And so often these integration tests can be more complicated. This is for bank and stuff. You could also have integration tests on the UI that is mocking out all server requests and stuff, but is integrating how your UI is interacting with itself.

End to end Tests

import {assertRoute} from '../utils'

describe('authentication', () => {
  it('should allow users to register', () => {
    const user = {username: 'bob', password: 'wiley'}
    cy
      .visitApp()
      .getByText('Register')
      .click()
      .getByLabelText('Username')
      .type(user.username)
      .getByLabelText('Password')
      .type(user.password)
      .getByText('Login')
      .click()

    cy.url().should('equal', 'http://localhost:3000/')
    cy.getByTestId('username-display').should('contain', user.username)
  })
})

And so yeah, there's more of a layer above unit test where it's testing several units together. The line between unit and integration test is a little bit fuzzy. But then we also have end-to-end tests. We're not gonna cover these today. But the general idea is you pull up the entire application and try to use it as close to as the user as possible.

Let’s try to understand this with an exercise.

We're going to write the simplest form of a test that you could possibly imagine. Below are two functions and sum is intentionally broken in this way. So, what your job is to write additional code, presumably after this code to throw a useful error to validate whether sum is working or not. So you use sum and then you validate that it is returning what it should be, an d if it's not, then you throw an error.

// sum is intentionally broken so you can see errors in the tests
const sum = (a, b) => a - b
const subtract = (a, b) => a - b

Solution

let result, expected

result = sum(3, 7)
expected = 10

if (result !== expected) {
  throw new Error(`The result of ${result} is not equal to the expected ${expected}`)
}

result = subtract(5, 2)
expected = 3

if (result !== expected) {
  throw new Error(`The result of ${result} is not equal to the expected ${expected}`)
}

A test is code that throws an error when the actual result of something does not match the expected output.

Now we are going to write an assertion library. The part that says actual !== expected is called an "assertion." This imperative code in the above solution is not my favourite. It would be great to kinda package that up so I could reuse this over and over again. If I wanted to do this, like for example, here's the end result if we test both of these. I'm doing the same kind of thing twice, so it would be really great if I could package that up into a single assertion.

What I want you to do is create a function that can be called with an actual value and it returns an object that has some properties on it some thing like this expect(result).toBe(expected). The one property we're using here is toBe. And that is a function that accepts the expected value. And if the actual is not equal to the expected value, then it should throw the error. And then re-factor the previous solution to use your fancy name assertion library.

Solution

const {sum, subtract} = require('./math')

let result, expected

result = sum(3, 7)
expected = 10

expect(result).toBe(expected)

result = subtract(7, 3)
expected = 3

expect(result).toBe(expected)

function expect(actual) {
  return {
    toBe(expected) {
      if (actual !== expected) {
        throw new Error(`${actual} is not equal to ${expected}`)
      }
    }
  }
}

It's just not readily apparent to us when we look at this error message what it was that broke. And so that's what a testing framework can do for us, is it can improve our error messages so that things are a little bit more clear what exactly is failing. And so, there are two problems here. The message isn't totally clear, and it's not running all of our tests in the file.

But now here's the problem 😖... If I see that error message, how do I know that the sum function is the one that's broken? It could be the subtract module. Also, the source of the test doesn't do a good job of keeping tests isolated (visually or otherwise).

So let's write a helper function to make that work:

const {sum, subtract} = require('./math')

test('sum adds numbers', () => {
  const result = sum(3, 7)
  const expected = 10
  expect(result).toBe(expected)
})

test('subtract subtracts numbers', () => {
  const result = subtract(7, 3)
  const expected = 4
  expect(result).toBe(expected)
})

function test(title, callback) {
  try {
    callback()
    console.log(`✓ ${title}`)
  } catch (error) {
    console.error(`✕ ${title}`)
    console.error(error)
  }
}

function expect(actual) {
  return {
    toBe(expected) {
      if (actual !== expected) {
        throw new Error(`${actual} is not equal to ${expected}`)
      }
    },
  }
}

Now we can put everything relevant to a given test within our "test" callback function and we can give that test a name. Then we use that test function to not only give a more helpful error message but also run all the tests in the file (without bailing on the first error)! Here's the output now:

$ node 4.js
✕ sum adds numbers
Error: -4 is not equal to 10
    at Object.toBe (/Users/kdodds/Desktop/js-test-example/4.js:29:15)
    at test (/Users/kdodds/Desktop/js-test-example/4.js:6:18)
    at test (/Users/kdodds/Desktop/js-test-example/4.js:17:5)
    at Object.<anonymous> (/Users/kdodds/Desktop/js-test-example/4.js:3:1)
    at Module._compile (module.js:635:30)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
    at Function.Module.runMain (module.js:676:10)
✓ subtract subtracts numbers

Sweet! Now we see the error itself and we see the title of the test so we know which one to go about fixing.

So all we need to do now is write a CLI tool that will search for all our test files and run them! That bit is pretty simple at first, but there are a LOT of things we can add on top of it. 😅

At this point, we're building a testing framework and test runner. Luckily for us, there are a bunch of these built already! I've tried a ton of them and they're all great. That said, nothing comes close to serving our use cases better than Jest 🃏. It's an amazing tool (learn more about Jest here).

So, instead of building our own framework, let's just go ahead and switch our test file to work with Jest. As it so happens, it already does! All we have to do is remove our own implementation of test and expect because Jest includes those in our tests as global objects! So here's what it looks like now:

const {sum, subtract} = require('./math')

test('sum adds numbers', () => {
  const result = sum(3, 7)
  const expected = 10
  expect(result).toBe(expected)
})

test('subtract subtracts numbers', () => {
  const result = subtract(7, 3)
  const expected = 4
  expect(result).toBe(expected)
})

When we run this file with Jest, here's what the output looks like:

$ jest
 FAIL  ./5.js
  ✕ sum adds numbers (5ms)
  ✓ subtract subtracts numbers (1ms)

● sum adds numbers

expect(received).toBe(expected)

    Expected value to be (using Object.is):
      10
    Received:
      -4

      4 |   const result = sum(3, 7)
      5 |   const expected = 10
    > 6 |   expect(result).toBe(expected)
      7 | })
      8 |
      9 | test('subtract subtracts numbers', () => {

      at Object.<anonymous>.test (5.js:6:18)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 passed, 2 total
Snapshots:   0 total
Time:        0.6s, estimated 1s
Ran all test suites.

You can't tell from the text, but that output is colored. Here's an image of the output:

It has color coding which is really helpful in identifying the parts that are relevant 😀 It also shows the code where the error was thrown! Now that's a helpful error message!

conclusion

So, what's a JavaScript test? It's simply some code which sets up some state, performs some action, and makes an assertion on the new state. We didn't talk about common framework helper functions like [beforeEach](https://facebook.github.io/jest/docs/en/api.html#beforeeachfn-timeout) or [describe](https://facebook.github.io/jest/docs/en/api.html#describename-fn), and there are a lot more assertions we could add like [toMatchObject](https://facebook.github.io/jest/docs/en/expect.html#tomatchobjectobject) or [toContain](https://facebook.github.io/jest/docs/en/expect.html#tocontainitem). But hopefully this gives you an idea of the fundamental concepts of testing with JavaScript.

I hope this is helpful to you!

useRef vs useState in React

vedanth bora — Thu, 30 Jun 2022 20:28:57 +0000

When it comes to React, there are two ways that you can manage state in your applications: with the useState hook, or with the useRef hook. Both have their own advantages and disadvantages, and knowing when to use each one is important for writing well-organized and maintainable React code.

The useState hook is a function that takes a single argument, which is the initial state. It returns a pair of values: the current state, and a function that updates the state. The function that updates the state takes a new value, and returns the updated state.

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

The useRef hook is a function that takes a single argument, which is the initial value. It returns a mutable object with a .current property. The .current property is initialized to the initial value, and can be updated with the .current.set() method.

import React, { useRef } from 'react';

function App() {
  const countRef = useRef(0);

  return (
    <div>
      <p>{countRef.current}</p>
      <button onClick={() => countRef.current.set(countRef.current + 1)}>
        Increment
      </button>
    </div>
  );
}

There are a few key differences between the useState and useRef hooks that are important to understand.

The first difference is that the useState hook always returns the current state, even if it hasn't changed. This is because the setState function creates a new state object, and React uses reference equality to determine if the component should re-render.

On the other hand, the useRef hook only updates the .current property of the mutable object that it returns. This means that if the .current property hasn't changed, React won't re-render the component.

The second difference is that the useState hook is a function, while the useRef hook is an object. This means that you can't pass arguments to the useState function to update the state. Instead, you must call the function that is returned by useState.

The third difference is that the useState hook is designed to be used with functional components, while the useRef hook can be used with either functional or class-based components.

The fourth difference is that the useState hook is initialized when the component is rendered, while the useRef hook is initialized when the component is created. This means that if you need to access the state outside of the render function, you need to use the useRef hook.

So, which one should you use? It depends on your needs. If you need to access the state outside of the render function, or you're using a class-based component, use the useRef hook. Otherwise, use the useState hook.

Call, Bind And Apply in JavaScript

vedanth bora — Thu, 30 Jun 2022 20:19:51 +0000

JavaScript is a programming language that enables one to create interactive web pages. It is a client-side scripting language, which means that the code is executed on the user's computer, not on the server.

JavaScript is an object-oriented language, which means that it uses objects to structure code. The language is also prototype-based, meaning that objects can inherit properties and methods from other objects.

In this article, we will discuss three of the most important concepts in JavaScript: call, bind and apply. We will see how these concepts can be used to write better code.

Call

The call() method is used to call a function with a given this value and arguments provided individually.

For example, consider the following code:

function greet(name) {
return 'Hello, ' + name + '!';
}

console.log(greet('John')); // Hello, John!
console.log(greet('Mary')); // Hello, Mary!

As we can see, the greet() function is being called with different names. We can use the call() method to call the same function with a different name:

console.log(greet.call(null, 'John')); // Hello, John!
console.log(greet.call(null, 'Mary')); // Hello, Mary!

As we can see, the call() method takes two arguments: the first argument is the value of this, and the second argument is the name that should be used in the greet() function.

The value of this is the object that will be used as the "this" value inside the called function. In the above code, we have passed null as the value of this. This is because the greet() function does not use the this value.

If we want to use the call() method with a function that does use the this value, we need to pass an object as the first argument:

function Person(name) {
  this.name = name;
}

Person.prototype.greet = function () {
  return 'Hello, ' + this.name + '!';
};

var john = new Person('John');
console.log(john.greet()); // Hello, John!

var mary = new Person('Mary');
console.log(mary.greet()); // Hello, Mary!

As we can see, the Person constructor function creates an object with a name property. The greet() method of the Person prototype returns a string that contains the name of the person.

We can use the call() method to call the greet() method with a different person:

console.log(mary.greet.call(john)); // Hello, John!

As we can see, the first argument of the call() method is the object that will be used as the "this" value inside the greet() method. The second argument is the name of the person, which is used in the string that is returned by the greet() method.

Bind

The bind() method is used to create a new function that has a given this value and arguments provided individually.

For example, consider the following code:

function greet(name) {
  return 'Hello, ' + name + '!';
}

console.log(greet('John')); // Hello, John!
console.log(greet('Mary')); // Hello, Mary!

As we can see, the greet() function is being called with different names. We can use the bind() method to create a new function that is bound to a given name:

var greetJohn = greet.bind(null, 'John');
console.log(greetJohn()); // Hello, John!

var greetMary = greet.bind(null, 'Mary');
console.log(greetMary()); // Hello, Mary!

As we can see, the bind() method takes two arguments: the first argument is the value of this, and the second argument is the name that should be used in the greet() function.

The value of this is the object that will be used as the "this" value inside the new function. In the above code, we have passed null as the value of this. This is because the greet() function does not use the this value.

If we want to use the bind() method with a function that does use the this value, we need to pass an object as the first argument:

function Person(name) {
  this.name = name;
}

Person.prototype.greet = function () {
  return 'Hello, ' + this.name + '!';
};

var john = new Person('John');
console.log(john.greet()); // Hello, John!

As we can see, the Person constructor function creates an object with a name property. The greet() method of the Person prototype returns a string that contains the name of the person.

We can use the bind() method to create a new function that is bound to the given person:

var greetJohn = john.greet.bind(john);
console.log(greetJohn()); // Hello, John!

As we can see, the first argument of the bind() method is the object that will be used as the "this" value inside the greet() method. The second argument is the name of the person, which is used in the string that is returned by the greet() method.

Apply

The apply() method is used to call a function with a given this value and an array of arguments.

For example, consider the following code:

function greet(name) {
  return 'Hello, ' + name + '!';
}

console.log(greet('John')); // Hello, John!
console.log(greet('Mary')); // Hello, Mary!

As we can see, the greet() function is being called with different names. We can use the apply() method to call the same function with a different name:

console.log(greet.apply(null, ['John'])); // Hello, John!
console.log(greet.apply(null, ['Mary'])); // Hello, Mary!

As we can see, the apply() method takes two arguments: the first argument is the value of this, and the second argument is an array of arguments that should be used in the greet() function.

The value of this is the object that will be used as the "this" value inside the called function. In the above code, we have passed null as the value of this. This is because the greet() function does not use the this value.

If we want to use the apply() method with a function that does use the this value, we need to pass an object as the first argument:

function Person(name) {
  this.name = name;
}

Person.prototype.greet = function () {
  return 'Hello, ' + this.name + '!';
};

var john = new Person('John');
console.log(john.greet()); // Hello, John!

As we can see, the Person constructor function creates an object with a name property. The greet() method of the Person prototype returns a string that contains the name of the person.

We can use the apply() method to call the greet() method with a different person:

console.log(mary.greet.apply(john, [])); // Hello, John!

As we can see, the first argument of the apply() method is the object that will be used as the "this" value inside the greet() method. The second argument is an array of arguments that are passed to the greet() method. In this case, we have passed an empty array, because the greet() method does not take any arguments.

Hope this blog helped you understand call, bind and apply. Good Luck 👍

Deep Copy and Shallow Copy in JavaScript

vedanth bora — Thu, 30 Jun 2022 18:46:15 +0000

What this blog will explain?

Difference between Deep copy and Shallow copy
How to deep copy and shallow copy

When it comes to cloning objects in JavaScript, there are two main methods: shallow cloning and deep cloning.

Shallow cloning is when you create a new object and copy over the top-level properties from the original object. This is a quick way to create a new object with some of the same properties as the original object.

Deep cloning is when you create a new object and copy over all of the properties from the original object, including any nested objects and their properties. This is a more thorough way to clone an object, but it can also be more time-consuming.

Here are some examples of shallow and deep cloning in JavaScript:

Shallow clone example:

var originalObj = {

prop1: "value1",

prop2: "value2",

nestedObj: {

    nestedProp1: "nestedValue1",

    nestedProp2: "nestedValue2"

  }
};

var shallowClone = {};

for (var prop in originalObj) {

shallowClone[prop] = originalObj[prop];

}

console.log(shallowClone); // { prop1: 'value1', prop2: 'value2', nestedObj: { nestedProp1: 'nestedValue1', nestedProp2: 'nestedValue2' } }

In this example, we use a for-in loop to iterate over the properties in the original object. For each property, we add it to the new object with the same value.

Notice that the nested object is copied by reference, not by value. This means that if we were to change a nested property in the shallow clone, it would also change in the original object:

shallowClone.nestedObj.nestedProp1 = "newNestedValue1";

console.log(originalObj.nestedObj.nestedProp1); // "newNestedValue1"

Deep clone example:

var originalObj = {

prop1: "value1",

prop2: "value2",

nestedObj: {

    nestedProp1: "nestedValue1",

    nestedProp2: "nestedValue2"

}

};

function deepClone(obj) {

var clone = {};

for (var prop in obj) {

 if (typeof obj[prop] === "object") {

   clone[prop] = deepClone(obj[prop]);

  } else {

    clone[prop] = obj[prop];

   }
}

  return clone;
}

var deepCloneObj = deepClone(originalObj);

console.log(deepCloneObj); // { prop1: 'value1', prop2: 'value2', nestedObj: { nestedProp1: 'nestedValue1', nestedProp2: 'nestedValue2' } }

In this example, we use a recursive function to iterate over the properties in the original object. For each property, we check to see if it's an object. If it is, we call the deepClone function again on that property. If it's not an object, we just add it to the new object with the same value.

Notice that the nested object is copied by value, not by reference. This means that if we were to change a nested property in the deep clone, it would not change in the original object:

deepCloneObj.nestedObj.nestedProp1 = "newNestedValue1";

console.log(originalObj.nestedObj.nestedProp1); // "nestedValue1"

There are a few different ways to clone an object in JavaScript, but the two main methods are shallow cloning and deep cloning.

Hope this helped you understand this better.

Foundations of Asynchronous programming

vedanth bora — Fri, 10 Jun 2022 03:10:54 +0000

The JavaScript call stack

When a function f calls a function g, g needs to know where to return to (inside f) after it is done. This information is usually managed with a stack, the call stack. Let’s look at an example.

function h(z) {
    // Print stack trace
    console.log(new Error().stack); // (A)
}

function g(y) {
    h(y + 1); // (B)
}

function f(x) {
    g(x + 1); // (C)
}
f(3); // (D)
return; // (E)

Initially, when the program above is started, the call stack is empty. After the function call f(3) in line D, the stack has one entry:

Location in global scope

After the function call g(x + 1) in line C, the stack has two entries:

Location in f
Location in global scope

After the function call h(y + 1) in line B, the stack has three entries:

Location in g
Location in f
Location in global scope

The stack trace printed in line A shows you what the call stack looks like:

Error
    at h (stack_trace.js:2:17)
    at g (stack_trace.js:6:5)
    at f (stack_trace.js:9:5)
    at <global> (stack_trace.js:11:1)

Next, each of the functions terminates and each time the top entry is removed from the stack. After function fis done, we are back in global scope and the call stack is empty. In
line E we return and the stack is empty, which means that the program terminates.

The browser event loop

Simplifyingly, each browser tab runs (in) a single process: the event loop. This loop executes browser-related things (so-called tasks) that it is fed via a task queue. Examples of tasks are:

Parsing HTML
Executing JavaScript code in script elements
Reacting to user input (mouse clicks, key presses, etc.)
Processing the result of an asynchronous network request

Items 2–4 are tasks that run JavaScript code, via the engine built into the browser. They terminate when the code terminates. Then the next task from the queue can be executed. The following diagram (inspired by a slide by Philip Roberts [1]) gives an overview of how all these mechanisms are connected.

The event loop is surrounded by other processes running in parallel to it (timers, input handling, etc.). These processes communicate with it by adding tasks to its queue.

Timers

Browsers have timers. setTimeout() creates a timer, waits until it fires and then adds a task to the queue. It has the signature:

setTimeout(callback, ms)

After ms milliseconds, callback is added to the task queue. It is important to note that ms only specifies when the callback is added, not when it actually executed. That may happen much later, especially if the event loop is blocked.

setTimeout() with ms set to zero is a commonly used work-around to add something to the task queue right away. However, some browsers do not allow ms to be below a minimum (4 ms in Firefox); they set it to that minimum if it is.

Displaying DOM changes

For most DOM changes (especially those involving a re-layout), the display isn’t updated right away. “Layout happens off a refresh tick every 16ms” and must be given a chance to run via the event loop.

There are ways to coordinate frequent DOM updates with the browser, to avoid clashing with its layout rhythm. Consult the documentation on requestAnimationFrame() for details.

Run-to-completion semantics

JavaScript has so-called run-to-completion semantics: The current task is always finished before the next task is executed. That means that each task has complete control over all current state and doesn’t have to worry about concurrent modification.

Let’s look at an example:

setTimeout(function () { // (A)
    console.log('Second');
}, 0);
console.log('First'); // (B)

The function starting in line A is added to the task queue immediately, but only executed after the current piece of code is done (in particular line B!). That means that this code’s output will always be:

First
Second

Blocking the event loop

As we have seen, each tab (in some browers, the complete browser) is managed by a single process – both the user interface and all other computations. That means that you can freeze the user interface by performing a long-running computation in that process. The following code demonstrates that.

<a id="block" href="">Block for 5 seconds</a>
<p>
<button>This is a button</button>
<div id="statusMessage"></div>
<scr
ipt>
    document.getElementById('block')
    .addEventListener('click', onClick);

    function onClick(event) {
        event.preventDefault();

        setStatusMessage('Blocking...');

        // Call setTimeout(), so that browser has time to display
        // status message
        setTimeout(function () {
            sleep(5000);
            setStatusMessage('Done');
        }, 0);
    }

    function setStatusMessage(msg) {
        document.getElementById('statusMessage').textContent = msg;
    }

    function sleep(milliseconds) {
        var start = Date.now();
        while ((Date.now() - start) < milliseconds);
    }
</script>

Whenever the link at the beginning is clicked, the function onClick() is triggered. It uses the – synchronous – sleep() function to block the event loop for five seconds. During those
seconds, the user interface doesn’t work. For example, you can’t click the “Simple button”.

Avoiding blocking

You avoid blocking the event loop in two ways:

First, you don’t perform long-running computations in the main
process, you move them to a different process. This can be achieved via
the Worker API.

Second, you don’t (synchronously) wait for the results of a long-running computation (your own algorithm in a Worker process, a network request, etc.), you carry on with the event loop and let the computation notify you when it is finished.

In fact, you usually don’t even have a choice in browsers and have to do things this way. For example, there is no built-in way to sleep synchronously (like the previously implemented sleep()). Instead, setTimeout() lets you sleep asynchronously.

The next section explains techniques for waiting asynchronously for results.

Receiving results asynchronously

Two common patterns for receiving results asynchronously are: events and callbacks.

Asynchronous results via events

In this pattern for asynchronously receiving results, you create an object for each request and register event handlers with it: one for a successful computation, another one for handling errors. The following code shows how that works with the XMLHttpRequestAPI:

var req = new XMLHttpRequest();

req.open('GET', url);

req.onload = function () {
    if (req.status == 200) {
        processData(req.response);
    } else {
        console.log('ERROR', req.statusText);
    }
};

req.onerror = function () {
    console.log('Network Error');
};

req.send(); // Add request to task queue

Note that the last line doesn’t actually perform the request, it adds it to the task queue. Therefore, you could also call that method right after open(), before setting up onload and onerror. Things would work the same, due to JavaScript’s run-to-completion semantics.

Implicit requests

The browser API IndexedDB has a slightly peculiar style of event handling:

var openRequest = indexedDB.open('test', 1);

openRequest.onsuccess = function (event) {
    console.log('Success!');
    var db = event.target.result;
};

openRequest.onerror = function (error) {
    console.log(error);
};

You first create a request object, to which you add event listeners that are notified of results.

However, you don’t need to explicitly queue the request, that is done by open(). It is executed after the current task is finished. That is why you can (and in fact must) register event handlers after calling open().

If you are used to multi-threaded programming languages, this style of handling requests probably looks strange, as if it may be prone to race conditions. But, due to run to completion, things are always safe.

Events don’t work well for single results

This style of handling asynchronously computed results is OK if you receive results multiple times. If, however, there is only a single result then the verbosity becomes a problem. For that use case, callbacks have become popular.

Asynchronous results via callbacks

If you handle asynchronous results via callbacks, you pass callback functions as trailing parameters to asynchronous function or method calls.

The following is an example in Node.js. We read the contents of a text file via an asynchronous call to fs.readFile():

// Node.js
fs.readFile('myfile.txt', { encoding: 'utf8' },
    function (error, text) { // (A)
        if (error) {
            // ...
        }
        console.log(text);
    });

If readFile() is successful, the callback in line A receives a result via the parameter text. If it isn’t, the callback gets an error (often an instance of Error or a sub-constructor) via its first parameter.

The same code in classic functional programming style would look like this:

// Functional
readFileFunctional('myfile.txt', { encoding: 'utf8' },
    function (text) { // success
        console.log(text);
    },
    function (error) { // failure
        // ...
    });

Continuation-passing style

The programming style of using callbacks (especially in the functional manner shown previously) is also called continuation-passing style (CPS), because the next step (the continuation) is explicitly passed as a parameter. This gives an invoked function more control over what happens next and when.

The following code illustrates CPS:

console.log('A')
;
identity('B', function step2(result2) {
    console.log(result2);
    identity('C', function step3(result3) {
       console.log(result3);
    });
    console.log('D');
});
console.log('E');

// Output: A E B D C

function identity(input, callback) {
    setTimeout(function () {
        callback(input);
    }, 0);
}

For each step, the control flow of the program continues inside the callback. This leads to nested functions, which are sometimes referred to as callback hell.

However, you can often avoid nesting, because JavaScript’s function declarations are hoisted (their definitions are evaluated at the beginning of their scope). That means that you can call ahead and invoke functions defined later in the program.

The following code uses hoisting to flatten the previous example.

console.log('A')
;

identity('B', step2);

function step2(result2) {
    // The program continues here
    console.log(result2);
    identity('C', step3);
    console.log('D');
}

function step3(result3) {
   console.log(result3);
}

console.log('E');

Composing code in CPS

In normal JavaScript style, you compose pieces of code via:

Putting them one after another. This is blindingly obvious, but it’s good to remind ourselves that concatenating code in normal style is sequential composition.
Array methods such as map(), filter() and forEach()
Loops such as for and while

The library Async.js provides combinators to let you do similar things in CPS, with
Node.js-style callbacks. It is used in the following example to load the contents of three files, whose names are stored in an Array.

var async = require('async');

var fileNames = [ 'foo.txt', 'bar.txt', 'baz.txt' ];

async.map(fileNames,
    function (fileName, callback) {
        fs.readFile(fileName, { encoding: 'utf8' }, callback);
    },

    // Process the result
    function (error, textArray) {
        if (error) {
            console.log(error);
            return;
        }
        console.log('TEXTS:\n' + textArray.join('\n----\n'));
    });

Pros and cons of callbacks

Using callbacks results in a radically different programming style, CPS. The main advantage of CPS is that its basic mechanisms are easy to understand. But there are also disadvantages:

Error handling becomes more complicated: There are now two ways in which errors are reported – via callbacks and via exceptions. You have to be careful to combine both properly.
Less elegant signatures: In synchronous functions, there is a clear separation of concerns between input (parameters) and output (function result). In asynchronous functions that use callbacks, these concerns are mixed: the function result doesn’t matter and some parameters are used for input, others for output.
Composition is more complicated: Because the concern “output” shows up in the parameters, it is more complicated to compose code via combinators.

Callbacks in Node.js style have three disadvantages (compared to those in a functional style):

The if statement for error handling adds verbosity.
Reusing error handlers is harder.
Providing a default error handler is also harder. A default errorhandler is useful if you make a function call and don’t want to write your own handler. It could also be used by a function if a caller doesn’t specify a handler.

I hope this blog helped you learn something new.

ES6 Handbook

vedanth bora — Fri, 10 Jun 2022 02:18:32 +0000

From `var` to `const`/`let`

In ES5, you declare variables via var. Such variables are function-scoped, their scopes are the innermost enclosing functions. The behavior of varis occasionally confusing. This is an example:

var x = 3;
function func(randomize) {
    if (randomize) {
        var x = Math.random(); // (A) scope: whole function
        return x;
    }
    return x; // accesses the x from line A
}
func(false); // undefined

That func()returns undefined may be surprising. You can see why if you rewrite the code so that it more closely reflects what is actually going on:

var x = 3;
function func(randomize) {
    var x;
    if (randomize) {
        x = Math.random();
        return x;
    }
    return x;
}
func(false); // undefined

In ES6, you can additionally declare variables via let and const. Such variables are block-scoped, their scopes are the innermost enclosing blocks. let is roughly a block-scoped version of var. const works like let, but creates variables whose values can’t be changed.

letand constbehave more strictly and throw more exceptions (e.g. when you access their variables inside their scope before they are declared). Block-scoping helps with keeping the effects of code fragments more local . And it’s more mainstream than function-scoping, which
eases moving between JavaScript and other programming languages.

If you replace var with let in the initial version, you get different behavior:

let x = 3;
function func(randomize) {
    if (randomize) {
        let x = Math.random();
        return x;
    }
    return x;
}
func(false); // 3

That means that you can’t blindly replace var with let or const in existing code; you have to be careful during refactoring.

My advice is:

Prefer const. You can use it for all variables whose values never change.
Otherwise, use let – for variables whose values do change.
Avoid var.

From IIFEs to blocks

In ES5, you had to use a pattern called IIFE (Immediately-Invoked Function Expression) if you wanted to restrict the scope of a variable tmp to a block:

(function () {  // open IIFE
    var tmp = ···;
    ···
}());  // close IIFE

console.log(tmp); // ReferenceError

In ECMAScript 6, you can simply use a block and a letdeclaration (or a const declaration):

{  // open block
    let tmp = ···;
    ···
}  // close block

console.log(tmp); // ReferenceError

From concatenating strings to template literals

With ES6, JavaScript finally gets literals for string interpolation and multi-line strings.

String interpolation

In ES5, you put values into strings by concatenating those values and string fragments:

function printCoord(x, y) {
    console.log('('+x+', '+y+')');
}

In ES6 you can use string interpolation via template literals:

function printCoord(x, y) {
    console.log(`(${x}, ${y})`);
}

Multi-line strings

Template literals also help with representing multi-line strings.

For example, this is what you have to do to represent one in ES5:

var HTML5_SKELETON =
    '<!doctype html>\n' +
    '<html>\n' +
    '<head>\n' +
    '    <meta charset="UTF-8">\n' +
    '    <title></title>\n' +
    '</head>\n' +
    '<body>\n' +
    '</body>\n' +
    '</html>\n';

If you escape the newlines via backslashes, things look a bit nicer (but you still have to explicitly add newlines):

var HTML5_SKELETON = '\
    <!doctype html>\n\
    <html>\n\
    <head>\n\
        <meta charset="UTF-8">\n\
        <title></title>\n\
    </head>\n\
    <body>\n\
    </body>\n\
    </html>';

ES6 template literals can span multiple lines:

const HTML5_SKELETON = `
    <!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
    </html>`;

From function expressions to arrow functions

In current ES5 code, you have to be careful with this whenever you are using function expressions. In the following example, I create the helper variable _this (line A) so that the this of UiComponent can be accessed in line B.

function UiComponent() {
    var _this = this; // (A)
    var button = document.getElementById('myButton');
    button.addEventListener('click', function () {
        console.log('CLICK');
        _this.handleClick(); // (B)
    });
}
UiComponent.prototype.handleClick = function () {
    ···
};

In ES6, you can use arrow functions, which don’t shadow this (line A):

function UiComponent() {
    var button = document.getElementById('myButton');
    button.addEventListener('click', () => {
        console.log('CLICK');
        this.handleClick(); // (A)
    });
}

(In ES6, you also have the option of using a class instead of a constructor function. That is explored later.)

Arrow functions are especially handy for short callbacks that only return results of expressions.

In ES5, such callbacks are relatively verbose:

var arr = [1, 2, 3];
var squares = arr.map(function (x) { return x * x });

In ES6, arrow functions are much more concise:

const arr = [1, 2, 3];
const squares = arr.map(x => x * x);

When defining parameters, you can even omit parentheses if the parameters are just a single identifier. Thus: (x) => x * x and x => x * x are both allowed.

Handling multiple return values

Some functions or methods return multiple values via arrays or objects. In ES5, you always need to create intermediate variables if you want to access those values. In ES6, you can avoid intermediate variables via destructuring.****

Multiple return values via arrays

exec() returns captured groups via an Array-like object. In ES5, you need an intermediate variable (matchObjin the example below), even if you are only interested in the groups:

var matchObj =
    /^(\d\d\d\d)-(\d\d)-(\d\d)$/
    .exec('2999-12-31');
var year = matchObj[1];
var month = matchObj[2];
var day = matchObj[3];

In ES6, destructuring makes this code simpler:

const [, year, month, day] = /^(\d\d\d\d)-(\d\d)-(\d\d)$/.exec('2999-12-31');

The empty slot at the beginning of the Array pattern skips the Array element at index zero.

Multiple return values via objects

The method Object.getOwnPropertyDescriptor() returns a property descriptor, an object that holds multiple values in its properties.

In ES5, even if you are only interested in the properties of an object, you still need an intermediate variable (propDesc in the example below):

var obj = { foo: 123 };

var propDesc = Object.getOwnPropertyDescriptor(obj, 'foo');
var writable = propDesc.writable;
var configurable = propDesc.configurable;

console.log(writable, configurable); // true true

In ES6, you can use destructuring:

const obj = { foo: 123 };

const {writable, configurable} = Object.getOwnPropertyDescriptor(obj, 'foo');

console.log(writable, configurable); // true true

From `for` to `forEach()` to `for-of`

Prior to ES5, you iterated over Arrays as follows:

var arr = ['a', 'b', 'c'];
for (var i=0; i<arr.length; i++) {
    var elem = arr[i];
    console.log(elem);
}

In ES5, you have the option of using the Array method forEach():

arr.forEach(function (elem) {
    console.log(elem);
});

A for loop has the advantage that you can break from it, forEach() has the advantage of conciseness.

In ES6, the for-of loop combines both advantages:

const arr = ['a', 'b', 'c'];
for (const elem of arr) {
    console.log(elem);
}

If you want both index and value of each array element, for-of has got you covered, too, via the new Array method entries() and destructuring:

for (const [index, elem] of arr.entries()) {
    console.log(index+'. '+elem);
}

Handling parameter default values

In ES5, you specify default values for parameters like this:

function foo(x, y) {
    x = x || 0;
    y = y || 0;
    ···
}

ES6 has nicer syntax:

function foo(x=0, y=0) {
    ···
}

An added benefit is that in ES6, a parameter default value is only triggered by undefined, while it is triggered by any falsy value in the previous ES5 code.

From `arguments` to rest parameters

In ES5, if you want a function (or method) to accept an arbitrary number of arguments, you must use the special variable arguments:

function logAllArguments() {
    for (var i=0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
}

In ES6, you can declare a rest parameter (args in the example below) via the ... operator:

function logAllArguments(...args) {
    for (const arg of args) {
        console.log(arg);
    }
}

Rest parameters are even nicer if you are only interested in trailing parameters:

function format(pattern, ...args) {
    ···
}

Handling this case in ES5 is clumsy:

function format(pattern) {
    var args = [].slice.call(arguments, 1);
    ···
}

Rest parameters make code easier to read: You can tell that a function has a variable number of parameters just by looking at its parameter definitions.

From function expressions in object literals to method definitions

In JavaScript, methods are properties whose values are functions.

In ES5 object literals, methods are created like other properties. The property values are provided via function expressions.

var obj = {
    foo: function () {
        ···
    },
    bar: function () {
        this.foo();
    }, // trailing comma is legal in ES5
}

ES6 has method definitions, special syntax for creating methods:

const obj = {
    foo() {
        ···
    },
    bar() {
        this.foo();
    },
}

From constructors to classes

ES6 classes are mostly just more convenient syntax for constructor functions.

Base classes

In ES5, you implement constructor functions directly:

function Person(name) {
    this.name = name;
}
Person.prototype.describe = function () {
    return 'Person called '+this.name;
};

In ES6, classes provide slightly more convenient syntax for constructor functions:

class Person {
    constructor(name) {
        this.name = name;
    }
    describe() {
        return 'Person called '+this.name;
    }
}

Note the compact syntax for method definitions – no keyword function needed. Also note that there are no commas between the parts of a class.

Derived classes

Subclassing is complicated in ES5, especially referring to super-constructors and super-properties. This is the canonical way of creating a sub-constructor Employee of Person:

Person.call(this, name); // super(name)
    this.title = title;
}

Employee.prototype = Object.create(Person.prototype);

Employee.prototype.constructor = Employee;

Employee.prototype.describe = function () {
    return Person.prototype.describe.call(this) // super.describe()
           + ' (' + this.title + ')';
};

ES6 has built-in support for subclassing, via the extends clause:

class Employee extends Person {
    constructor(name, title) {
        super(name);
        this.title = title;
    }
    describe() {
        return super.describe() + ' (' + this.title + ')';
    }
}

From custom error constructors to subclasses of `Error`

In ES5, it is impossible to subclass the built-in constructor for exceptions, Error. The following code shows a work-around that gives the constructor MyError important features such as a stack trace:

function MyError() {
    // Use Error as a function
    var superInstance = Error.apply(null, arguments);
    copyOwnPropertiesFrom(this, superInstance);
}

MyError.prototype = Object.create(Error.prototype);

MyError.prototype.constructor = MyError;

function copyOwnPropertiesFrom(target, source) {

    Object.getOwnPropertyNames(source)
    .forEach(function(propKey) {
        var desc = Object.getOwnPropertyDescriptor(source, propKey);
        Object.defineProperty(target, propKey, desc);
    });

    return target;
};

In ES6, all built-in constructors can be subclassed, which is why the following code achieves what the ES5 code can only simulate:

class MyError extends Error {
.....
}

From objects to Maps

Using the language construct object as a map from strings to arbitrary values (a data structure) has always been a makeshift solution in JavaScript. The safest way to do so is by creating an objectwhose prototype is null.

Then you still have to ensure that no key is ever the string '__proto__', because that property key triggers special functionality in many JavaScript engines.

The following ES5 code contains the function countWords that uses the object dict as a map:

var dict = Object.create(null);

function countWords(word) {
    var escapedWord = escapeKey(word);
    if (escapedWord in dict) {
        dict[escapedWord]++;
    } else {
        dict[escapedWord] = 1;
    }
}

function escapeKey(key) {
    if (key.indexOf('__proto__') === 0) {
        return key+'%';
    } else {
        return key;
    }
}

In ES6, you can use the built-in data structure Map and don’t have to escape keys. As a downside, incrementing values inside Maps is less convenient.

const map = new Map();

function countWords(word) {
    const count = map.get(word) || 0;
    map.set(word, count + 1);
}

Another benefit of Maps is that you can use arbitrary values as keys, not just strings.

New string methods

The ECMAScript 6 standard library provides several new methods for strings.

From indexOf to startsWith:

if (str.indexOf('x') === 0) {} // ES5
if (str.startsWith('x')) {} // ES6

From indexOfto endsWith:

function endsWith(str, suffix) { // ES5
  var index = str.indexOf(suffix);
  return index >= 0
    && index === str.length-suffix.length;
}

str.endsWith(suffix); // ES6

From indexOf to includes:

if (str.indexOf('x') >= 0) {} // ES5
if (str.includes('x')) {} // ES6

From join to repeat(the ES5 way of repeating a string is more of a hack):

new Array(3+1).join('#') // ES5
'#'.repeat(3) // ES6

New Array methods

There are also several new Array methods in ES6.****

From Array.prototype.indexOf to Array.prototype.findIndex

The latter can be used to find NaN, which the former can’t detect:

const arr = ['a', NaN];

arr.indexOf(NaN); // -1
arr.findIndex(x => Number.isNaN(x)); // 1

As an aside, the new Number.isNaN() provides a safe way to detect NaN (because it doesn’t coerce non-numbers to numbers):

> isNaN('abc')
true
> Number.isNaN('abc')
false

From Array.prototype.slice() to Array.from() or the spread operator

In ES5, Array.prototype.slice() was used to convert Array-like objects to Arrays. In ES6, you have Array.from():

var arr1 = Array.prototype.slice.call(arguments); // ES5

const arr2 = Array.from(arguments); // ES6

If a value is iterable (as all Array-like DOM data structure are by now), you can also use the spread operator (...) to convert it to an Array:

const arr1 = [...'abc'];
    // ['a', 'b', 'c']
const arr2 = [...new Set().add('a').add('b')];
    // ['a', 'b']

From apply() to Array.prototype.fill()

In ES5, you can use apply(), as a hack, to create in Array of arbitrary length that is filled with undefined:

// Same as Array(undefined, undefined)
var arr1 = Array.apply(null, new Array(2));
    // [undefined, undefined]

In ES6, fill() is a simpler alternative:

const arr2 = new Array(2).fill(undefined);
    // [undefined, undefined]

fill()is even more convenient if you want to create an Array that is filled with an arbitrary value:

// ES5
var arr3 = Array.apply(null, new Array(2))
    .map(function (x) { return 'x' });
    // ['x', 'x']

// ES6
const arr4 = new Array(2).fill('x');
    // ['x', 'x']

fill() replaces all Array elements with the given value. Holes are treated as if they were elements.

From CommonJS modules to ES6 modules

Even in ES5, module systems based on either AMD syntax or CommonJS syntax have mostly replaced hand-written solutions such as the revealing module pattern.

ES6 has built-in support for modules. Alas, no JavaScript engine supports them natively, yet. But tools such as browserify, webpack or jspm let you use ES6 syntax to create modules, making the code you write future-proof.

Multiple exports

In CommonJS, you export multiple entities as follows:

//------ lib.js ------
var sqrt = Math.sqrt;
function square(x) {
    return x * x;
}

function diag(x, y) {
    return sqrt(square(x) + square(y));
}

module.exports = {
    sqrt: sqrt,
    square: square,
    diag: diag,
};

//------ main1.js ------
var square = require('lib').square;
var diag = require('lib').diag;

console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

Alternatively, you can import the whole module as an object and access square and diag via it:

//------ main2.js ------
var lib = require('lib');
console.log(lib.square(11)); // 121
console.log(lib.diag(4, 3)); // 5

Multiple exports in ES6

In ES6, multiple exports are called named exports and handled like this:

//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//------ main1.js ------
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

The syntax for importing modules as objects looks as follows (line A):

//------ main2.js ------
import * as lib from 'lib'; // (A)
console.log(lib.square(11)); // 121
console.log(lib.diag(4, 3)); // 5

Single exports

Node.js extends CommonJS and lets you export single values from modules, via module.exports:

//------ myFunc.js ------
module.exports = function () { ··· };

//------ main1.js ------
var myFunc = require('myFunc');
myFunc();

In ES6, the same thing is done via a so-called default export(declared via export default):

//------ myFunc.js ------
export default function () { ··· } // no semicolon!

//------ main1.js ------
import myFunc from 'myFunc';
myFunc();

I hope this blog helped you learn something new.

Forem: vedanth bora

I Built a CLI That Gives Your LLM Accurate Library Docs — No MCP Server Needed

The Problem

The Solution

How It Works

The Real Power: Pipes

Pipe into LLMs

Pipe into Unix tools

Use in scripts

c7 vs MCP Server

Getting Started

Links

Currying in JavaScript

What is Currying?

How does currying work?

A *currying function that takes infinite arguments.*

How can we manipulate DOM using currying?

Let’s understand map, filter and reduce by writing polyfills for them.

Intro

map

filter

reduce

map vs forEach

conclusion

Call, Bind And Apply in JavaScript with pollyfills.

Intro

Call

pollyfill for call

Bind

Pollyfill for bind

apply

pollyfill for apply

Debouncing and Throttling in JavaScript

Intro

What is debouncing ?

What is throttling ?

Throttling vs debouncing

Memoization In JavaScript

Conclusion

JavaScript Testing 101

Static code analysis

Unit Tests

Integration Tests

End to end Tests

Let’s try to understand this with an exercise.

conclusion

useRef vs useState in React

Call, Bind And Apply in JavaScript

Call

Bind

Apply

Deep Copy and Shallow Copy in JavaScript

What this blog will explain?

Foundations of Asynchronous programming

The JavaScript call stack

The browser event loop

Timers

Displaying DOM changes

Run-to-completion semantics

Blocking the event loop

Avoiding blocking

Receiving results asynchronously

Asynchronous results via events

Implicit requests

Asynchronous results via callbacks

Pros and cons of callbacks

ES6 Handbook

From var to const/let

From IIFEs to blocks

From concatenating strings to template literals

String interpolation

Multi-line strings

From function expressions to arrow functions

Handling multiple return values

Multiple return values via arrays

Multiple return values via objects

From for to forEach() to for-of

Handling parameter default values

From arguments to rest parameters

From function expressions in object literals to method definitions

A currying function that takes infinite arguments.

From `var` to `const`/`let`

From `for` to `forEach()` to `for-of`

From `arguments` to rest parameters

From custom error constructors to subclasses of `Error`