Forem: Nitesh Patel

Polyfills in JS - Interview Questions

Nitesh Patel — Fri, 05 Jan 2024 06:00:05 +0000

Here are five important polyfills in javascript. I will be covering forEach, map, filter, reduce, flat in the easiest way possible.

NOTE : Knowledge of the This keyword is crucial.

Let's get started!

forEach

The code below is a simple example of forEach.

const numbers = [1, 2, 3, 4, 5]
const ans = numbers.forEach((n) => console.log(n))

polyfill of forEach

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

Array.prototype.myForEach = function (callbackfn) {
    for (let index = 0; index < this.length; index++) {
        callbackfn(this[index], index, this)
    }
}

numbers.myForEach((n) => console.log(n))

map

Simple example of in-built mapfunction

const numbers = [1, 2, 3, 4, 5]
console.log(numbers.map((n) => n * 2));

Here is polyfill of map

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

Array.prototype.myMap = function myMap(cb) {
    const output = []
    for (let i = 0; i < this.length; i++) {
        let a = cb(this[i])
        output.push(a)
    }
    return output
}

console.log(numbers.myMap((n) => n * 2));

filter

Here is filterexample

const numbers = [1, 2, 3, 4, 5]
console.log(numbers.filter((n) => n > 3));

Polyfill of filter

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

Array.prototype.myFilter = function (cb) {
    const output = []
    for (let i = 0; i < this.length; i++) {
        if (cb(this[i])) {
            output.push(this[i])
        }
    }
    return output
}

console.log(numbers.myFilter((n) => n > 4));

reduce

example of reducemethod

const numbers = [1, 2, 3, 4, 5]
console.log(numbers.reduce((acc, curr) => {
    return acc + curr
}, 0)
);

polyfill of reduce

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

Array.prototype.myReduce = function (cb, initialValue) {
    let acc = initialValue;
    for (let i = 0; i < this.length; i++) {
        acc = acc ? cb(acc, this[i]) : this[i]
    }
    return acc
}

console.log(numbers.myReduce((acc, curr) => {
    return acc + curr
}, 1));

flat

Example of flatmethod, it takes depth as an argument. Depth refers to how deeply nested arrays within the original array should be flattened.

const numbers = [1, [2, [3, 4]]]
console.log(numbers.flat(2));

polyfill of flat

const numbers = [1, [2, [3, 4]]]

Array.prototype.myflat = function (depth) {
    const output = []
    if (!Array.isArray(this)) {
        throw new Error(`${this}.flat is not a function`);
    }

    this.forEach((n) => {
        if (Array.isArray(n) && depth > 0) {
            output.push(...n.myflat(depth - 1))
        } else {
            output.push(n)
        }
    });
    return output
}

console.log(numbers.myflat(2));

React 80% : useState and useEffect

Nitesh Patel — Mon, 01 Jan 2024 17:26:41 +0000

Let's dive into React hooks. One thing to keep in mind is that hooks were introduced for functional components only. Hooks don't work inside classes.

Hooks are just functions responsible for certain behavior. In this article, we will be discussing useState and useEffect.

useState

useState is a React hook used for managing state variables. We can declare a state variable and update it directly. useState is imported from the react module.

Here is an example of useState:

const [count,setCount] = useState(0)

Here, countis the name of the variable, and setCountis the name of the callback function that will update the state. useState(0) means we set 0 as the default value. 0 will be rendered initially, and after that, when we update the variable, the new value will be rendered.

Now let's take an example of a counter app to learn more

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  const increase = () => {
    setCount(count + 1);
  };
  const decrease = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h1>count : {count}</h1>
      <button onClick={decrease}>-</button>
      <button onClick={increase}>+</button>
    </div>
  );
}

In the above code, we use setCountto update a new value, i.e., increasing the count by 1. Similarly, we can decrease the count value by 1. This is a basic way of writing code.

The problem arises when we use another setCountin the increase or decrease function. The count value ideally should decrease by 2, but this won't happen.

Add this code to the counter app, and you will see that the count will increase and decrease by 1 only:

 const increase = () => {
    setCount(count + 1);
    setCount(count + 1);
  };
  const decrease = () => {
    setCount(count - 1);
    setCount(count - 1);
  };

If we want to increase or decrease the count by 2, then we should pass a callback function:

const increase = () => {
    setCount((prevCount) => prevCount + 1);
    setCount((prevCount) => prevCount + 1);
  };
  const decrease = () => {
    setCount((prevCount) => prevCount - 1);
    setCount((prevCount) => prevCount - 1);
  };

Here, setCounttakes a callback function that will track the previous value of countand then increase or decrease the count value.

Note: We passed 0as a default value. Since 0is a hard-coded value, it will run every time the component renders. To avoid rendering 0every time, pass a callback function that will return 0:

import { useState } from "react";
function value() {
  console.log("render");
  return 0;
}
export default function App() {
  const [count, setCount] = useState(value());
  const increase = () => {
    setCount((prevCount) => prevCount + 1);
    setCount((prevCount) => prevCount + 1);
  };
  const decrease = () => {
    setCount((prevCount) => prevCount - 1);
    setCount((prevCount) => prevCount - 1);
  };

  return (
    <div>
      <h1>count : {count}</h1>
      <button onClick={decrease}>-</button>
      <button onClick={increase}>+</button>
    </div>
  );
}

useState(value()) and useState(0) both work in the same way. Here, the value function will return 0 and log "render" every time. To avoid calling "render" every time, write useState(() => return 0). It will render only one time.

useEffect

useEffect is used to perform side effects in components and is imported from the React module. By "side effects," we mean tasks such as fetching data or updating the DOM, etc.

useEffect takes two arguments: a function and optional dependencies (an array).

import { useEffect } from 'react';

useEffect(() => {
  //code
}, [dependencies]);

The dependencies array ensures when the effect will re-run.

There are three cases of dependency arrays:

No dependency array : useEffect will be called every time. Let's see useEffect in action:

import { useEffect, useState } from "react";

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

  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1);
      console.log("called");
    }, 2000);
  });

  return (
    <div>
      <h1>Count is called {count} times.</h1>
    </div>
  );
}

Here, after every 2 seconds, the count will increase by 1, and "called" will be logged in the console.

Empty dependency array [] : useEffect will be called once,during initial render.

import { useEffect, useState } from "react";

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

  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1);
      console.log("called");
    }, 2000);
  }, []);

  return (
    <div>
      <h1>Count is called {count} times.</h1>
    </div>
  );
}

In the above code , we added an empty dependency array [].Now, useEffect will run only one time.

Some value passed in the dependency array: useEffect will be called every time whenever the value passed in the dependency array changes. We can pass any number of values in the dependency array.

import { useEffect, useState } from "react";

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

  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1);
      console.log("called");
    }, 2000);
  }, [count]);

  return (
    <div>
      <h1>Count is called {count} times.</h1>
    </div>
  );
}

In the above code, count is passed in the dependency array. So whenever count is updated, useEffect will be called again. In the above code, the count will increase infinitely as every time count is updated, useEffect will be called again, and this will go on and on.

There is an effect cleanup function, which will stop the useEffect re-execution, as there may be a memory leak problem. The cleanup ensures that no unexpected behaviour occurs.

import { useEffect, useState } from "react";

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

  useEffect(() => {
    const timer = setTimeout(() => {
      setCount((count) => count + 1);
      console.log("called");
    }, 2000);

    return () => clearInterval(timer);
  }, [count]);

  return (
    <div>
      <h1>Count is called {count} times.</h1>
    </div>
  );
}

Note: useEffect will at least run once in the initial render.

Promise APIs with Example🤝

Nitesh Patel — Tue, 31 Oct 2023 16:32:38 +0000

We know that promise is a special JavaScript object. It is a placeholder for a value which can be either fulfilled or rejected.

In this we will discuss how we can handle multiple promises.

1. Promises.all - It is used to handle multiple promises together. It takes array of promises as an input.

NOTE : You can take any iterable as input but as of now we are considering only array.

Example: promises.all([p1,p2,p3]) , where p1,p2,p3 are three different promises.
Suppose p1 takes 3sec , p2 takes 1sec and p3 takes 2sec time to complete.

case 1 : If all of three promises are fulfilled/success/resolve then output will be array of resolve value of all the three individual promises.

output : [val1,val2,val3]
where (val1,val2,val3 are object)

When the code executed, all the three promises will run parallelly but wait for all to finish. In our example , after 3sec output will be generated as p1 takes maximum time(3sec).

Case 2 : If any or all of the promises get rejected.

When code is executed and all promises run parallelly and as soon as any of promises get rejected, error will be thrown. The error will be same as error of that particular promise.

Suppose p2 get rejected while p1, p3 get resolved in the above example, then error will be thrown immediately after p2 is executed i.e. after 1sec.

2. Promise.allSettled

We have seen that if any of the promises get rejected then error is thrown, if we want result of other two promises whichever are resolved then we can use promise.allSettled

Example: promise.allSettled([p1,p2,p3]) , where p1,p2,p3 are three different promises.
Suppose p1 takes 3sec , p2 takes 1sec and p3 takes 2sec time to complete.

case 1 : If all promises get resolve then output will be array of resolve value of promise.

case2 : If any of promise get rejected.

Suppose p2 fails/rejected and p1, p3 get resolved then output will be array of return value of each promises. It doesn't matter if return value is error or success and it will wait for all the promises to settle.

NOTE : Promise.all is like fast failing and Promise.allSettled wait for settling promise then give result accordingly.

3. Promise.race

In this whichever promise get settled first, whether it is resolved or rejected, output is given accordingly. It doesn't wait for other promises to settle.

4. Promise.any

It is same as promise.race but the difference is that it will wait for first fullfilled/resolved/success promise result and then output is produced.

If all of the promises fails/rejected then output will be aggregate error.

Understand CORS 🌐 in Easy Way🦾

Nitesh Patel — Sun, 15 Oct 2023 07:00:12 +0000

CORS : Cross-Origin Resource Sharing

Basically CORS is a security feature of web browser that allow or restrict the web page in one domain to access resource from other domain (cross-origin).

For example, when you fetch data from an api, an error occurred. You may have seen the error in the console of the browser. It happens because api doesn't know that the request you're sending is secure or not.
To access the resource, browser need to allow cross-origin request.

Here CORS mechanism comes into picture.

The response we get after sending a request for data from api, contains HTTP header also. This HTTP header has Access-control-allow-origin and Access-control-allow-method.

Preflight Request is sent automatically from browser as a part of CORS mechanism. It is used to check whether the cross-origin(other domain) is safe to execute or not.

After preflight request, actual request is sent to the other domain i.e. cross-origin.

Not every time preflight request is sent.For simple request, browser doesn't sent preflight request.
It is only sent if browser detect that there might be some security concerns.

That's the simple explaination of cors. For in-depth information, MDN docs are best!