Checking Javascript Version – Why It Makes No Sense

So you may be writing a script, and looking at ways to check the Javascript version to add some backward compatibility… Or maybe you are just curious if there is a “Javascript version”.

Checking for the Javascript version is a complicated situation, as there are different variations:

  • ECMA International now handles the recommended standards for the development of Javascript – ECMAScript 1st edition (ES1), ECMAScript 2nd edition (ES2), and so on.
  • Every company has its own implementation and version of the Javascript engine. For example, SpiderMonkey in Firefox, JavaScriptCore in Safari, and Chrome V8.
  • Lastly, there are also now-defunct Javascript version numbers from Netscape and also Microsoft’s JScript.

“Javascript version” can refer to any of the above. There is no reliable way to check for the Javascript version via the use of scripts.

So yes, checking for the “Javascript version” does not make a lot of sense when it comes to writing applications. We should be doing feature detection instead – Read on for more.

 

QUICK SLIDES

 

 

TABLE OF CONTENTS

JS Versions Feature Detection Useful Bits & Links
Tutorial Video The End

 

JAVASCRIPT VERSIONS

As in the introduction, there are 3 different “Javascript versions” – ECMAScript edition, Javascript engine version, and a now-defunct Javascript version. Let us walk through more in this section.

 

WHAT IS ECMASCRIPT?

ECMAScript (or ES) is a scripting-language specification standardized by Ecma International in ECMA-262 and ISO/IEC 16262. It was created to standardize JavaScript, so as to foster multiple independent implementations.

Wikipedia

No need to be confused. Let us begin the story with ECMA International, the organization that is driving the development of Javascript – The specifications that ECMA comes up with is called the ECMAScript (Captain Obvious to the rescue).

Now, ECMAScript is being revised periodically, and it has many different editions – You may have already stumbled on “numbers” such as ES5, ES6, ES2016, etc… This is a little bit confusing, so follow up:

  • The first edition of ECMAScript is launched in Jun 1997, the second edition in Jun 1998, and so on.
  • Traditionally, we use ES1 as the abbreviation for “ECMAScript 1st edition”, ES2 for “ECMAScript 2nd edition”, etc…
  • But in Jun 2015 (ES6), some smart monkeys decided it was a good idea to add on to the fun and called it “ECMAScript 2015” (ES2015).
  • So yep… ES6 and ES2015 are essentially referring to the same thing. As with ES7 – ES2016, ES8 – ES2017, etc…

If you are still confused as to which version is which, just refer to the table in Wikipedia (link is right above).

 

EVERYONE HAS THEIR OWN VERSION

So far so good? Because that is not the end of the Javascript version story. Remember from 3 minutes ago that you read something about the ECMAScript to “foster multiple independent implementations”?

Yes, ECMAScript is only a “recommended standard”. Everyone can use it to create their own version of Javascript and add their own twists to it. That is – Google Chrome, Firefox, Edge, Safari all have their own different versions of Javascript.

  • The Javascript engine in Firefox is called “SpiderMonkey”.
  • Apple Safari – JavaScriptCore.
  • Google Chrome – V8.

That is where the bad news is at. Everyone has a different Javascript engine, everyone has a different version number of their own.

 

 

BLAST FROM THE PAST

Apart from all of the above, there are more “Javascript version numbers” that stem from history. Netscape has its own version, and even Microsoft has an old JScript engine that runs behind Internet Explorer. These version numbers are no longer relevant and currently defunct.

 

WHICH VERSION AGAIN!?

So… When we say “Javascript version”, it can really be referring to:

  • Which Javascript engine? Which release?
  • Compliant to which edition of ECMAScript?
  • Or the old-school, now defunct Javascript version?

Now you see where this is going. It is not easy to determine the “Javascript version”. The only remotely possible way to get the version (using script) is to fetch the browser information from the user-agent and attempt to reverse engineer it… Which really is a lot of work, and does not make much sense.

 

VERSION DOES NOTHING GOOD

If you somehow manage to get a number out of the madness, it will probably still not do a lot of good. Why? Because different engines implement ECMAScript differently – They may fundamentally have a set of basics that are the same, but some may implement the latest experimental stuff, and some may even have their own unique features.

The Javascript version really does not matter much here. Knowing which features are available does.

 

 

USE FEATURE DETECTION

Checking the version of Javascript is like throwing a stone into the ocean… What makes more sense is to look at the feature compatibility instead.

 

WHAT FEATURES!?

Over the years of development, Javascript has evolved a lot. Especially with the rise of mobile devices, Javascript started to implement features to access the webcam, microphone, voice recognition, streaming, drawing graphics on a canvas, and all kinds of funky stuff.

So here is what makes sense – If you are creating a script that requires access to the microphone, then check if that feature is available. If you want to create a script that can do parallel processing, then check if asynchronous functions are available.

 

HOW TO CHECK – USING A LIBRARY

STEP 1 – SELECT YOUR REQUIRED FEATURES

Thankfully, there is a library called Modernizr that we can use to detect features. Simply head over to their download page, and select your required features. For example, if you have a script that displays in full screen and checks the GPS, then you will want to select the Fullscreen and Geolocation API. To download, simply hit “build” > Build – download.

 

 

STEP 2 – HOW TO USE?

To get more information on the detection, click on the feature itself > usage example. It may even provide you with a polyfill library (backward compatibility library).

 

STEP 3 – IMPLEMENT CHECK

The final step is to load Modernizr and implement the checks on your own script.

myPage.html
<script src="modernizr-custom.js"></script>
<script>
window.addEventListener("load", function(){
  if (Modernizr.fullscreen) {
    // Proceed as usual
    console.log("OK");
  } else {
    // Show error message, silently disable the feature, or load polyfill
    console.log("NOT SUPPORTED");
  }
});
</script>

 

 

MANUAL CHECKING

Not working on any scripts yet or just want to check the compatibility? Then there are a few useful references on the Internet that you can use. I frequently use a website called Can I Use – Just search for your required feature and they will show you which browser supports what.

Alternatively, here is another massive compatibility table on Github that you can check against.

 

USEFUL BITS & LINKS

That’s all for this tutorial, and here is a small section on some extras and links that may be useful to you.

 

STILL WANT NUMBERS? CHECK THE ABOUT PAGE.

Well, if you somehow just want some numbers, the best bet is to check out the hidden “about” browser pages.

  • Google Chrome – Just type chrome://version/ into the URL.
  • Firefox – about:support

 

 

LINKS & REFERENCES

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET

Checking For Javascript Version Makes No Sense (Click To Enlarge)

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you in your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *