Strings Unlocked: Polyfills and Powerful Methods Every JavaScript Dev Should Know

String are one of the most important and common data type used in JavaScript. String methods are the way we modify a string. We use string methods in everyday word in JavaScript be it in string matching, URL parsing and every dynamic UI elements. Let’s understand that

What is String Method?

String methods are built-in function that helps us to make modification on strings in JavaScript. Some of that methods are —

• .toLowerCase() It is used to lowercase all the character in the string.

• .toUpperCase() It is used to uppercase all the character in the string.

• .trim() It is used to remove extra spaces from the string.

• .slice() It is used to take a exact part of the string.

• .concat() It is used to join two or more string.

How these string methods works internally?

This string methods needs an input string and some parameters based on the method and performs operations based on that and give us the output string.

Strings are immutable in JavaScript so the output string is a new string. That means when it performs a string operation on it, it creates a new string and performs operations.

const str1 = "helloWorld  ";
// Here it create a copy and update according to it
console.log("Updated String: ", str1.toUpperCase());
// Here it prints the original string 
console.log("Original String: ", str1);

The output will be

Updated String:  HELLOWORLD  
Original String:  helloWorld  

What are Polyfills?

Polyfills is a piece of code that used to provide modern functionality on older browser that does not support it . In other words a polyfill is an implementation of own written methods.

To write Polyfills in JavaScript , the Syntax is

String.prototype.methodName = function {
		// actual implementation of the method
}

Now we can call this method as methodName from anywhere in the code and it works as per the define function.

Here is an example code

String.prototype.myToUpper = function () {
    return this.replace(/[a-z]/g, c =>
        String.fromCharCode(c.charCodeAt(0) - 32)
    );
};

let str = "Hello JS";

console.log("Original:", str);
console.log("Upper:", str.myToUpper());
console.log("Original:", str);

The output will be

Original: Hello JS
Upper: HELLO JS
Original: Hello JS

For string one thing we should remember that strings are immutable so in the function always remember to return a string.

The polyfills does not limited to Strings only, we can use it in Array also, we can write polyfills to modify arrays.

Why developers need Polyfills?

We need polyfills for

• Even in today many browser does not support all features, so developers write then down.

• When a developer writes a polyfills by own the developer owns it. It gives the developer an extra advantage of understand the code properly.

• Sometimes some build in methods takes time, but if developer writes a own polyfill then only the required features not any extra features then it works fast.

Custom Polyfills

Here is an example of a custom polyfill on array method.

Array.prototype.mapTwoExistingArray = function () {
    for (let index = 0; index < this.length; index++) {
        this[index] = this[index] * 2;
    }
    return this;
}
Array.prototype.mapTwoNewArray = function () {
    let arr2 = [];
    for (let index = 0; index < this.length; index++) {
        arr2[index] = this[index] * 2;
    }
    return arr2;
}
const arr = [10, 7, 18, 45];
console.log("New Array: ", arr.mapTwoNewArray());
console.log("Existing Array: ", arr);
console.log("New Array: ", arr.mapTwoExistingArray());
console.log("Existing Array: ", arr);

The Output will be

New Array:  [ 20, 14, 36, 90 ]
Existing Array:  [ 10, 7, 18, 45 ]
New Array:  [ 20, 14, 36, 90 ]
Existing Array:  [ 20, 14, 36, 90 ]

Final Thoughts

Polyfills are a very strong concept in JavaScript it allow us to

• make new custom define functions

• optimize function

• use more optimal function based on use case

• understand algorithm more deeply

It helps developers to make better code and better decisions.

Reference Article

You can follow the following articles for more understanding

• https://developer.mozilla.org/en-US/docs/Glossary/Polyfill

• https://www.geeksforgeeks.org/javascript/implement-polyfill-for-string-prototype-trim-method-in-javascript/

• https://dev-radhika.hashnode.dev/string-polyfills-and-common-interview-methods-in-javascript?utm\_source=hashnode&utm\_medium=feed

• https://dev.to/ritam369/string-polyfills-common-interview-methods-in-javascript-224g

That's it, now you understand new Polyfills in JavaScript. I’d love to hear your thoughts and feedbacks.

Thank You for your patients. ❤️