String Polyfills and Common Interview Methods in JavaScript

Strings are one of the most frequently used data types in JavaScript, yet many developers rely heavily on built-in methods without truly understanding how they work under the hood. If you're preparing for interviews, this is a gap worth fixing.

JavaScript strings look simple, but behind methods like split(), trim(), includes(), and replace() is logic every developer should understand.

What string methods are

JavaScript provides built-in methods to manipulate strings:

1. toUpperCase()

Converts all characters in a string to uppercase.

let str = "hello world";

console.log(str.toUpperCase()); 

// "HELLO WORLD"

1. toLowerCase()

Converts all characters to lowercase.

let str = "HELLO";

console.log(str.toLowerCase()); 
// "hello"

1. trim()

Removes whitespace from both the beginning and end of a string.

let str = "   hello   ";

console.log(str.trim()); 
// "hello"

1. split()

Splits a string into an array based on a separator.

let str = "apple,banana,mango";

console.log(str.split(",")); 
// ["apple", "banana", "mango"]

1. includes()

Checks if a string contains a specific substring. Returns true or false.

let str = "JavaScript";

console.log(str.includes("Script")); 
// true

console.log(str.includes("Python")); 
// false

1. replace()

Replaces part of a string with another value (only the first match by default).

let str = "I love Java";

console.log(str.replace("Java", "JavaScript")); 
// "I love JavaScript"

1. substring(start, end)

Extracts a portion of a string between two indices.

let str = "JavaScript";

console.log(str.substring(0, 4)); 
// "Java"

Why developers write polyfills

What is a Polyfill?

A polyfill is custom code that implements a built-in method manually so it works even if the environment (like an older browser) doesn’t support it.

1. Browser Compatibility

Not all browsers support newer JavaScript features.

Example: Older browsers didn’t support includes().

So developers write a polyfill:

if (!String.prototype.includes) {
  String.prototype.includes = function(search) {
    return this.indexOf(search) !== -1;
  };
}

Now even old browsers can use includes().

1. Understand How JavaScript Works Internally

Polyfills help you learn the logic behind built-in methods.

Example: Instead of just using:

"hello".includes("ell");

How it actually works:

• Loop through characters
• Compare substrings
• Return true/false

1. Improve Problem-Solving Skills

Writing polyfills forces you to:

• Think step by step
• Handle edge cases
• Understand loops, conditions, and string manipulation

Example: Implementing trim() yourself:

String.prototype.myTrim = function() {
  return this.replace(/^\s+|\s+$/g, "");
};

Implementing simple string utilities

When preparing for interviews, it’s not enough to use string methods—you should be able to build them from scratch. This demonstrates your understanding of loops, conditionals, and how strings behave internally.

At their core, most string utilities rely on a simple idea:

Iterate through characters → Apply logic → Build and return a result

Core Idea Behind String Utilities

Every string operation typically follows this pattern:

Input String → Loop through characters → Apply condition → Build result → Return output

Because strings in JavaScript are immutable, you can’t modify them directly. Instead, you create a new string as the result.

Example 1: Implementing includes()

The goal is to check if a substring exists inside a string.

Logic:
Loop through the main string
At each position, compare characters with the target substring
If all characters match → return true

String.prototype.myIncludes = function(search) {
  for (let i = 0; i <= this.length - search.length; i++) {
    let match = true;

    for (let j = 0; j < search.length; j++) {
      if (this[i + j] !== search[j]) {
        match = false;
        break;
      }
    }

    if (match) return true;
  }
  return false;
};

Nested loops and substring comparison logic (sliding window concept).

Example 2: Implementing indexOf()

This method returns the position of the first match.

Logic:
Same as includes()
Instead of returning true, return the index

String.prototype.myIndexOf = function(search) {
  for (let i = 0; i <= this.length - search.length; i++) {
    let match = true;

    for (let j = 0; j < search.length; j++) {
      if (this[i + j] !== search[j]) {
        match = false;
        break;
      }
    }

    if (match) return i;
  }
  return -1;
};

Example 3: Implementing trim()

This removes whitespace from both ends of a string.

Logic:
Start from the beginning and skip spaces
Start from the end and skip spaces
Extract the substring in between

String.prototype.myTrim = function() {
  let start = 0;
  let end = this.length - 1;

  while (this[start] === ' ') start++;
  while (this[end] === ' ') end--;

  return this.slice(start, end + 1);
};

Two-pointer technique (very common in interviews).

🔸 Example 4: Reverse a String (Utility Function)

Logic:
Traverse from the end
Build a new string

function reverseString(str) {
  let result = '';

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

  return result;
}

Building results step-by-step is fundamental in string manipulation.

Common interview string problems

String problems are a staple in technical interviews because they test your ability to work with loops, conditions, and data structures in a controlled way. While the problems may look different on the surface, most of them rely on a few core patterns.

Understanding these patterns is far more important than memorizing solutions.

1. Reverse a String

This is often the starting point for string manipulation questions.

Problem:

Reverse a given string without using built-in methods.

Approach:
Traverse the string from the end
Build a new string character by character

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

1. Palindrome Check

A palindrome reads the same forward and backward.

Problem:

Check if a string is a palindrome.

Approach:
Compare characters from start and end
Move inward

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

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

1. First Non-Repeating Character Problem:

Find the first character that appears only once.

Approach:
Count frequency of each character
Traverse again to find first unique

function firstUniqueChar(str) {
  const freq = {};

  for (let char of str) {
    freq[char] = (freq[char] || 0) + 1;
  }

  for (let char of str) {
    if (freq[char] === 1) return char;
  }

  return null;
}

1. Anagram Check

Two strings are anagrams if they contain the same characters in a different order.

Problem:

Check if two strings are anagrams.

Approach 1 (Sorting):

function isAnagram(str1, str2) {
  return str1.split('').sort().join('') === str2.split('').sort().join('');
}

Approach 2 (Optimized):

function isAnagram(str1, str2) {
  if (str1.length !== str2.length) return false;

  const count = {};

  for (let char of str1) {
    count[char] = (count[char] || 0) + 1;
  }

  for (let char of str2) {
    if (!count[char]) return false;
    count[char]--;
  }

  return true;
}

1. Longest Substring Without Repeating Characters

Problem:

Find the length of the longest substring with unique characters.

Approach:
Use sliding window
Track characters using a set

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

  for (let right = 0; right < str.length; right++) {
    while (set.has(str[right])) {
      set.delete(str[left]);
      left++;
    }
    set.add(str[right]);
    maxLength = Math.max(maxLength, right - left + 1);
  }

  return maxLength;
}

1. String Compression Problem:

Compress a string like "aaabb" → "a3b2"

Approach:
Count consecutive characters
Build result string

function compressString(str) {
  let result = '';
  let count = 1;

  for (let i = 0; i < str.length; i++) {
    if (str[i] === str[i + 1]) {
      count++;
    } else {
      result += str[i] + count;
      count = 1;
    }
  }

  return result;
}

Importance of understanding built-in behavior

Knowing how methods work internally helps you:

Debug unexpected behavior
Optimize performance
Write cleaner logic without over-relying on libraries
Stand out in interviews

Example:

slice() allows negative indices
substring() swaps indices if start > end
indexOf() is case-sensitive

These subtle differences often become interview questions.

Explain how built-in methods work conceptually

At a low level, most string operations follow this flow:

Input String → Character Iteration → Condition Check → Build Result → Return Output

Key Insight:

Strings are immutable in JavaScript.

So every operation:

• Creates a new string
• Does not modify the original

1. String Processing Flow

"hello world"
      ↓
Loop through characters
      ↓
Apply condition (match / trim / compare)
      ↓
Build new string
      ↓
Return result

2. Polyfill Behavior Representation

Built-in Method
   ↓
Hidden Engine Logic
   ↓
(Your Polyfill)
   ↓
Manual Loop + Conditions