Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Mastering JavaScript Functional Programming

You're reading from   Mastering JavaScript Functional Programming In-depth guide for writing robust and maintainable JavaScript code in ES8 and beyond

Arrow left icon
Product type Paperback
Published in Nov 2017
Publisher Packt
ISBN-13 9781787287440
Length 386 pages
Edition 1st Edition
Languages
Arrow right icon
Author (1):
Arrow left icon
Federico Kereki Federico Kereki
Author Profile Icon Federico Kereki
Federico Kereki
Arrow right icon
View More author details
Toc

Table of Contents (15) Chapters Close

Preface 1. Becoming Functional - Several Questions FREE CHAPTER 2. Thinking Functionally - A First Example 3. Starting Out with Functions - A Core Concept 4. Behaving Properly - Pure Functions 5. Programming Declaratively - A Better Style 6. Producing Functions - Higher-Order Functions 7. Transforming Functions - Currying and Partial Application 8. Connecting Functions - Pipelining and Composition 9. Designing Functions - Recursion 10. Ensuring Purity - Immutability 11. Implementing Design Patterns - The Functional Way 12. Building Better Containers - Functional Data Types 13. Bibliography
14. Answers to Questions

How do we work with JavaScript?

All this is quite well, but as we mentioned before, it so happens that the JS version available most everywhere isn't ES8, but rather the earlier JS5. An exception to this is Node.js: it is based on Chrome's V8 high-performance JS engine, which already has several ES8 features available. Nonetheless, as of today, ES8 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 and V8.)

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 may be using older browsers, which don't support the fancy features you're keen on using? Let's see some solutions for that.

If you want to be sure 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 versions of JS aren't yet widely and fully supported, so you'll have to check before using any of their new features

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 ES8 code, and transform it into equivalent JS5 code. (It's a source-to-source transformation, instead of a source-to-object code as in compilation.) You can code using advanced ES8 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 did the word transpiler come from, it is a portmanteau of translate and compiler. There are many such combinations in technological speak: email (electronic+mail), emoticon (emotion+icon), malware (malicious+software), or alphanumeric (alphabetic+numeric), and several more.

The most common transpilers for JS 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 your code will get automatically transpiled and provided to end users. You can also try out transpilation online; see Figure 1.2 for an example using Babel's online environment:

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

If you prefer Traceur, 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 this.) Select the EXPERIMENTAL option, to fully enable ES8 support:

Figure 1.3 - The Traceur transpiler is an equally valid alternative for ES8-to-JS5 translation
Using transpilers is also a great way to learn the new JS features. Just type in some code at the left, and see the equivalent result at the right. Alternatively, use command line interface (CLI) tools to transpile a source file, and then inspect the produced output.

There's a final possibility you may want to consider: instead of JS, opt for Microsoft's TypeScript (at http://www.typescriptlang.org/), a superset of JS, compiled to JS5. The main advantage of TypeScript is adding (optional) static type checks to JS, which helps detect some programming errors at compile time. Beware: as with Babel or Traceur, not all of ES8 will be available.

You can also get 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 types checks, and you can also run your code on the spot. See figure 1.4:

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

Working online

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

Figure 1.5 - JSFiddle lets you try out ES8 code (plus HTML and CSS) without requiring any further tools

Testing

You have been reading a chapter from
Mastering JavaScript Functional Programming
Published in: Nov 2017
Publisher: Packt
ISBN-13: 9781787287440
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime
Banner background image