String Polyfills and Common Interview Methods in JavaScript

const text = "hello world";


console.log(text.toUpperCase()); // HELLO WORLD
console.log(text.includes("world")); // true
console.log(text.slice(0, 5)); // hello


`These methods make string operations easy—but what’s happening behind the scenes?

---

## ❓ Why Developers Write Polyfills

A **polyfill** is:

> A custom implementation of a built-in method.

### 💡 Why use them?

* Understand internal logic
* Support older browsers
* Practice problem-solving for interviews

---

## ⚙️ Concept: How String Methods Work

At a basic level:

* Strings are **arrays of characters (conceptually)**
* Methods loop through characters and apply logic

---

## 🔧 Implementing Simple String Polyfills

---

### 1. `toUpperCase()` Polyfill


```js id="poly1"
String.prototype.myToUpperCase = function() {
 let result = "";

 for (let i = 0; i < this.length; i++) {
 const charCode = this.charCodeAt(i);

 // a-z → A-Z
 if (charCode >= 97 && charCode <= 122) {
 result += String.fromCharCode(charCode - 32);
 } else {
 result += this[i];
 }
 }

 return result;
};

console.log("hello".myToUpperCase());`


Enter fullscreen mode
 


 Exit fullscreen mode


### 🧠 Logic:


- Convert character to ASCII

- Shift lowercase → uppercase

- Build new string


### 2. includes() Polyfill


```js id="poly2"
String.prototype.myIncludes = function(search) {
 for (let i = 0; i <= this.length - search.length; i++) {
 let found = true;


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

if (found) return true;`


Enter fullscreen mode
 


 Exit fullscreen mode


}


return false;
};


console.log("hello world".myIncludes("world"));


`---

### 🧠 Logic:

* Slide window over string
* Compare characters one by one

---

### 3. `reverse()` (Custom Utility)


```js id="poly3"
function reverseString(str) {
 let result = "";

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

 return result;
}

console.log(reverseString("hello"));`


Enter fullscreen mode
 


 Exit fullscreen mode


## 📊 String Processing Flow


`Input String → Loop through characters → Apply logic → Build result → Output`


Enter fullscreen mode
 


 Exit fullscreen mode


## 🎯 Common Interview String Problems


### 1. Check Palindrome


```js id="int1"
function isPalindrome(str) {
 const reversed = str.split("").reverse().join("");
 return str === reversed;
}


`---

### 2. Count Characters


```js id="int2"
function countChars(str) {
 const map = {};

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

 return map;
}`


Enter fullscreen mode
 


 Exit fullscreen mode


### 3. Remove Duplicates


```js id="int3"
function removeDuplicates(str) {
 let result = "";


for (let char of str) {
 if (!result.includes(char)) {
 result += char;
 }
 }


return result;
}


`---

### 4. Find First Non-Repeating Character


```js id="int4"
function firstUnique(str) {
 const map = {};

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

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

 return null;
}`


Enter fullscreen mode
 


 Exit fullscreen mode


## ⚠️ Importance of Understanding Built-in Behavior


Interviewers often ask:


- “How does includes() work internally?”

- “Can you implement slice()?”


They’re testing:


- Your logic

- Your understanding of edge cases

- Your ability to think step-by-step


## 🧩 Polyfill Behavior Representation


`Built-in Method
 ↓
Break into steps
 ↓
Recreate logic manually
 ↓
Custom Polyfill`


Enter fullscreen mode
 


 Exit fullscreen mode


## 🧠 Problem-Solving Mindset


When solving string problems:


- ✔ Think character by character

- ✔ Use loops effectively

- ✔ Consider edge cases

- ✔ Focus on logic, not memorization


## 🚀 Final Thoughts


String polyfills are not just about rewriting built-in methods—they help you:


- Understand JavaScript deeply

- Improve problem-solving skills

- Prepare for technical interviews


Master the logic, and you’ll handle any string problem with confidence.