Introduction

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 was standardized in 2009 and it is implemented in all modern browsers. The 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 is not mentioned in the 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 the 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 translated 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 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 the 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 it in the 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

We have a transformer Babel selected where we can transform ES6 to ES5. Here is a sample ES6 code which you could paste in the left pane,
  1. class Point {
  2. constructor(x, y) {
  3. this.x = x;
  4. this.y = y;
  5. }
  6. print() {
  7. console.log('x: ' + this.x);
  8. console.log('y: ' + this.y);
  9. }
  10. }
  11. var p = new Point(1, 2);
  12. p.print();
After you enter the above sample code in left-pane it’ll generate output in right-hand pane in parallel. It also provides IntelliSense when you’re writing your code. Refer images below:
code
code

Fiddle

The 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:
I always believe for projects half a job is done if we use the right tools. So do requirement analysis and match the right tools and then use them 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.