How do we work with JavaScript?

This is all well and good, but as we mentioned before, it so happens that the JavaScript version available almost everywhere isn't ES10, but rather the earlier JS5. An exception to this is Node.js. It is based on Chrome's v8 high-performance JavaScript engine, which already has several ES10 features available. Nonetheless, as of today, ES10 coverage isn't 100% complete, and there are features that you will miss. (Check out https://nodejs.org/en/docs/es6/ for more on Node.js and v8.) This will surely change in the future, as Internet Explorer will fade away, and the newest Microsoft's browser will share Chrome's engine, but for the time being, we must still deal with older, less powerful engines.

So what can you do if you want to code using the latest version, but the available one is an earlier, poorer one? Or what happens if most of your users are using older browsers, which don't support the fancy features you're keen on using? Let's see some solutions for this.

If you want to be sure of your choices before using any given new feature, check out the compatibility table at https://kangax.github.io/compat-table/es6/ (see Figure 1.1). For Node.js specifically, check out http://node.green/.

Figure 1.1. - The latest JavaScript features may not be widely and fully supported, so you'll have to check before using them.

Using transpilers

In order to get out of this availability and compatibility problem, there are a couple of transpilers that you can use. Transpilers take your original ES10 code, which might use the most modern JavaScript features, and transforms it into equivalent JS5 code. It's a source-to-source transformation, instead of a source-to-object code that would be used in compilation. You can code using advanced ES10 features, but the user's browsers will receive JS5 code. A transpiler will also let you keep up with upcoming versions of the language, despite the time needed by browsers to adopt new standards across desktop and mobile devices.

If you wonder where the word transpiler came from, it is a portmanteau of translate and compiler. There are many such combinations in technological speak: email (electronic and mail), emoticon (emotion and icon), malware (malicious and software), or alphanumeric (alphabetic and numeric), and many more.

The most common transpilers for JavaScript are Babel (at https://babeljs.io/) and Traceur (at https://github.com/google/traceur-compiler). With tools such as npm or webpack, it's fairly easy to configure things so that your code will get automatically transpiled and provided to end-users. You can also carry out transpilation online; see Figure 1.2 for an example of this using Babel's online environment:

Figure 1.2 - The Babel transpiler converts ES10 code into compatible JS5 code

If you prefer Traceur, you can use its tool at https://google.github.io/traceur-compiler/demo/repl.html# instead, but you'll have to open a developer console to see the results of your running code (see Figure 1.3 for an example of transpiled code). Select the EXPERIMENTAL option to fully enable ES10 support:

Figure 1.3 - The Traceur transpiler is an equally valid alternative for ES10-to-JS5 translation

Using transpilers is also a great way to learn new language features. Just type in some code on the left and see the equivalent code on the right. Alternatively, you can use the command-line interface (CLI) tools to transpile a source file and then inspect the produced output.

There's a final possibility that you may want to consider: instead of JavaScript, opt for Microsoft's TypeScript (at http://www.typescriptlang.org/), a superset of the language that is itself compiled to JS5. The main advantage of TypeScript is the ability to add (optional) static type checks to JavaScript, which helps detect certain programming errors at compile time. But beware: as with Babel or Traceur, not all of ES10 will be available.

You can also perform type checks without using TypeScript by using Facebook's Flow (see https://flow.org/).

If you opt to go with TypeScript, you can also test it online at their playground (see http://www.typescriptlang.org/play/). You can set options to be more or less strict with data type checks, and you can also run your code on the spot (see Figure 1.4 for more details):

Figure 1.4 - TypeScript adds type-checking features for safer programming

By using TypeScript, you will be able to avoid common type-related mistakes. A positive trend is that most tools (frameworks, libraries, and so on) are slowly going in this direction, so work will be easier.

Working online

There are some more online tools that you can use to test out your JavaScript code. Check out JSFiddle (at https://jsfiddle.net/), CodePen (at https://codepen.io/), and JSBin (at http://jsbin.com/), among others. You may have to specify whether to use Babel or Traceur; otherwise, newer language features will be rejected. You can see an example of JSFiddle in Figure 1.5:

Figure 1.5 - JSFiddle lets you try out modern JavaScript code (plus HTML and CSS) without requiring any other tools

Using these tools provides a very quick way to try out code or do small experiments—and I can truly vouch for this since I've tested much of the code in the book in this way!

Testing

We will also touch on testing, which is, after all, one of FP's main advantages. For this, we will be using Jasmine (https://jasmine.github.io/), though we could also opt for Mocha (http://mochajs.org/).

You can run Jasmine test suites with a runner, such as Karma (https://karma-runner.github.io), but I opted for standalone tests; see https://github.com/jasmine/jasmine#installation for details.