Implement JSON Stringify Polyfill in JavaScript

The JSON.stringify() method converts a JavaScript object or value to a JSON string. However, in some older browsers that do not support this method, a polyfill is required to emulate its behavior.  In the case of JSON.stringify(), a polyfill can be used to ensure consistent behavior across different environments.

Implementation of JSON Stringify Polyfill

To create a polyfill for JSON.stringify(), we need to check if the method is already available in the environment. If not, we define our own implementation.

if (!JSON.stringify) {
    JSON.stringify = function (value, replacer, space) {
    // Implementation logic here
    };
}

Key Points to Consider:

• Check for Existing Implementation: Verify if JSON.stringify() is already defined.
• Define Custom Implementation: Implement the logic to convert the value to a JSON string.

Polyfill Implementation Code

Let's create a simple polyfill for JSON.stringify() that handles basic data types.

if (!JSON.stringify) {
    JSON.stringify = function (value, replacer, space) {
        if (typeof value === "undefined") {
            return "undefined";
        }

        if (
            typeof value === "number" ||
            typeof value === "boolean" ||
            value === null
        ) {
            return String(value);
        }

        if (typeof value === "string") {
            return '"' + value + '"';
        }

        if (Array.isArray(value)) {
            return (
                "[" +
                value
                    .map(function (element) {
                        return JSON.stringify(element);
                    })
                    .join(",") +
                "]"
            );
        }

        if (typeof value === "object") {
            let parts = [];

            Object.keys(value).forEach(function (key) {
                let val = JSON.stringify(value[key]);

                if (val !== undefined) {
                    parts.push(JSON.stringify(key) + ":" + val);
                }
            });

            return "{" + parts.join(",") + "}";
        }
    };
}

Real-World Example

Consider a scenario where you need to stringify a complex object using the polyfill:

const user = {
                name: 'Alice',
                age: 30,
                isAdmin: true,
                address: {
                    street: '123 Main St',
                    city: 'Example City'
                }
            };

            const jsonString = JSON.stringify(user);
            console.log(jsonString);

Output:

{"name":"Alice","age":30,"isAdmin":true,"address":{"street":"123 Main St","city":"Example City"}}

Polyfills are one of the most asked frontend interview questions, since they are helpful to evaluate the in-depth understanding of the internal implementations.

Explore more polyfills

1. Promise Polyfill in JavaScript - Step by Step Explanation 
2. Promise.allSettled in JavaScript explained
3. Promise.race polyfill in JavaScript explained
4. Promise.any polyfill in JavaScript explained
5. Top JavaScript Interview Questions and Answers
6. Map, Reduce & Filter Array Polyfill in Javascript