Exploring ES6 Upgrade to the next version of JavaScript Axel Rauschmayer This book is for sale at http://leanpub.com/exploring-es6 This version was published on 2015-10-03 This is a Leanpub book. Leanpub empowers authors and publishers with the Lean Publishing process. Lean Publishing is the act of publishing an in-progress ebook using lightweight tools and many iterations to get reader feedback, pivot until you have the right book and build traction once you do. ©2015 Axel Rauschmayer (cover by Fran Caye) This book is dedicated to the impossible girl, who has taught me so much about love and life. Contents What you need to know about this book ............................ i Audience: JavaScript programmers .............................. i Why should I read this book? ................................. i How to read this book ..................................... i Glossary and conventions ................................... ii Documenting classes .................................. ii Capitalization ...................................... ii Demo code on GitHub ..................................... iii Sidebars ............................................ iii Footnotes ............................................ iv Preface ............................................... v Acknowledgements ........................................ vi I Background .................................... 1 1. About ECMAScript 6 (ES6) .................................. 2 1.1 TC39 (Ecma Technical Committee 39) ......................... 2 1.2 How ECMAScript 6 was designed ........................... 2 1.2.1 The design process after ES6 ........................... 3 1.3 JavaScript versus ECMAScript ............................. 3 1.4 Upgrading to ES6 .................................... 3 1.5 Goals for ES6 ....................................... 4 1.5.1 Goal: Be a better language ............................ 4 1.5.2 Goal: Improve interoperation .......................... 5 1.5.3 Goal: Versioning ................................. 5 1.6 An overview of ES6 features .............................. 5 1.7 A brief history of ECMAScript ............................. 6 1.7.1 The early years: ECMAScript 1–3 ........................ 6 1.7.2 ECMAScript 4 (abandoned in July 2008) .................... 6 1.7.3 ECMAScript Harmony .............................. 7 2. FAQ: ECMAScript 6 ...................................... 9 CONTENTS 2.1 Isn’t ECMAScript 6 now called ECMAScript 2015? .................. 9 2.2 How much of ES6 is supported natively by current engines? ............. 9 2.3 How do I migrate my ECMAScript 5 code to ECMAScript 6? ............. 9 2.4 Does it still make sense to learn ECMAScript 5? .................... 9 2.5 Is ES6 bloated? ...................................... 10 2.6 Isn’t the ES6 specification very big? .......................... 10 2.7 Does ES6 have array comprehensions? ......................... 10 2.8 Is ES6 statically typed? ................................. 11 2.9 Should I avoid classes? ................................. 11 2.10 Does ES6 have traits or mixins? ............................. 11 2.11 Why are there “fat” arrow functions (=>) in ES6, but no “thin” arrow functions (->)? 12 2.12 Where can I find more ES6 resources? ......................... 12 3. One JavaScript: avoiding versioning in ECMAScript 6 .................. 13 3.1 Versioning ........................................ 13 3.1.1 Evolution without versioning .......................... 14 3.2 Strict mode and ECMAScript 6 ............................. 15 3.2.1 Supporting sloppy (non-strict) mode ...................... 16 3.2.2 let declarations in sloppy mode ........................ 16 3.2.3 Block-level function declarations in sloppy mode . 16 3.2.4 Other keywords ................................. 17 3.2.5 Implicit strict mode ............................... 17 3.2.6 Things that can’t be fixed ............................ 17 3.3 Conclusion ........................................ 17 3.4 Further reading ..................................... 18 4. First steps with ECMAScript 6 ................................ 19 4.1 Trying out ECMAScript 6 ................................ 19 4.1.1 The Babel REPL ................................. 19 4.1.2 babel-node .................................... 20 4.2 From var to let/const ................................. 21 4.3 From IIFEs to blocks ................................... 22 4.4 From concatenating strings to template literals .................... 23 4.4.1 String interpolation ............................... 23 4.4.2 Multi-line strings ................................. 23 4.5 From function expressions to arrow functions ..................... 24 4.6 Handling multiple return values ............................ 26 4.6.1 Multiple return values via arrays ........................ 26 4.6.2 Multiple return values via objects ........................ 26 4.7 From for to forEach() to for-of .......................... 27 4.8 Handling parameter default values ........................... 28 4.9 Handling named parameters .............................. 28 4.9.1 Making the parameter optional ......................... 29 CONTENTS 4.10 From arguments to rest parameters .......................... 29 4.11 From apply() to the spread operator (...) ...................... 30 4.11.1 Math.max() ................................... 30 4.11.2 Array.prototype.push() ........................... 31 4.12 From concat() to the spread operator (...) ..................... 31 4.13 From constructors to classes ............................... 32 4.13.1 Base classes .................................... 32 4.13.2 Derived classes .................................. 33 4.14 From custom error constructors to subclasses of Error . 34 4.15 From function expressions in object literals to method definitions . 34 4.16 From objects to Maps .................................. 35 4.17 From CommonJS modules to ES6 modules ....................... 36 4.17.1 Multiple exports ................................. 36 4.17.2 Single exports .................................. 38 4.18 What to do next ..................................... 38 5. Deploying ECMAScript 6 .................................. 39 5.1 Using ECMAScript 6 today ............................... 39 5.1.1 Using ECMAScript 6 natively .......................... 39 5.2 Transpilation tools .................................... 40 5.2.1 Choosing a transpiler .............................. 41 5.2.2 Choosing a package manager .......................... 42 5.2.3 Choosing a module system ........................... 42 5.3 Other useful ES6 tools and libraries ........................... 42 5.4 ES6 REPLs ........................................ 43 5.5 Are there ES6 features that can’t be transpiled to ES5? . 43 5.5.1 Better syntax for existing features ........................ 44 5.5.2 New functionality in the standard library ................... 45 5.5.3 Completely new features ............................ 45 5.6 Example transpilation setups .............................. 47 5.7 Example setup: Client-side ES6 via webpack and Babel . 47 5.7.1 webpack features ................................. 47 5.7.2 Installing webpack ................................ 48 5.7.3 Using webpack and ES6 in a project ....................... 48 5.8 Example setup: Dynamically transpiled ES6 on Node.js via Babel . 51 5.8.1 Running normal Node.js code via Babel .................... 51 5.8.2 Running Jasmine unit tests via Babel ...................... 52 5.9 Example setup: Statically transpiled ES6 on Node.js via Babel and gulp . 54 5.9.1 Installation .................................... 54 5.9.2 Source maps ................................... 54 5.9.3 The gulp file ................................... 55 5.9.4 Transpilation ................................... 56 5.9.5 Running the transpiled code ........................... 57 CONTENTS II Data ........................................... 59 6. New number and Math features ............................... 60 6.1 Overview ......................................... 60 6.2 New integer literals ................................... 60 6.2.1 Use case for octal literals: Unix-style file permissions . 61 6.2.2 parseInt() and the new integer literals .................... 62 6.3 New static Number properties .............................. 64 6.3.1 Previously global functions ........................... 64 6.3.2 Number.EPSILON ................................ 65 6.3.3 Number.isInteger(number) ......................... 66 6.3.4 Safe Integers ................................... 66 6.4 Math ........................................... 69 6.4.1 Various numerical functionality ......................... 69 6.4.2 Using 0 instead of 1 with exponentiation and logarithm . 71 6.4.3 Logarithms to base 2 and 10 ........................... 72 6.4.4 Support for compiling to JavaScript ....................... 73 6.4.5 Bitwise operations ................................ 73 6.4.6 Trigonometric methods ............................. 74 6.5 FAQ: numbers ...................................... 74 6.5.1 How can I use integers beyond JavaScript’s 53 bit range? . 74 7. New string features ...................................... 76 7.1 Overview ......................................... 76 7.2 Unicode code point escapes ............................... 76 7.3 String interpolation, multi-line string literals and raw string literals . 77 7.4 Iterating over strings ................................... 77 7.4.1 Iteration honors Unicode code points ...................... 78 7.4.2