Harman Panwar

Posted on May 10

String Polyfills and Common Interview Methods in JavaScript

Understanding JavaScript String Polyfills: A Comprehensive Guide

Introduction

JavaScript string methods are fundamental building blocks that every developer uses daily. But what happens when you're working with older environments that don't support the latest string methods? That's where polyfills come in—they're essentially "bridge code" that allows you to use modern JavaScript features in older environments by implementing the missing functionality yourself.

In this comprehensive guide, we'll explore the world of string polyfills, understanding not just what they are, but why they matter and how to implement them effectively. Whether you're preparing for technical interviews or building backward-compatible applications, understanding polyfills will elevate your JavaScript mastery.

What Are Polyfills and Why Do We Need Them?
Essential String Methods and Their Polyfills
Step-by-Step Implementation Guides
Interview-Ready Code Examples
Best Practices and Common Pitfalls
Advanced Techniques

What Are Polyfills and Why Do We Need Them?

The Problem: Browser Inconsistencies and Legacy Environments

Imagine you're building a web application that needs to support Internet Explorer 11, which doesn't support the String.prototype.includes() method introduced in ES6. Without a polyfill, your code would throw an error whenever you try to use includes().

// This works in modern browsers
"Hello World".includes("World"); // true

// In older browsers without include support
// Error: Object doesn't support property or method 'includes'

What Exactly Is a Polyfill?

A polyfill is a piece of code (usually a JavaScript function) that provides functionality that doesn't exist in the target environment. The term was coined by Remy Sharp and is a play on "polygon filling"—filling in the missing shapes in your browser's polygon.

Why Should You Learn Polyfills?

Understanding and writing polyfills demonstrates several important skills:

Deep Understanding of Language Features: Writing a polyfill requires you to understand how the native method actually works internally.
Problem-Solving Ability: Polyfills require creative problem-solving to implement features using only the tools available in older environments.
Interview Success: Many companies ask candidates to implement polyfills because it tests fundamental JavaScript knowledge.
Backward Compatibility: You can support older browsers without sacrificing modern features.

Essential String Methods and Their Polyfills

Let's explore the most commonly polyfilled string methods, starting from the simplest to more complex implementations.

1. String.prototype.includes()

Purpose: Determines whether a string contains another string.

ES6 Specification: Returns true if the search string is found anywhere in the string, false otherwise.

Basic Polyfill:

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

Understanding the Implementation:

We first check if the method already exists (if (!String.prototype.includes))
If it doesn't exist, we add our implementation
We use the existing indexOf() method which has been available since ECMAScript 3
We return true if indexOf() returns any position other than -1

Visual Example:

Original String: "Hello World"
Search: "World"
Position: 0

Step 1: Call indexOf("World", 0)
Step 2: indexOf returns 6 (position of "World")
Step 3: 6 !== -1 is true
Result: true

2. String.prototype.startsWith()

Purpose: Determines whether a string begins with the characters of a specified string.

Basic Polyfill:

if (!String.prototype.startsWith) {
    String.prototype.startsWith = function(searchString, position) {
        position = position || 0;
        return this.indexOf(searchString, position) === position;
    };
}

Detailed Explanation:

The position parameter defaults to 0 if not provided
We use indexOf() to find where the search string appears
We compare that position with our expected starting position
If they match, the string starts with the search string

Visual Example:

Original String: "Hello World"
Search: "Hello"
Position: 0

Step 1: Call indexOf("Hello", 0)
Step 2: indexOf returns 0
Step 3: 0 === 0 is true
Result: true

3. String.prototype.endsWith()

Purpose: Determines whether a string ends with the characters of a specified string.

Polyfill with Full Options:

if (!String.prototype.endsWith) {
    String.prototype.endsWith = function(searchString, length) {
        if (length === undefined || length > this.length) {
            length = this.length;
        }
        return this.substring(length - searchString.length, length) === searchString;
    };
}

Step-by-Step Breakdown:

String: "Hello World"
Search: "World"
Length: undefined (defaults to 11)

Step 1: length = 11 (string length)
Step 2: substring(11 - 5, 11) = substring(6, 11)
Step 3: substring(6, 11) = "World"
Step 4: "World" === "World" is true
Result: true

4. String.prototype.repeat()

Purpose: Returns a new string containing the specified number of copies of the original string.

Polyfill Implementation:

if (!String.prototype.repeat) {
    String.prototype.repeat = function(count) {
        // Validate input
        if (count < 0) {
            throw new RangeError('Invalid count value');
        }
        if (count === Infinity) {
            throw new RangeError('Invalid count value');
        }
        if (typeof count !== 'number') {
            count = Number(count) || 0;
        }
        count = Math.floor(count);

        // Handle special case
        if (count === 0) {
            return '';
        }

        // Build the repeated string
        let result = '';
        while (count > 0) {
            if (count % 2 === 1) {
                result += this;
            }
            count = Math.floor(count / 2);
            if (count > 0) {
                this += this;
            }
        }
        return result;
    };
}

Understanding the Optimization:

The implementation uses a doubling technique for efficiency:

Original: "abc"
Repeat 5 times:

Step 1: count = 5 (odd)
        result = "abc"
        remaining = 2

Step 2: this = "abcabc"
        count = 2 (even)
        result = "abc"
        remaining = 1

Step 3: count = 1 (odd)
        result = "abc" + "abcabc" = "abcabcabcabc"
        remaining = 0

Result: "abcabcabcabcabc" (5 times)

5. String.prototype.padStart()

Purpose: Pads the current string with another string until the resulting string reaches the given length.

Complete Polyfill:

if (!String.prototype.padStart) {
    String.prototype.padStart = function(targetLength, padString) {
        // Handle invalid input
        if (this.length > targetLength) {
            return String(this);
        }

        // Default padding character
        padString = String(padString || ' ');

        // Handle empty or invalid padding string
        if (padString.length === 0) {
            return String(this);
        }

        // Calculate padding needed
        const paddingLength = targetLength - this.length;
        const repetitions = Math.ceil(paddingLength / padString.length);
        const paddedString = padString.repeat(repetitions);

        return paddedString.substring(0, paddingLength) + this;
    };
}

Visual Walkthrough:

Original: "5"
Target: 4
Pad: "0"

Step 1: this.length = 1, targetLength = 4
        1 is not greater than 4, continue

Step 2: padString = "0"

Step 3: paddingLength = 4 - 1 = 3

Step 4: repetitions = Math.ceil(3 / 1) = 3

Step 5: paddedString = "0".repeat(3) = "000"

Step 6: "000".substring(0, 3) = "000"

Result: "000" + "5" = "0005"

6. String.prototype.padEnd()

Purpose: Pads the current string with another string until the resulting string reaches the given length, applied from the end of the string.

Polyfill:

if (!String.prototype.padEnd) {
    String.prototype.padEnd = function(targetLength, padString) {
        if (this.length >= targetLength) {
            return String(this);
        }

        padString = String(padString || ' ');

        if (padString.length === 0) {
            return String(this);
        }

        const paddingLength = targetLength - this.length;
        const repetitions = Math.ceil(paddingLength / padString.length);
        const paddedString = padString.repeat(repetitions);

        return this + paddedString.substring(0, paddingLength);
    };
}

Comparison with padStart:

Original: "Hello"
Target: 10
Pad: "."

padStart: "....." + "Hello" = ".....Hello"
padEnd:   "Hello" + "....." = "Hello....."

Step-by-Step Implementation Guides

Building a Polyfill from Scratch: The Thought Process

When implementing any polyfill, follow this systematic approach:

Read the Specification: Understand what the method should do
Identify Edge Cases: Consider all possible inputs
Use Available Methods: What methods are guaranteed to exist?
Test Thoroughly: Verify against the native implementation

Example: Implementing trim()

Let's walk through implementing String.prototype.trim() step by step.

Step 1: Understanding the Goal

The trim() method removes whitespace from both ends of a string.

Step 2: Identifying the Strategy

We need to:

Find the first non-whitespace character from the start
Find the last non-whitespace character from the end
Extract the substring between these positions

Step 3: Using Regex (Modern Approach)

// Most modern implementation uses regex
String.prototype.trim = function() {
    return this.replace(/^\s+|\s+$/g, '');
};

Step 4: Without Regex (Legacy Approach)

// For older environments without regex support
String.prototype.trim = function() {
    let start = 0;
    let end = this.length - 1;

    // Find first non-whitespace character
    while (start <= end && this[start] === ' ') {
        start++;
    }

    // Find last non-whitespace character
    while (end >= start && this[end] === ' ') {
        end--;
    }

    // Return the trimmed string
    return this.substring(start, end + 1);
};

Step 5: Testing

// Test cases
console.log("  hello  ".trim());  // "hello"
console.log("\t\nhello\t\n".trim());  // "hello"
console.log("   ".trim());  // ""
console.log("hello".trim());  // "hello"

Implementing a Chainable Polyfill

Many modern methods return the modified string, allowing method chaining:

if (!String.prototype.capitalize) {
    String.prototype.capitalize = function() {
        return this.charAt(0).toUpperCase() + this.slice(1);
    };
}

// Usage - method chaining
const text = "hello world".trim().capitalize();
console.log(text); // "Hello world"

Interview-Ready Code Examples

Classic Interview Question: Implementing reduce for Strings

Challenge: Implement a polyfill for String.prototype.reduce that simulates array reduce behavior for strings.

if (!String.prototype.reduce) {
    String.prototype.reduce = function(callback, initialValue) {
        // Type checking
        if (typeof callback !== 'function') {
            throw new TypeError(callback + ' is not a function');
        }

        const str = String(this);
        const length = str.length;

        // Handle empty string without initial value
        if (length === 0 && arguments.length < 2) {
            throw new TypeError('Reduce of empty string with no initial value');
        }

        let accumulator;
        let currentIndex;

        // Initialize accumulator
        if (arguments.length >= 2) {
            accumulator = initialValue;
            currentIndex = 0;
        } else {
            accumulator = str[0];
            currentIndex = 1;
        }

        // Iterate through string
        while (currentIndex < length) {
            const currentValue = str[currentIndex];
            accumulator = callback(accumulator, currentValue, currentIndex, str);
            currentIndex++;
        }

        return accumulator;
    };
}

Test Cases:

// Count character occurrences
const str = "hello world";
const count = str.reduce((acc, char) => {
    acc[char] = (acc[char] || 0) + 1;
    return acc;
}, {});

console.log(count);
// { h: 1, e: 1, l: 3, o: 2, ' ': 1, w: 1, r: 1, d: 1 }

Advanced: Implementing matchAll Polyfill

if (!String.prototype.matchAll) {
    String.prototype.matchAll = function(regexp) {
        // Ensure regexp has global flag
        if (!regexp.global) {
            throw new TypeError('matchAll requires global flag');
        }

        const str = String(this);
        const matches = [];
        let match;

        // Use exec in a loop
        while ((match = regexp.exec(str)) !== null) {
            matches.push(match);
        }

        // Return an iterator
        return matches[Symbol.iterator]();
    };
}

Usage:

const text = "test1 test2 test3";
const regex = /test\d/g;

for (const match of text.matchAll(regex)) {
    console.log(`Found: ${match[0]} at index ${match.index}`);
}
// Found: test1 at index 0
// Found: test2 at index 6
// Found: test3 at index 12

Best Practices and Common Pitfalls

1. Always Check Before Overwriting

// ❌ Wrong - Always overwrites
String.prototype.includes = function(search) {
    return this.indexOf(search) !== -1;
};

// ✅ Correct - Only adds if missing
if (!String.prototype.includes) {
    String.prototype.includes = function(search) {
        return this.indexOf(search) !== -1;
    };
}

2. Handle Edge Cases Properly

// ❌ Incomplete - doesn't handle edge cases
String.prototype.truncate = function(length) {
    return this.substring(0, length);
};

// ✅ Complete - handles all edge cases
String.prototype.truncate = function(length, suffix) {
    suffix = suffix !== undefined ? String(suffix) : '...';

    if (this.length <= length) {
        return String(this);
    }

    const truncatedLength = length - suffix.length;
    if (truncatedLength <= 0) {
        return suffix.substring(0, length);
    }

    return this.substring(0, truncatedLength) + suffix;
};

3. Handle Different Input Types

// ❌ Assumes string input
String.prototype.escape = function() {
    return this.replace(/&/g, '&amp;').replace(/</g, '&lt;');
};

// ✅ Handles any input by converting to string
String.prototype.escape = function() {
    return String(this)
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;');
};

4. Document Your Polyfills

/**
 * Polyfill for String.prototype.match()
 *
 * Simulates the native match method for environments that don't support it.
 *
 * @param {RegExp} regex - Regular expression object
 * @returns {Array|null} - Array of matches or null
 *
 * @example
 * "hello world".match(/world/); // ["world"]
 */
if (!String.prototype.match) {
    String.prototype.match = function(regex) {
        if (regex instanceof RegExp === false) {
            regex = new RegExp(regex);
        }

        if (regex.global) {
            const matches = [];
            let match;
            const str = String(this);

            while ((match = regex.exec(str)) !== null) {
                matches.push(match[0]);
            }

            return matches.length === 0 ? null : matches;
        } else {
            const result = regex.exec(String(this));
            return result ? result : null;
        }
    };
}

Advanced Techniques

Implementing Template Literal Functionality

String.prototype.template = function(data) {
    return this.replace(/\${(\w+)}/g, (match, key) => {
        return data.hasOwnProperty(key) ? data[key] : match;
    });
};

// Usage
const template = "Hello ${name}, you have ${count} messages";
const result = template.template({ name: "John", count: 5 });
console.log(result); // "Hello John, you have 5 messages"

Creating a Word Wrap Polyfill

if (!String.prototype.wordWrap) {
    String.prototype.wordWrap = function(width) {
        const words = String(this).split(' ');
        const lines = [];
        let currentLine = '';

        for (const word of words) {
            // If adding this word exceeds width, start new line
            if (currentLine.length + word.length + 1 > width) {
                if (currentLine) {
                    lines.push(currentLine);
                    currentLine = '';
                }
            }

            // Add word to current line
            if (currentLine) {
                currentLine += ' ';
            }
            currentLine += word;
        }

        // Don't forget the last line
        if (currentLine) {
            lines.push(currentLine);
        }

        return lines.join('\n');
    };
}

Visual Example:

Input: "The quick brown fox jumps over the lazy dog"
Width: 15

Processing:
Line 1: "The quick" (10 chars)
Line 2: "brown fox jumps" (15 chars)
Line 3: "over the lazy" (13 chars)
Line 4: "dog" (3 chars)

Output:
The quick
brown fox jumps
over the lazy
dog

Debouncing String Operations for Performance

function debouncePolyfill(method) {
    let timeout;
    const str = this;

    return function debounced(...args) {
        const later = () => {
            timeout = null;
            method.apply(str, args);
        };

        clearTimeout(timeout);
        timeout = setTimeout(later, 300);
    };
}

Quick Reference: Polyfill Template

Use this template for creating new polyfills:

/**
 * Polyfill description here
 *
 * @param {type} paramName - Description
 * @returns {type} Description of return value
 */
if (!String.prototype.methodName) {
    String.prototype.methodName = function(param) {
        // Convert 'this' to string to handle non-string inputs
        const str = String(this);

        // Handle edge cases

        // Main implementation

        // Return result as string
        return String(result);
    };
}

Common Interview Questions Related to Polyfills

Q1: Why do we need to check `if (!String.prototype.method)` before adding polyfills?

A: This prevents overwriting native implementations that might be more optimized or secure. It also allows the native implementation to be used when available, improving performance.

Q2: What's the difference between a polyfill and a shim?

A: A polyfill specifically fills in missing functionality to match newer specifications. A shim is more general—it can provide different implementations that may not match specifications exactly.

Q3: Can polyfills affect performance?

A: Yes. If you're adding many polyfills to an older browser, it can increase load time and parse time. However, polyfills are usually negligible compared to the benefits they provide.

Q4: What's the safest way to add multiple polyfills?

A: Create a single polyfill bundle at the start of your application, after checking for each method's existence:

// polyfills.js
(function() {
    'use strict';

    // String polyfills
    if (!String.prototype.includes) { /* ... */ }
    if (!String.prototype.startsWith) { /* ... */ }
    if (!String.prototype.endsWith) { /* ... */ }

    // Array polyfills
    if (!Array.prototype.includes) { /* ... */ }
    if (!Array.prototype.find) { /* ... */ }

    // Object polyfills
    if (!Object.assign) { /* ... */ }
})();

Summary

Polyfills are powerful tools that enable modern JavaScript development in older environments. By understanding how to implement them, you gain deeper insight into how JavaScript works under the hood.

Key Takeaways:

Always check if a method exists before adding a polyfill
Handle edge cases and different input types
Use the simplest approach that achieves the correct result
Test your polyfills against native implementations
Document your code thoroughly for maintainability

Recommended Practice: Pick one method from this guide and implement its polyfill without looking at the examples. This will solidify your understanding and prepare you for technical interviews.

Understanding JavaScript String Polyfills: A Comprehensive Guide

Introduction

Table of Contents

What Are Polyfills and Why Do We Need Them?

The Problem: Browser Inconsistencies and Legacy Environments

What Exactly Is a Polyfill?

Why Should You Learn Polyfills?

Essential String Methods and Their Polyfills

1. String.prototype.includes()

2. String.prototype.startsWith()

3. String.prototype.endsWith()

4. String.prototype.repeat()

5. String.prototype.padStart()

6. String.prototype.padEnd()

Step-by-Step Implementation Guides

Building a Polyfill from Scratch: The Thought Process

Example: Implementing trim()

Implementing a Chainable Polyfill

Interview-Ready Code Examples

Classic Interview Question: Implementing reduce for Strings

Advanced: Implementing matchAll Polyfill

Best Practices and Common Pitfalls

1. Always Check Before Overwriting

2. Handle Edge Cases Properly

3. Handle Different Input Types

4. Document Your Polyfills

Advanced Techniques

Implementing Template Literal Functionality

Creating a Word Wrap Polyfill

Debouncing String Operations for Performance

Quick Reference: Polyfill Template

Common Interview Questions Related to Polyfills

Q1: Why do we need to check if (!String.prototype.method) before adding polyfills?

Q2: What's the difference between a polyfill and a shim?

Q3: Can polyfills affect performance?

Q4: What's the safest way to add multiple polyfills?

Summary

Further Reading

Q1: Why do we need to check `if (!String.prototype.method)` before adding polyfills?