What is the difference between feature detection and polyfills?

What is the difference between feature detection and polyfills?

Feature detection is a technique used to check if a browser supports a specific feature, while polyfills are scripts that provide functionality in browsers that do not support certain features.

Can you give me an example of feature detection?

Sure! A common example is using if ('geolocation' in navigator) { ... } to check if the browser supports the Geolocation API.

And how do polyfills work?

Polyfills work by adding the missing functionality to the browser. For instance, if a browser doesn't support Array.prototype.includes, a polyfill would define that method so it can be used.

When should I use feature detection over polyfills?

Use feature detection to ensure your code runs only if the feature is supported, and polyfills when you want to provide support for older browsers.