Forem: Roja Gnanavel

Introduction to Polyfills: Making Old Browsers Smarter

Roja Gnanavel — Mon, 07 Jul 2025 05:43:30 +0000

Ever tried opening a cool new website on an old browser, and things just don’t work? That’s because older browsers don’t always understand the latest JavaScript features and that’s where polyfills come to the rescue.

What is a Polyfill

A polyfill is like a translator for old browsers. It helps them understand modern JavaScript features.

🔹 Think of it as a friend explaining modern slang to your grandma.
🔹 Without this explanation, she might not get what “vibe check” or “lit” means.
🔹 Similarly, older browsers don’t understand new JavaScript features unless we help them out.

Why Do We Need Polyfills

Let’s say you’re building a website and using the fetch API to get data from the internet. Everything works fine on modern browsers like Chrome and Edge.

But then, someone visits your site using Internet Explorer, and suddenly, your site breaks.

Why? Because IE doesn’t know what fetch is and it’s not built in.

This is where a polyfill comes in. It acts as a backup plan by adding support for fetch in older browsers, ensuring your code works everywhere.

How Polyfills Work Internally

Some JavaScript features don’t exist in old browsers. Polyfills help by checking if a feature is available:

✅ If the feature exists, the polyfill does nothing (because the browser already supports it).

❌ If the feature doesn’t exist, the polyfill adds it using older JavaScript code that works in all browsers.

This is called feature detection.

Understanding prototype (Before We Begin)

In JavaScript, objects like arrays, functions, and objects inherit properties from their prototype

Still confused? Let’s make it simple.
Think of prototype as a shared toolbox for JavaScript objects.

Arrays, functions, and objects all come with a built-in toolbox.

If we add a new tool (method) to Array.prototype, every array gets it automatically.

📌 Example:

Array.prototype.sayHello = function () {
  console.log("Hello from an array!");
};

const fruits = ["apple", "banana"];
fruits.sayHello(); // 🟢 Output: Hello from an array!

🔹 Even though we didn’t add sayHello() to fruits, it still works.
🔹 That’s because all arrays share the same toolbox (Array.prototype).

Why is prototype important for polyfills

Polyfills add missing features to older browsers.
Since prototype allows methods to be shared across all objects of a type, polyfills use it to ensure all arrays, objects, or functions can access the new feature.

Analogy

Imagine a building with 100 apartments (arrays).

If we install a water purifier at the main pipeline (prototype), all apartments get clean water.

We don’t need to install a purifier in every single apartment.

That’s exactly how polyfills work they add a missing feature at the prototype level so everything can use it.

Example: The includes() Method

The includes() method for arrays was introduced in ES6 (2015).
Older browsers (like Internet Explorer) don’t have it.

So, let’s say you write this code

const fruits = ["apple", "banana", "orange"];
console.log(fruits.includes("banana")); // 🟢 Works in modern browsers

🚨 But in older browsers, this will throw an error because includes() doesn’t exist

How Polyfills Fix This

We check if includes() is available

if (!Array.prototype.includes) {  // ❌ If missing, define it
  Array.prototype.includes = function (searchElement) {
    return this.indexOf(searchElement) !== -1; // 🟢 Works everywhere
  };
}

✅ Now, even older browsers can use includes()

Common Polyfills in JavaScript

Here are some popular JavaScript features that often need polyfills:

fetch() → Alternative: XMLHttpRequest
Promise → Alternative: Callbacks
Array.prototype.includes() → Alternative: indexOf()
Object.assign() → Alternative: for...in loop
String.prototype.startsWith() → Alternative: indexOf()

💡 These are just a few examples.There are many more polyfills available.

👉 Need more? Check out core-js, a popular library for polyfills.

🔗 core-js: https://github.com/zloirock/core-js

Detecting Missing Features in Old Browsers

Before adding a polyfill, it's good to check if a browser supports a feature. Here's how:

1. Check "Can I Use" Data

Use Can I Use to see browser compatibility for any feature
Check browser compatibility on https://caniuse.com

2. Console Check in Old Browsers

Open the Developer Console in an old browser (like IE11) and try running:

console.log(typeof Promise);

If it logs "function" → ✅ Promise is supported.
If it logs "undefined" → ❌ Promise is not supported, and you might need a polyfill.

If it logs "undefined", it means Promises are not supported.

3. MDN Documentation

MDN docs also show browser support details for different JavaScript features.

Final Thoughts

Polyfills are lifesavers when working with older browsers. They make sure modern JavaScript works everywhere, keeping your website accessible to all users.

However, be mindful of performance only use polyfills when necessary to avoid slowing down your site.

So next time your code doesn’t work on an old browser, remember: a polyfill might be the fix.

Stay curious, keep coding❤️

Interview Questions & Answers on Polyfills

1. What is a polyfill in JavaScript?
A polyfill is a piece of code (usually JavaScript) that adds missing functionality to older browsers. It "fills in" features that a browser doesn’t support natively, allowing developers to use modern JavaScript features without worrying about compatibility issues.

2. When should I use a polyfill?
You should use a polyfill when you're using modern JavaScript features (like Promise, Array.prototype.includes, fetch, etc.) that may not be supported in some browsers your users still use especially older versions of Internet Explorer or early versions of Safari.

3. How does a polyfill work behind the scenes?
A polyfill checks if a feature exists in the browser, and if it doesn’t, it defines it using older JavaScript code. For example, before adding Array.prototype.includes, the polyfill will first check.

if (!Array.prototype.includes) {
  Array.prototype.includes = function(searchElement, fromIndex) {
    // custom logic here
  };
}

This way, it doesn’t overwrite the feature if the browser already supports it.

JavaScript: Your First Baby Steps into Syntax & Fundamentals

Roja Gnanavel — Mon, 28 Apr 2025 14:21:28 +0000

Ever opened a JavaScript file and wondered, "Why are there so many curly braces and semicolons?"🤯

Welcome to JavaScript!🤓 Before diving into the fun stuff like functions, events, or cool tricks.You first need to understand its basic rules.

Think of syntax as the grammar of JavaScript just like how we have grammar rules in English. If you follow the rules correctly, JavaScript understands what you're saying, and everything works fine.

But if you make a mistake, like missing a bracket or writing something incorrectly, JavaScript won’t understand and will throw an error. Instead of saying "Oops, something’s wrong!", it will give you a real error message, like:

🔴 SyntaxError: Unexpected token (which means JavaScript found something it didn’t expect).

It's JavaScript’s way of saying: "Hey, I don’t understand this 🤷‍♀️"

Does that make sense now?😊

Let’s break it down in a simple and fun way.

1. Statements & Expressions – The Building Blocks

A statement is like a complete instruction in JavaScript

let name = "Roja"; 
console.log(name);

Each of these lines is a statement that tells JavaScript what to do.

But what about expressions? 🤔

An expression is a part of a statement that evaluates to a value.

let sum = 5 + 3;

Here, 5 + 3 is an expression because it evaluates to 8.

So, all expressions are part of a statement, but not all statements are expressions. Cool, right? 😎

2. Comments – Because Your Brain Won’t Remember Everything 🤯

Comments are like notes in your code.They make your code easier to understand for you and anyone reading it later. Trust me, you’ll thank yourself for using them.

🔹 Single line comments

// This is a single line comment
let age = 29;

🔹 Multi line comments

/*
  This is a multi line comment.
  You can explain logic here.
*/
let isDeveloper = true;

Use them.Future you will thank you.😎

3. JavaScript is Case Sensitive – Be Careful ⚠️

JavaScript treats uppercase and lowercase differently.So, "Name" and "name" are not the same.😱

let Name = "Roja";  
let name = "Another Roja";  

console.log(Name); // Roja  
console.log(name); // Another Roja

4. Variables – The Right Way to Store Data

JavaScript gives us three ways to declare variables. Let’s break them down:

🔹 var - The old school one – Avoid It

var city = "Chennai";

It works, but has weird scoping issues. Nobody uses var anymore.So, just skip it.

🔹 let - The go to choice

let country = "India";

Use let when the value might change later.

🔹 const - The unchangeable one

const PI = 3.14159;

Use const when the value should never change.

5. Hoisting – JavaScript’s Magic Trick✨

JavaScript moves variable and function declarations to the top before running the code.

console.log(name); // undefined
var name = "Roja";

With var, it’s hoisted but not initialized, so you get undefined.

🚨 But let and const don’t work the same way!

console.log(age); 
let age = 29; 
// ❌ ReferenceError: Cannot access 'age' before initialization

So always declare variables before using them!

6. Strict Mode – No More Silly Mistakes 🚫

"use strict" is a special directive in JavaScript that helps you write cleaner and more secure code. When you add it at the top of your script or function, it enables Strict Mode, which changes how JavaScript behaves in some important ways.

Why use it?
Strict mode helps you,

Catch common coding mistakes
Prevent the use of undeclared variables
Make your code more predictable and safer

Example: Without strict mode

x = 10; // No error, but x is not declared properly
console.log(x);

Without "use strict", JavaScript would allow this mistake.

Example: With strict mode

"use strict";
x = 10; // Error! x is not declared

Where to use it?

At the top of a file

"use strict";
// your code here

Or inside a function

function test() {
  "use strict";
  // strict mode only inside this function
}

That’s it. It’s just one line, but it helps avoid silly mistakes.

7. Template Literals

you can join strings using either the + operator or template literals (also called template strings). However, template literals offer cleaner, more readable, and maintainable code.

🔹 Using Template Literals:

// Uses backticks (`) instead of regular quotes ("" or '')
// Variables and expressions are wrapped in ${}

let name = "Roja";
console.log(`Hello, ${name}!`); // Hello, Roja!

8. Destructuring – Extracting Values Like a Pro🔥

Instead of this old school way:

const user = { name: "Roja", age: 29 };
const userName = user.name;
const userAge = user.age;

Use destructuring

const { name, age } = user;
console.log(name, age); // Roja 29

Works for arrays too:

const colors = ["red", "blue", "green"];
const [firstColor, secondColor] = colors;
console.log(firstColor, secondColor); // red blue

Less code, more clarity.

9. Spread & Rest Operators (...) – JavaScript’s Magic Trick ✨

🔹 Spread Operator – Expanding Arrays
Want to quickly copy or merge arrays? Use the spread operator.

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]

🔹 Rest Operator – Collecting Multiple Values
Need a function to accept multiple arguments? The rest operator has your back!

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

One spreads, the other gathers both make your code cleaner.

10. Control Flow – Making JavaScript Decide for You 🤔

🔹 If-Else Statement – Making simple decisions

let temperature = 30;
if (temperature > 25) {
  console.log("It's hot outside.");
} else {
  console.log("It's cool today.");
}

🔹 Switch Statement – Handling multiple cases

let day = "Monday";
switch (day) {
  case "Monday":
    console.log("Ugh, Monday blues.");
    break;
  case "Friday":
    console.log("Yay! Weekend is near.");
    break;
  default:
    console.log("Just another day.");
}

11. Loops – Running Code Again & Again

Loops help us execute the same block of code multiple times without repeating ourselves.

🔹 For Loop – Repeat something a fixed number of times

for (let i = 1; i <= 5; i++) {
  console.log("Number:", i);
}

Runs 5 times, increasing i each time.

🔹 While Loop – Repeat while a condition is true

let count = 1;
while (count <= 3) {
  console.log("Counting:", count);
  count++;
}

Runs as long as count <= 3.

🔹 Do-While Loop – Always runs at least once

let num = 5;
do {
  console.log("This runs at least once.");
  num++;
} while (num <= 3);

Runs once, even though the condition is false at the start.

🔹 For-of Loop – Loop through arrays

const fruits = ["Apple", "Banana", "Cherry"];
for (const fruit of fruits) {
  console.log(fruit);
}

Outputs each fruit one by one.

🔹 For-in Loop – Loop through object properties

const user = { name: "Roja", age: 29 };
for (const key in user) {
  console.log(key, ":", user[key]);
}

Loops through keys in an object (name, age).

12. Functions – Write Once, Use Anytime

🔹 Function Declaration

function greet(name) {
  console.log("Hello, " + name + "!");
}
greet("Roja"); // Hello, Roja!

🔹 Arrow Function – The modern, shorter way

const add = (a, b) => a + b;
console.log(add(5, 3)); // 8

Conclusion

Great job. You’ve taken your first baby steps into JavaScript by learning its basic rules and structure. Now you understand how statements, variables, loops, and functions work.

But learning JavaScript takes time! The more you practice and explore, the better you’ll get.

So, keep going, have fun, and enjoy your JavaScript journey.

Beyond JSON.stringify() + JSON.parse(): Deep Cloning Like a Pro with structuredClone()

Roja Gnanavel — Mon, 21 Apr 2025 09:56:07 +0000

As developers, we’ve all faced the challenge of trying to deeply clone objects in JavaScript. Whether it’s duplicating a complex object or ensuring we don’t unintentionally mutate data, cloning is a common task.

For years, I stuck with the trusty JSON.stringify() + JSON.parse() combo. But as my projects grew, I realized that while this method worked most of the time, it wasn’t perfect. That’s when I discovered structuredClone(), a modern approach to deep cloning.

Let’s dive into why you might want to switch to structuredClone() and how it solves the problems that JSON.stringify() + JSON.parse() just can’t handle.

The Classic Approach: JSON.stringify() + JSON.parse()
For those who aren’t familiar with deep cloning, here’s the classic method

const clone = JSON.parse(JSON.stringify(myObject));

It works like a charm in many cases, especially when dealing with simple objects. But here’s the catch, this method fails when you run into certain data structures, and that's when structuredClone() comes to the rescue.

When Does JSON.stringify() + JSON.parse() Fall Short?
JSON.stringify() + JSON.parse() can be used for deep cloning simple objects, but it has limitations and doesn't handle all data types correctly. Here are some common limitations

1. Circular References
If your object has a circular reference (where an object refers to itself or another object that refers back to it), JSON.stringify() + JSON.parse() will throw an error.

Example:

const obj = { name: "Roja" };
obj.self = obj;  // Circular reference
const clone = JSON.parse(JSON.stringify(obj));  // Uncaught TypeError: Converting circular structure to JSON

2. Functions & Methods
If your object contains functions, they will be lost during cloning because JSON.stringify() + JSON.parse() only serializes data, not methods.

Example:

const obj = { name: "Roja", greet: () => "Hello!" };
const clone = JSON.parse(JSON.stringify(obj));
console.log(clone.greet);  // undefined

3. Dates
JSON.stringify() + JSON.parse() converts Date objects into strings, losing their functionality.

Example:

const obj = { date: new Date() };
const clone = JSON.parse(JSON.stringify(obj));
console.log(clone.date instanceof Date);  // false (it's now a string)

4. Complex Data Structures
If your object contains Map, Set, or Typed Arrays, they won’t be cloned properly.

Example:

const obj = { map: new Map([["key", "value"]]) };
const clone = JSON.parse(JSON.stringify(obj));
console.log(clone.map instanceof Map);  // false

Enter into structuredClone()

structuredClone() addresses the limitations of JSON.stringify() + JSON.parse(). It's a native function that can deeply clone objects, including complex data types, such as circular references, Map, Set, Dates, and more.

const clone = structuredClone(myObject);

Unlike JSON.stringify() + JSON.parse(), structuredClone() can handle

Circular references
Maps and Sets
Typed arrays and ArrayBuffers
Date objects

This method provides a much safer and more reliable way to clone complex objects.

When to Use structuredClone()?
If you're dealing with simple objects, JSON.stringify() + JSON.parse() might still be enough. But if your objects contain complex data structures, here’s when structuredClone() is the right choice:

1. Circular References
If you have an object with circular references, structuredClone() will clone it properly without throwing errors.

const obj = { name: "Roja" };
obj.self = obj;  // Circular reference
const clone = structuredClone(obj);
console.log(clone.self === clone);  // true

2. Maps and Sets
If your object includes Map or Set, structuredClone() will properly copy them, unlike JSON.stringify(), which can’t serialize them correctly.


const obj = { map: new Map([["key", "value"]]) };
const clone = structuredClone(obj);
console.log(clone.map instanceof Map);  // true

3. Typed Arrays & ArrayBuffers
structuredClone() can clone Typed Arrays and ArrayBuffers, which JSON.stringify() can’t handle.

const arr = new Uint8Array([1, 2, 3]);
const clone = structuredClone(arr);
console.log(clone instanceof Uint8Array);  // true

4. Dates
If you have Date objects, structuredClone() will preserve their Date functionality, unlike JSON.stringify() + JSON.parse() which converts them to strings.

const original = { date: new Date() };
const clone = structuredClone(original);
console.log(clone.date instanceof Date);  // true

So, When Should You Stick with JSON.stringify() + JSON.parse()?
If your objects are simple, and you don’t have the complex structures mentioned above, JSON.stringify() + JSON.parse() might still work just fine. Here’s a quick checklist:

Dates as strings (No need to preserve functionality)
Simple objects with no circular references
No Maps, Sets, or Typed Arrays

If this describes your use case, JSON.stringify() + JSON.parse() will likely suffice.

Conclusion

structuredClone() is the go to method when you need to deeply clone complex objects like those with circular references, Maps, Sets, Typed Arrays, or Dates.

If you're working with simple objects, JSON.stringify() + JSON.parse() is still a valid approach.

structuredClone() helps you avoid errors and issues that arise with JSON.stringify() + JSON.parse() and makes deep cloning much simpler.

Have You Used structuredClone() Yet?
I’m really excited about this method and plan to start using it in my future projects. Have you had any experience with it? How has it worked for you? Drop your thoughts below.

JavaScript Engines: The Core of Your Web Browser

Roja Gnanavel — Mon, 17 Feb 2025 10:31:23 +0000

What is JavaScript Engine

Okay, you’ve probably come across the term "JavaScript engine," but what does it really mean? Well, a JavaScript engine is a program that reads and executes JavaScript code. It converts the code into machine language that the computer understands. JavaScript engines are used in browsers (like Chrome, Firefox) and environments like Node.js to run JavaScript code.

Still confused? Let me make it easier for you: 😅

Imagine the JavaScript engine is like Google Translate. JavaScript is like English, and the JavaScript engine is like Google Translate. You don’t understand English directly, so Google Translate changes it into Tamil (or whatever language works for you!). Similarly, the JavaScript engine turns JavaScript code into a language that the computer understands and follows without getting confused.

Alright, now that we’ve got the basic idea of what a JavaScript engine is, you might wonder, why do we need it?

We need a JavaScript engine because JavaScript makes websites interactive. Without the engine, the browser wouldn’t know how to read or run the code. Here’s why it’s important:

1.Interactivity: Websites need to respond to actions like clicking a button or filling out a form. The JavaScript engine makes sure this happens.

Example: When you click the "Submit" button, JavaScript makes sure the form data is sent to the server. Without the engine, the browser wouldn’t know what to do with your click!

2.Performance: The engine helps the code run faster and more smoothly, making websites quicker.

3.Cross-platform compatibility: JavaScript works on different browsers and platforms (like Node.js), and the engine makes sure the code works well everywhere.

How JavaScript Engine Works

Let’s dive into how the engine actually works behind the scenes.

1.Parsing

Parsing is the process of breaking down the code so the JavaScript engine can understand and run it. It happens in two steps

Lexical Analysis

This is where the engine scans the code from left to right, breaking it down into small chunks called tokens. Tokens are like words in a sentence. For Example, If code is

let sum = 5 + 10;

The token would be:

let -> keyword
sum -> identifier
= -> operator
5 -> literal
+ -> operator
10 -> literal
; -> punctuation

Syntax Analysis

Once Lexical Analysis is done, the tokens are arranged into something called an Abstract Syntax Tree (AST). Think of it as a tree like structure that shows how your code is organized.

Here’s the cool part: this tree doesn’t just organize your code. It also checks if everything follows JavaScript’s rules.

For example:

let sum = 5+;

Oops! There’s a mistake here (you forgot something after the +).The parser will immediately catch this and throw a Syntax Error.

In short, the AST makes sure your code is both structured and error-free.
Here's a simple AST for the code above:

And if you're curious about the AST for your own code, it’s super easy to check! Just follow these steps:

Go to https://astexplorer.net/.
Paste your code in the left panel.
Pick Esprima or Babel as your parser.
And there you have it! The AST tree will appear on the right side.

2.Interpretation

Once parsing is done and we have our AST, the engine starts interpreting the code. This is when the engine reads through the code and makes things happen quickly. For example, when the code let sum = 5 + 10; runs, the engine calculates 5 + 10 to get 15 and assigns it to the variable sum.

At this stage, the engine is prioritizing speed, getting the program up and running quickly, even if the code isn’t fully optimized yet.

3.JIT Compilation

Now we get to the cool part: JIT (Just-In-Time) Compilation. This is where the engine really speeds things up.

It takes the code let sum = 5 + 10; and turns it into machine code that your computer can directly execute.
It does this just before the code runs, making it fast and efficient.

For example:
The engine reserves memory for sum.
It calculates 5 + 10, stores the result (15), and runs it smoothly.

4.Optimization (Hot Path Detection)

Now, the engine gets smarter. It monitors the code to identify "hot paths," which are frequently executed sections like loops or important functions.

If it notices that 5 + 10 doesn’t involve any variable changes, it might precompute the result as 15 and skip recalculating it repeatedly.
The Optimizing JIT Compiler steps in here, fine-tuning the code to make these repetitive parts super fast.

5.De-optimization (If Needed)

But what happens if the code changes? For example, if you later change the value of sum to "hello":

sum = "hello";

The engine realizes sum has changed from a number (15) to a string ("hello").

Now the engine knows that sum has changed from a number to a string. To ensure everything runs correctly, it de-optimizes the previously compiled machine code and makes sure the program works without any issues.

6.Execution Context and Scope

Once the code is parsed, the engine sets up the environment to run it:

Global Execution Context: This is the base environment created for the entire script. In browsers, the global object is window.
Function Execution Context: Every time a function is called, a new execution context is created with its own scope (local variables, functions).
Execution Stack: The engine uses a call stack to manage the execution contexts. When a function is invoked, its context is added to the stack. Once it completes, it is removed (popped off) from the stack.

Now, the engine is ready to manage memory and handle asynchronous tasks in the next steps.

7.Memory Management

To store and retrieve data, JavaScript uses two main types of memory:

Heap Memory: Used for objects, arrays, and functions (dynamic structures).
Stack Memory: Used for primitive values (numbers, strings, booleans). The stack is faster but limited in size, while the heap handles more complex data.

8.Event Loop

JavaScript’s single-threaded nature relies on the event loop to manage asynchronous tasks:

Message Queue: Tasks like setTimeout, API calls, and event handlers are queued up here after being initiated.
Event Loop: Constantly checks if the call stack is empty. When it is, it moves tasks from the message queue to the stack for execution. This ensures asynchronous code doesn't block the main thread.

9.Garbage Collection

To avoid memory leaks, the JavaScript engine has a garbage collector. It uses an algorithm called Mark-and-Sweep to find and remove objects that are no longer in use, freeing up memory for other tasks.
This is how JavaScript engine is working. 🎉

Popular JavaScript Engines

Here are the most common JavaScript engines you’ll encounter:

V8 (Chrome and Node.js) – Ignition (Interpreter) – TurboFan (Compiler)
SpiderMonkey (Firefox) – jsinterp (Interpreter) – IonMonkey (Compiler)
JavaScriptCore (Safari) – JSC (Interpreter) – LLInt, FTLJIT (Compiler)
Chakra (Internet Explorer) – Chakra Interpreter (Interpreter) – Chakra JIT (Compiler)

Each engine has its own strengths in how it interprets and compiles JavaScript, optimizing performance for their respective environments.

Comparison Of Engines

V8: Known for its efficient performance, used in both Chrome and Node.js.
SpiderMonkey: Offers strong memory management and powers Firefox.
JavaScriptCore: Optimized for Apple’s ecosystem, used in Safari.
Chakra: Used in Internet Explorer, focusing on just-in-time compilation for speed.

Conclusion

So, that’s how JavaScript engines work their magic! They handle everything like parsing, interpreting, optimizing, and managing memory. Whether you're working with Chrome, Firefox, Safari, or Node.js, each engine brings its own flavor to speed things up, making your experience faster and more efficient. So, next time you’re clicking around a website or running some code, remember there’s some cool engine magic happening in the background, making it all possible!! Hope this helps and you get a better idea of how things work under the hood! 😎