Polyfill for call in JavaScript

Santosh Bharti — Thu, 20 Mar 2025 12:37:57 +0000

What is Function.prototype.call?

The call method allows you to invoke a function with a specified this context and pass arguments individually. Here’s a quick example:

How we can Implement custom call

Setting Default Context:

context = context || globalThis;

If context is null or undefined, it defaults to globalThis. This ensures the function is called in the global context when no context is provided.

Creating a Unique Key:

const uniqueKey = Symbol("fn");

A Symbol is used to create a unique property key to avoid overwriting existing properties on the context object.

Assigning the Function to the Context:

context[uniqueKey] = this;

The function (this refers to the function being called) is temporarily added as a property of the context object.

Calling the Function:

const result = context[uniqueKey](...args);

The function is called with the provided arguments using the spread syntax.

Cleaning Up:

delete context[uniqueKey];

The temporary property is removed from the context object to prevent side effects.

Returning the Result:

return result;

The result of the function call is returned.

Understanding Custom Array.prototype.reduce and Its Implementation

Santosh Bharti — Wed, 19 Mar 2025 16:35:46 +0000

What is Array.prototype.reduce?

The reduce method executes a reducer function (provided by you) on each element of the array, resulting in a single output value. The reducer function takes four arguments:

1.Accumulator: The accumulated value previously returned by the last invocation of the callback, or the initialValue if supplied.
2.Current Value: The current element being processed in the array.
3.Current Index: The index of the current element being processed.
4.Source Array: The array on which reduce was called.

array.reduce(reducerCallbackFn,initialValue)

Lets start with basic implementation of reduce

Initializing the Accumulator

let accumulator=initalValue!==undefined?initalValue:this[0]

The accumulator is the value that will be updated with each iteration of the loop. If an initialValue is provided, it is used as the starting value for the accumulator. otherwise, the first element of the array (this[0]) is used as the initial value.

Determining the Start Index

let startIndex = initialValue !== undefined ? 0 : 1;

If an initialValue is provided, the loop should start from index 0 otherwise, it should start from index 1 because the first element is already used as the initial value for the accumulator.

Iterating Over the Array

The loop iterates over the array, starting from the appropriate index. For each element, the callback function is called with the following arguments:

1.Accumulator: The current accumulated value.
2.Current Value: The current element (this[i]).
3.Current Index: The index of the current element (i).
4.Source Array: The array itself (this).

The result of the callback function is assigned back to the accumulator.

DEV Community: Santosh Bharti