Backwards and forwards compatibility

October 10, 2022 - 2 minutes read

Przemyslaw Franczak

Backwards compatibility - means that if something was introduced in any previous version of e.g. language, it won't be removed or breakly changed in any new version. It ensures developers that their programs will be working in new versions of the environment - a browser for instance.

Forwards compatibility - means that if a program is written in a newer version of the language, it wouldn't break in an environment that doesn't support features later introduced.

So which one JavaScript is? You probably have struggled with a situation when your code didn't work correctly in Internet Explorer - e.g. you used Array.includes. IE 11 doesn't have this method implemented since your code couldn't have been executed properly, even though it worked fine on other browsers. It means that JavaScript is not forwards compatible. You cannot expect that if you use the latest version of JavaScript, your program will work as expected on deprecated browsers.

However, every program written in any version of JS works in an enviornment that supports the following versions. A JS code that was written in the 90s would work in the latest versions of modern browsers as it used to work back then. It means that JavaScript is backward compatible.

This is a huge challange for TC39 (the technical steering committee that manages JS) - they have to ensure that the changes that are supposed to be introduced in a new version of the language, won't break anything. I'm sure you was confused when you saw the result of typeof null (object). It cannot be fixed in a painless way because many applications have been written taking into account this quirk.

On the other hand, HTML and CSS are forward compatible but they aren't backward compatible. If you try to open a website written in the 90s in a modern browser it may not be working correctly (or at all). But if you open a website written in HTML5 in an old browser - it wouldn't be broken (of course it may not look the same) - the unrecognized CSS/HTML would be skipped over, ⁠but the rest - proccessed accordingly.

More details can be found here.