JavaScript is a language of Web. This series of articles will talk about my observations learned during my decade of software development experience with JavaScript.
Before moving further let us look at the previous articles of the series:
ECMAScript History
ECMAScript is the basis of JavaScript. ECMA International standardizes it. The other implementations for it is Jscript, ActionScript besides JavaScript. The original name was Mocha, later LiveScript and finally JavaScript. JavaScript was released in late 90s as part of Netscape Navigator. Brendan Eich at Netscape invented JavaScript.
Current Edition
The 5th edition of ECMAScript wasstandardized in 2009 and it is implemented in all modern browsers. ECMAScript 6th edition was standardized in 2015. This was partially implemented in most modern browsers.
ECMAScript 6 (ES6) compatibility
You can check features of ECMAScript 5/6/7 (ES.next or ES2016) compatibility tables with modern browsers.
URL: http://kangax.github.io/compat-table/es6/
![table]()
If you observe, IE6 to IE9 are not mentioned in above matrix.
Q: Does it mean that we cannot use ES6 for old browsers?
Ans: Not really, there are definitely ways to tackle it.
Implement ES6 older browsers
In older implementation of browsers (ex- IE8, FireFox 3.5 and before), JavaScript was purely an interpreted language. This means it executes without compilation. In modern browsers, JavaScript could be interpreted or compiled using a JIT (just-in-time) compiler. This makes it faster and performance improvement. Having said that a new concept got introduced which is transpiler.
Transpiler
It takes source code written in one language and converts into another language that has a similar level of abstraction. These are transplied languages e.g., TypeScript, CoffeeScript, you could use to take advantage of features not provided out-of-box by JavaScript. As output, code is converted into JavaScript.
Similarly, we can convert ES5 to ES5 to support in old browsers. There are two popular transpilers are:
Traceur: It supports ES6 as well as ES.next features. For more information checkout.
Babel: It was known as 6to5 previously. Now it is renamed to Babel.
Q: What is the quickest way to test JavaScript?
Ans: Console in browser
Browser Console
In browser, it is embedded and works on the concept of REPL read–eval–print loop. REPL is an interactive language shell to test language quickly. Press F12 to invoke console interactive shell. Advantage is you do not have to open editor and type code. You can do in browser directly.
FYI: there are many REPL available for different languages, you can try online.
Explore ES6
As developers, we always want to get our hands dirty and try things. There are many options to explore/test ES6.
Developer tools in Browsers
- Edge
It provides good support to ES6 script which you can validate at kangax. If you are using IE11 then ensure that you have Edge emulation selected in Developer tools F12
![emulation]()
Currently Microsoft Edge browser scores around 80% on ES6 compatibility table. Edge is based on Chakra engine and suppors many features like classes etc. If you are interested in more details to understand roadmap of Microsoft, please visit.
- Chrome
Many ES6 features are hidden behind a flag called "Experimental JavaScript features". In browser enter URL: chrome://flags/#enable-javascript-harmony, enable this flag, restart Chrome.
![chrome]()
Chrome V8 release 4.9 JavaScript engine support 91% ES6
You can try Firefox, Safari, Opera etc. also
- REPL
ScratchJS: Install chrome extensions where you could try different transpilers to test out the new ES6 features.
URL
![ScratchJS]()
Open DevTools and “Scratch JS” is added into it.
![add]()
We have a transformer Babel selected where we can transform ES6 to ES5. Here is a sample ES6 code which you could paste in left pane,
- class Point{
- constructor(x,y){
- this.x = x;
- this.y =y;
- }
- print(){
- console.log('x: '+ this.x);
- console.log('y: '+ this.y);
- }
- }
- var p = new Point(1,2);
- p.print();
After you enter above sample code in left-pane it’ll generate output in right hand pane in parallel. Also provides intellisense when you’re writing your code. Refer images below:
![code]()
![code]()
Fiddle
Fiddle is an online solution where you can type your code and convert ES6 to ES5. I find it useful in restricted environments where you cannot add extensions or update browser
Try various fiddles online
Adoption
I think you feel as pumped up to use ES6 after reading this article as I feel while writing it!
Hold your breath for a sec and consider where you want to leverage ES6. There could be multiple use cases:
- Do you want to use in existing or new (greenfield) project?
- Do you want to use at client or server side like NodeJS?
- Do you want to use in mobile framework like Cordova?
I always believe for projects half a job is done if we use right tools. So do requirement analysis and match right tools and then use in your project.
Summary
Please share your comments and stay tuned for upcoming articles in Voice of Developer series at our favorite website C# Corner.