Polyfill for Map, Filter, and Reduce Methods in Javascript

Maaz Khan — Thu, 15 Aug 2024 07:38:04 +0000

Map

It returns new array from original array, by performing some operations( callback function) on each array items. It does not alter the original array.

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

const double = nums.map((num, i, arr) => num * 2);
console.log(double); // [2, 4, 6, 8]

Implementation

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

Filter

It returns a new array containing only the elements that satisfy the given condition (i.e., for which the callback returns true). The original array remains unchanged.

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

const greaterThan2 = nums.filter((num, i, arr) => num > 2);
console.log(greaterThan2); // [3, 4]

Implementation

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

Reduce

It is probably the most complicated of all three. This method processes an array’s elements to produce a single output value.

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

const sum = nums.reduce((acc, num) => acc + num, 0);

console.log(sum); // 10

Implementation

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

Sync Your React State with URL Search Parameters by Creating a Custom React Hook

Maaz Khan — Sun, 11 Aug 2024 18:15:05 +0000

In this post, I will introduce you to a custom React hook, useQueryState which you can think of as a useState hook with the additional capability of syncing with the query parameters of a URL. This would be very helpful if you'd like to keep the state across page reloads or share the state through the URL.

useQueryState Hook

import { Dispatch, SetStateAction, useEffect, useState } from "react";
import { useSearchParams } from "react-router-dom";

type UseQueryStateReturnType<T> = [T, Dispatch<SetStateAction<T>>];

const useQueryState = <T>(
 param: string,
 initialValue: T
): UseQueryStateReturnType<T> => {
 const [searchParams, setSearchParams] = useSearchParams();

const paramValue = searchParams.get(param);
 let parsedValue: T;
 if (paramValue !== null) {
 parsedValue = JSON.parse(paramValue) as T;
 } else {
 parsedValue = initialValue;
 }

const [value, setValue] = useState<T>(parsedValue);

useEffect(() => {
 setSearchParams((prev) => {
 if (value !== null && value !== undefined && value !== "") {
 prev.set(param, JSON.stringify(value));
 } else prev.delete(param);
 return prev;
 });
 }, [value]);

return [value, setValue];
};

export default useQueryState;

Usage

Import useQueryState hook into your component

import useQueryState from "..../useQueryState";

Use within your component

const [searchValue, setSearchValue] = useQueryState<string>("param", "");

Parameters

param (string): The name of the query parameter.
initialValue (T): The initial value, will be used when the query parameter is not present in the URL.

Return Value

An Array containing two items: current value and a setter function to update that value respectively

Example

import useQueryState from "..../useQueryState";

const Search = () => {
  const [searchValue, setSearchValue] = useQueryState<string>("search", "");

  return (
    <div className="App">
      <input
        onChange={(e) => setSearchValue(e.target.value)}
        value={searchValue}
        placeholder="Search"
      />
      <p>Search value is: {searchValue}</p>
    </div>
  );
};

export default Search;

In this example, the searchValue state is automatically synced with the search query parameter in the URL.

Demo

See the interactive codesandbox demo:

Working Explanation

The useQueryState hook utilizes the useSearchParams hook from react-router-dom to manage URL query parameters. Here's a detailed breakdown of its functionality:

1. Initial State Setup:

If a query parameter is present in the URL for the specified key, its value is parsed and used as the initial state.
If the query parameter is not present, the provided initial value is used.

2. State Synchronization:

Whenever the state changes, the corresponding query parameter in the URL is updated.
If the state is set to an empty string, null, or undefined, the query parameter is removed from the URL.

3. Stringify and Parsing:

Since URL query parameters can only store strings, non-string values are stringified before being stored.
When retrieving the value from the URL, it is parsed back to its original form before being used as the initial state.

Forem: Maaz Khan

Polyfill for Map, Filter, and Reduce Methods in Javascript

Map

Implementation

Filter

Implementation

Reduce

Implementation

Sync Your React State with URL Search Parameters by Creating a Custom React Hook

useQueryState Hook

Usage

Parameters

Return Value

Example

Demo

Working Explanation