String Polyfills and Common Interview Methods in JavaScript

Introduction

In this blog, you are going to learn how JavaScript built-in methods work internally. You will also learn how developers make JavaScript compatible with older browsers using polyfills.

What are polyfills :

A polyfill is a piece of JavaScript code that adds support for modern features in older browsers that don’t support them natively.

If the browser doesn’t have a feature, we create it ourselves.

Example :

Let's take an example that older browser doesn't support Array.prototype.includes.

We write polyfill like this

if (!Array.prototype.includes) {
  Array.prototype.includes = function (value) {
    for (let i = 0; i < this.length; i++) {
      if (this[i] === value) {
        return true;
      }
    }
    return false;
  };
}

What are Built-in methods?

Built-in methods are predefined functions provided by the JavaScript runtime environment that are used to perform specific tasks. We don’t need to write the logic from scratch. Conceptually, they are methods (functions) attached to the prototype of built-in objects.

const str = "hello world";

const result = str.toUpperCase();

console.log(result); // "HELLO WORLD"

toUpperCase() method is defined in String.prototype

we are just using it , not created it.

How they works internally

A method is a property of an object stored in standard built-in objects (e.g., String.prototype, Array.prototype, Math).

Example of a string method :

console.log(String.prototype.toUpperCase);

[Function: toUpperCase]

This shows that toUpperCase exists inside String.prototype.

Methods are on prototypes not on each string :

const str1 = "hello";
const str2 = "world";

console.log(str1.toUpperCase === str2.toUpperCase); // true

This means both str1 and str2 use the same function.

String.prototype.toUpperCase

That function lives here.

Internal Working :

When you do

"hello".toUpperCase()

JavaScript actually look like this .

String.prototype.toUpperCase.call("hello")

Calling same function for all string values.

If every string had its own copy:

str1.toUpperCase = function() {}
str2.toUpperCase = function() {}

Memory waste.

Important Question :

Technically , In javaScript primitive datatypes does not have their own methods and properties because they are not object.

String is also primitive data type. How can we use it like this? Because we can usually access values with dot notation (.) only in objects. But here, "hello" is a string.

"hello".toUpperCase()

However they behave as they have methods because of the process called auto boxing.

So, when we use a built-in method on any value, in this case a string, JavaScript internally does this:

new String("hello").toUpperCase()

Once the method is executed, the temporary object is destroyed and the result is returned.

Exceptions : Null and Undefined: These are the only primitives that do not have object wrappers. Attempting to access a method on null or undefined will result in a TypeError.

Now you understand how built- in method work internally.

Common interview string problems :

1. Reverse string :

function reverseString(str) {
  return str.split('').reverse().join('');
}

Interviews will ask this to solve without built-in methods

function reverseString(str) {
  let result = '';
  for (let i = str.length - 1; i >= 0; i--) {
    result += str[i];
  }
  return result;
}

2. Check Palindrome :

function isPalindrome(str) {
  let reversed = str.split('').reverse().join('');
  return str === reversed;
} 

without built-in method

function isPalindrome(str) {
  let left = 0, right = str.length - 1;

  while (left < right) {
    if (str[left] !== str[right]) return false;
    left++;
    right--;
  }
  return true;
}

3. Longest Substring Without Repeating Characters :

Very Important

function longestUniqueSubstring(s) {
  let set = new Set();
  let left = 0;
  let maxLength = 0;

  for (let right = 0; right < s.length; right++) {
    while (set.has(s[right])) {
      set.delete(s[left]);
      left++;
    }

    set.add(s[right]);
    maxLength = Math.max(maxLength, right - left + 1);
  }

  return maxLength;
}

Summary :

In this blog, we learned why developers write polyfills. We also explored some built-in string methods and, most importantly, understood how these methods work internally.

This deeper understanding helps you grasp core JavaScript concepts and prepares you better for interviews.

Finally, we discussed three common string-based interview questions in JavaScript.