Apply Polyfill in JavaScript: Step by Step Explanation (For Interview)

Understand Apply Method in JavaScript

apply method works similarly to the call method and is used to pass the dynamic context while function invocation. apply method takes the function parameters as an Array rather than comma-separate values in call method. Here is an example

Examples:

Passing context to the function with parameters

// function
function getStudentInfo(stream, college) {
  console.log(
    `${this.firstName} ${this.lastName} has ${stream} stream in ${college}.`
  );
}

const student1 = {
  firstName: 'Anuj',
  lastName: 'Sharma',
  passingYear: 2012,

  getPassingYear: function () {
    console.log(`Passing year is ${this.passingYear}`);
  },
};

const student2 = {
  firstName: 'Ravi',
  lastName: 'Kumar',
  passingYear: 2018,
};

// Pass student1 and student2 as context

getStudentInfo.apply(student1, ['IT', 'Poornima']);
// Output: Anuj Sharma has IT stream in Poornima.

getStudentInfo.apply(student2, ['CS', 'JEC']);
// Output: Ravi Kumar has CS stream in JEC.

If nothing is passed as a context then, globalThis is used by default as context. In browser env globalThis points to "window" and in node globalThis points to "global" object.

const firstName= 'Anuj';
const lastName= 'Sharma';

// function
function getStudentInfo(stream, college) {
  console.log(
    `${this.firstName} ${this.lastName} has ${stream} stream in ${college}.`
  );
}

// By default window context got passed
getStudentInfo.apply();
// Output: Anuj Sharma has undefined stream in undefined.

Apply Polyfill in JavaScript: Step by Step Explanation

Here is the step-by-step explanation of the apply polyfill, this polyfill is similar to the call polyfill with the only difference with parameters passed as an Array,

Step 1: Edge case handling, to check if the second parameter is array. In the case when the second parameter is not array it throws an Error.

Step 2: Capture the currentContext, this will be either the context passed as the first parameter of the apply function. In case nothing is passed currentContext gets the globalThis as context value, which is "window" in the browser & "global" in Nodejs env. globalThis will provide appropriate value as per the execution environment.

Step 3: Create a temporary new Symbol key to avoid overriding any existing key in the currentContext (Nothing but an object). Assign the function's context ("this") to the newly added temporary key, on which the call function is invoked.

Step 4: Now, since the invoker function is part of the currentContext, It can access values from the current context. Now call the function and pass the arguments (Array of parameters got as part of the apply).

Step 5: Delete the symbol key, to avoid any pollution in the currentContext.

Step 6: Return the result which got as part of function execution as the final result.

Apply Polyfill Implementation:

Function.prototype.customApply = function (context, args = []) {
  
  // Step 1: Edge case handling
  if (!Array.isArray(args)) {
    throw new Error("Second parameter should be array.");
  }
  
  // Step 2: Assign context
  let currentContext = context || globalThis;

  // Step 3: Create a temporary new symbol key & assign the function
  let newProp = Symbol();
  currentContext[newProp] = this;

  // Step 4: function invocation
  let result = currentContext[newProp](...args);

  // Step 5: Delete temporary key
  delete currentContext[newProp];

  return result;
};

Further Reading

👉 Call Polyfill in JavaScript: Step by Step Explanation 

👉 Bind polyfill in JavaScript: Step by Step Explanation