Forem: revanthrev23

Currying!?

revanthrev23 — Sat, 05 Jun 2021 07:09:37 +0000

I am sure we all know what currying is, in JavaScript. If not don't worry I have got you covered here.

A lot of people know the theory of currying, but not a lot of them, can implement the same. Implementing currying is extremely simple!

So what is currying?

Currying is a technique of evaluating function with multiple arguments, into a sequence of functions having lesser number of arguments.

Let's say a function can take in 3 arguments, we can curry this function, into a sequence of 3 functions taking 1 argument each, or into 2 functions taking 2 and 1 arguments each. So basically when we curry a function, we reduce the number of arguments it takes in, but still performs all the actions it was intended to.

I am sure you will understand this better with this piece of code.

//Function 1
const sum  = function (a) {
    return function (b) {
      if (b) {
        return sum(a+b);
      }
      return a;
    }
};
//Function 2
function num_sum(a, b){
   return a+b;
}
num_sum(1,2);
sum(1)(2)(3)..(n);

Function 2 is a traditional way of adding 2 numbers. Function 1 is the curried version of the same function where, we have reduced the number of arguments it has, in each function. Currying uses many concepts like high-order functions, where we can return a function or assign it to a value or even pass it as an argument to another function!

Let me show you another variant of currying the same sum function:

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

function curry(f){
   return function(a){
       return function(b){
           return f(a,b);
       }
   }
}

let curriedSum = curry(sum);

let ans = curriedSum(1)(2);

In this example, we are currying an already existing function. Basically, by doing this we can re-use it with various number of arguments at different parts of a program depending on our needs.

Advantages of Currying:
1) Currying helps you to avoid passing the same variable again and again.
2) It helps to create a higher order function. It extremely helpful in event handling.
3) Little snippets of code can be written and reused with ease.

Debouncing vs Throttling

revanthrev23 — Sat, 05 Jun 2021 07:07:03 +0000

Let us consider an example where we are trying to build a search bar, which has the capability of auto-complete. Now it gets this data that is suggested via an api. Hence it has to make an api call over the internet. Now autocomplete works with each and every character the user enters. But if our api was to be called each and every time when the user types something, it would be an overhead on our webapp, and it would decrease the performance as we have to handle so many network calls.

Debouncing and throttling could be made use of to improve our performance.

Debouncing

Debouncing is a technique used to ensure that time-consuming tasks are not called so often, that it negatively impacts the performance of the web page. In other words, it limits the rate at which a function gets invoked.

If we implement debouncing, we can fire an api call only when there is a pause of a certain amount of time between two consecutive keystrokes from the user. In other words, if the user pauses for a certain amount of time, before typing again, we fire an api call in that gap. Here we set a sensible time limit like maybe 500ms or 1s.

We can make use of setTimeout to implement debouncing:

const getData = () => {
    console.log(“Assume this is the API call”);
}
const debouncing = function(fn,d) {
    Let timer;
    return function(){
        let context = this;
        args = arguments;
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(context,arguments);
        }, d);
    }
}
debouncing(getData, 300);

Throttling

Throttling is a technique in which, no matter how many times the user fires the event, the attached function will be executed only once in a given time interval. Or in other words, we trigger an event only on the first input made by the user.

Hence debouncing is more suitable on button clicks which perform a critical action like paying bills, or even on window resizing, etc.

If we use throttling in our example above, we can simulate it in such a way that the api would be fired after the user has typed everything.

This is how we can implement throttling:

   function throttleFunction(func, delay) {
     return function (args) {
     let previousCall = this.lastCall;
     this.lastCall = Date.now();
     if (previousCall === undefined || 
          (this.lastCall - previousCall) > delay) {
       func(args);
      }
    }
   }
   const getData = () => {
    console.log(“Assume this is the API call”);
   }
   throttleFunction(getData, 300);

Find 'a' if this equality is true! (a==1 && a==2 && a==3)

revanthrev23 — Fri, 04 Jun 2021 14:30:11 +0000

Yes I am not kidding!

Yes there really is an answer for this!

JavaScript is one of the most daunting programming languages that one can ever come across. But yet it's so beautiful. It's so complex, but stick by it, it will turn out to be one of the best choices you ever made.

One of the most feared topics in JavaScript is functions. The true power of JavaScript lies in its functions. We are gonna be using functions(well technically one function) to get an answer for this question.

Enough blah blah, lets get to the main act:

I am assuming that you know functions, objects, and concept of anonymous functions as a prerequisite. If not I suggest, do a quick read about it and get back here to get your minds blown at the simplicity of the solution.

We use '==' to check equality in some of the languages like Java or C++. In JavaScript we can use the same, but we tend to use '==='. The reason for this is that, '==' performs a loose equality operation where type is not checked. TypeCoercion will happen, where an operand on one side of the '==' is converted to the type of the other, and then its values are compared. If the values are same, then 'true' is returned. Else a 'false' will be returned. Simple?

Now this is where we can make use of this 'loose equality operator' to our advantage.

Now let us think what datatype would our variable 'a' be? Is it a number? Is it a character? Is it a string? Is it a function(yes it is allowed in JS)? Or is it an object?

Let's find out in the code:

const a = {
    num: 0,
    valueOf: function() {
      return this.num += 1
    }
   };
   const equality = (a==1 && a==2 && a==3);

console.log(equality);

This code would print 'true'. Try it out!

Now let's go through what the code is actually doing. We are declaring an object of the name 'a'. It has a member variable 'num' which is initialised to 0. We also have another member named 'valueOf' which is a function.

Notice the value of 'valueOf' (pun intended!). It is a weird way to declare a function right? Well yes, for starters, it does not have a name! This is known as an anonymous function.

Let us continue, so we have a weird function, where in we are just incrementing our 'num' by 1 and returning the updated value. So this was our object. Simple?

Now we have the heading of this blog in the next line:

const equality = (a==1 && a==2 && a==3);

Let's break it down to parts. In the first part we are using our '==' to check if our object 'a' is equal to 1(Integer). We will get a false right? Phew, EZ! But sadly that's not what happens. This is where the magic of JavaScript happens, because we are using '==' it converts our object into an Integer, just the way I told earlier.

Ok so we have 'a' which is now converted to an Integer. But what is its value? JavaScript converts 'a' into an Integer and uses the inbuilt function 'valueOf()' to obtain this value of our object. But wait, we already have a function named 'valueOf' defined in our object, remember?

So JavaScript does a.valueOf(), hence it is calling the function named 'valueOf' which is defined in our object 'a'.

How do we call a function defined in object?
By using this syntax right?

object_name.function_name();

Hence our 'valueOf' function is called and it returns the current value of num+1. Initially num is 0, so we get 1 returned. Now we have 1==1 which is true.

The same happens for the other two parts as well, and we get true as the value of our const 'equality'.

Go on check the console, what are you waiting for?