9 A quick overview of new JavaScript features in ES2015, ES2016, ES2017, ES2018 and beyond.
20 let x = 1 // only inside this `if`
32 `let` is the new `var`. Constants work just like `let`, but can't be reassigned.
33 See: [Let and const](https://babeljs.io/learn-es2015/#let--const)
40 const message = `Hello ${name}`
43 #### Multiline strings
52 Templates and multiline strings.
53 See: [Template strings](https://babeljs.io/learn-es2015/#template-strings)
55 ### Binary and octal literals
62 See: [Binary and octal literals](https://babeljs.io/learn-es2015/#binary-and-octal-literals)
66 #### New string methods
70 "hello".includes("ll")
71 "hello".startsWith("he")
72 "hello".padStart(8) // " hello"
73 "hello".padEnd(8) // "hello "
74 "hello".padEnd(8, '!') // hello!!!
75 "\u1E9B\u0323".normalize("NFC")
78 See: [New methods](https://babeljs.io/learn-es2015/#math--number--string--object-apis)
83 class Circle extends Shape {
89 constructor (radius) {
99 return Math.PI * 2 * this.radius
104 #### Calling superclass methods
108 return super.expand(n) * Math.PI
116 static createFromDiameter(diameter) {
117 return new Circle(diameter / 2)
123 Syntactic sugar for prototypes.
124 See: [Classes](https://babeljs.io/learn-es2015/#classes)
126 ### Exponent operator
130 // Same as: Math.pow(2, 8)
141 new Promise((resolve, reject) => {
142 if (ok) { resolve(result) }
143 else { reject(error) }
148 For asynchronous programming.
149 See: [Promises](https://babeljs.io/learn-es2015/#promises)
155 .then((result) => { ··· })
156 .catch((error) => { ··· })
161 ### Using promises with finally
165 .then((result) => { ··· })
166 .catch((error) => { ··· })
167 .finally(() => { // logic independent of success/error })
171 The handler is called when the promise is fulfilled or rejected.
174 ### Promise functions
186 async function run () {
187 const user = await getUser()
188 const tweets = await getTweets(user)
189 return [user, tweets]
194 `async` functions are another way of using functions.
196 See: [async function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)
202 ### Destructuring assignment
207 const [first, last] = ['Nikola', 'Tesla']
214 let {title, author} = {
215 title: 'The Silkworm',
216 author: 'R. Galbraith'
221 Supports for matching arrays and objects.
222 See: [Destructuring](https://babeljs.io/learn-es2015/#destructuring)
227 const scores = [22, 33]
228 const [math = 50, sci = 50, arts = 50] = scores
233 // math === 22, sci === 33, arts === 50
236 Default values can be assigned while destructuring arrays or objects.
238 ### Function arguments
241 function greet({ name, greeting }) {
242 console.log(`${greeting}, ${name}!`)
248 greet({ name: 'Larry', greeting: 'Ahoy' })
251 Destructuring of objects and arrays can also be done in function arguments.
256 function greet({ name = 'Rauno' } = {}) {
257 console.log(`Hi ${name}!`);
264 greet({ name: 'Larry' }) // Hi Larry!
270 function printCoordinates({ left: x, top: y }) {
271 console.log(`x: ${x}, y: ${y}`)
277 printCoordinates({ left: 25, top: 90 })
280 This example assigns `x` to the value of the `left` key.
285 for (let {title, artist} of songs) {
291 The assignment expressions work in loops, too.
294 ### Object destructuring
297 const { id, ...detail } = song;
301 Extract some keys individually and remaining keys in the object using rest (...) operator
309 #### with Object spread
319 #### without Object spread
322 const options = Object.assign(
327 The Object spread operator lets you build new objects from other objects.
329 See: [Object spread](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator)
333 #### with Array spread
344 #### without Array spread
349 .concat([ 'rstacruz' ])
352 The spread operator lets you build new arrays in the same way.
354 See: [Spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator)
359 ### Function arguments
361 #### Default arguments
364 function greet (name = 'Jerry') {
365 return `Hello ${name}`
373 function fn(x, ...y) {
384 // same as fn(1, 2, 3)
388 Default, rest, spread.
389 See: [Function arguments](https://babeljs.io/learn-es2015/#default--rest--spread)
405 readFile('text.txt', (err, data) => {
413 numbers.map(n => n * 2)
414 // No curly braces = implicit return
415 // Same as: numbers.map(function (n) { return n * 2 })
419 // Implicitly returning objects requires parentheses around the object
421 {: data-line="1,4,5,6"}
423 Like functions but with `this` preserved.
424 See: [Fat arrows](https://babeljs.io/learn-es2015/#arrows-and-lexical-this)
432 module.exports = { hello, bye }
433 // Same as: module.exports = { hello: hello, bye: bye }
436 See: [Object literal enhancements](https://babeljs.io/learn-es2015/#enhanced-object-literals)
443 console.log('running')
446 // Same as: App = { start: function () {···} }
450 See: [Object literal enhancements](https://babeljs.io/learn-es2015/#enhanced-object-literals)
452 ### Getters and setters
457 return this.status === 'closed'
460 this.status = value ? 'closed' : 'open'
466 See: [Object literal enhancements](https://babeljs.io/learn-es2015/#enhanced-object-literals)
468 ### Computed property names
475 // Same as: handlers = { 'onclick': true }
479 See: [Object literal enhancements](https://babeljs.io/learn-es2015/#enhanced-object-literals)
485 const fatherJS = { age: 57, name: "Brendan Eich" }
487 Object.values(fatherJS)
488 // [57, "Brendan Eich"]
489 Object.entries(fatherJS)
490 // [["age", 57], ["name", "Brendan Eich"]]
503 // aka: require('···')
507 import Express from 'express'
508 // aka: const Express = require('···').default || require('···')
512 import { indent } from 'helpers'
513 // aka: const indent = require('···').indent
517 import * as Helpers from 'helpers'
518 // aka: const Helpers = require('···')
522 import { indentSpaces as indent } from 'helpers'
523 // aka: const indent = require('···').indentSpaces
526 `import` is the new `require()`.
527 See: [Module imports](https://babeljs.io/learn-es2015/#modules)
532 export default function () { ··· }
533 // aka: module.exports.default = ···
537 export function mymethod () { ··· }
538 // aka: module.exports.mymethod = ···
542 export const pi = 3.14159
543 // aka: module.exports.pi = ···
546 `export` is the new `module.exports`.
547 See: [Module exports](https://babeljs.io/learn-es2015/#modules)
555 function* idMaker () {
557 while (true) { yield id++ }
563 gen.next().value // → 0
564 gen.next().value // → 1
565 gen.next().value // → 2
569 See: [Generators](https://babeljs.io/learn-es2015/#generators)
571 ### For..of iteration
574 for (let i of iterable) {
579 For iterating through generators and arrays.
580 See: [For..of iteration](https://babeljs.io/learn-es2015/#iterators--forof)