> For the complete documentation index, see [llms.txt](https://maissen.gitbook.io/maissen-grimoire/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://maissen.gitbook.io/maissen-grimoire/javascript-grimoire/javascript-cheat-sheet/es6-ecmascript2015-cheatsheet.md).
# ES6/ECMAScript2015 Cheatsheet
### Installation
Babel:
* CLI: `$ npm install -g babel-cli`
* Require: `$ npm install -g babel-core`
* Browser: ``
* Gulp: `$ npm install --save-dev gulp-babel`
### Usage
* CLI: `$ babel script.js` or `$ babel script.js`
* Require: `require("babel-core/register");`
* Browser: ``
Gulp:
```javascript
var gulp = require('gulp'),
babel = require('gulp-babel')
gulp.task('build', function () {
return gulp.src('src/app.js')
.pipe(babel())
.pipe(gulp.dest('build'))
})
```
### Default Parameters in ES6
```javascript
var link = function(height = 50, color = 'red', url = 'http://azat.co') {
...
}
```
### Template Literals in ES6
```javascript
var name = `Your name is ${first} ${last}.`
var url = `http://localhost:3000/api/messages/${id}`
```
### Multi-line Strings in ES6
```javascript
var roadPoem = `Then took the other, as just as fair,
And having perhaps the better claim
Because it was grassy and wanted wear,
Though as for that the passing there
Had worn them really about the same,`
var fourAgreements = `You have the right to be you.
You can only be you when you do your best.`
```
### Destructuring Assignment in ES6
```javascript
var { house, mouse} = $('body').data() // we'll get house and mouse variables
var {json} = require('body-parser')
var {username, password} = req.body
var [col1, col2] = $('.column'),
[line1, line2, line3, , line5] = file.split('\n')
```
### Enhanced Object Literals in ES6
```javascript
var serviceBase = {port: 3000, url: 'azat.co'},
getAccounts = function(){return [1,2,3]}
var accountService = {
__proto__: serviceBase,
getAccounts,
toString() {
return JSON.stringify((super.valueOf()))
},
getUrl() {return "http://" + this.url + ':' + this.port},
[ 'valueOf_' + getAccounts().join('_') ]: getAccounts()
};
console.log(accountService)
```
[](https://camo.githubusercontent.com/fafa54d30663edb2625d43f6084e25a62457faff/687474703a2f2f6d303373366468333369306a746333757a666d6c333661752e7770656e67696e652e6e6574646e612d63646e2e636f6d2f77702d636f6e74656e742f75706c6f6164732f776f52483934664f684343306159786749343071752d64557a48506f784e6a6877734c473555346f6230632e706e67)
### Arrow Functions in ES6
```javascript
$('.btn').click((event) =>{
this.sendData()
})
```
```javascript
var logUpperCase = function() {
this.string = this.string.toUpperCase()
return () => console.log(this.string)
}
logUpperCase.call({ string: 'es6 rocks' })()
```
```javascript
var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9']
var messages = ids.map(value => `ID is ${value}`) // implicit return
```
```javascript
var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9']
var messages = ids.map((value, index, list) => `ID of ${index} element is ${value} `) // implicit return
```
### Promises in ES6
```javascript
var wait1000 = new Promise((resolve, reject)=> {
setTimeout(resolve, 1000)
}).then(()=> {
console.log('Yay!')
})
```
```javascript
var wait1000 = ()=> new Promise((resolve, reject)=> {setTimeout(resolve, 1000)})
wait1000()
.then(function() {
console.log('Yay!')
return wait1000()
})
.then(function() {
console.log('Wheeyee!')
});
```
### Block-Scoped Constructs Let and Const
```javascript
function calculateTotalAmount (vip) {
var amount = 0 // probably should also be let, but you can mix var and let
if (vip) {
let amount = 1 // first amount is still 0
}
{ // more crazy blocks!
let amount = 100 // first amount is still 0
{
let amount = 1000 // first amount is still 0
}
}
return amount
}
console.log(calculateTotalAmount(true))
```
```javascript
function calculateTotalAmount (vip) {
const amount = 0
if (vip) {
const amount = 1
}
{ // more crazy blocks!
const amount = 100
{
const amount = 1000
}
}
return amount
}
console.log(calculateTotalAmount(true))
```
### Classes in ES6
```javascript
class baseModel {
constructor(options = {}, data = []) { // class constructor
this.name = 'Base'
this.url = 'http://azat.co/api'
this.data = data
this.options = options
}
getName() { // class method
console.log(`Class name: ${this.name}`)
}
}
class AccountModel extends baseModel {
constructor(options, data) {
super({private: true}, ['32113123123', '524214691']) //call the parent method with super
this.name = 'Account Model'
this.url +='/accounts/'
}
get accountsData() { //calculated attribute getter
// ... make XHR
return this.data
}
}
let accounts = new AccountModel(5)
accounts.getName()
console.log('Data is %s', accounts.accountsData)
```
The output is:
```javascript
Class name: Account Model
Data is %s 32113123123,524214691
```
### Modules in ES6
`module.js` file:
```javascript
export var port = 3000
export function getAccounts(url) {
...
}
```
`main.js` file:
```javascript
import {port, getAccounts} from 'module'
console.log(port) // 3000
```
Or import everything as a variable `service` in `main.js`:
```javascript
import * as service from 'module'
console.log(service.port) // 3000
```
### More ES6 Features
1. New Math, Number, String, Array and Object methods
2. Binary and octal number types
3. Default rest spread
4. `For of` comprehensions (hello again mighty CoffeeScript!)
5. Symbols
6. Tail calls
7. Generators
8. New data structures like Map and Set
### Resources
1. [Learn ES2015](https://babeljs.io/docs/learn-es2015)
2. [ES6 REPL](https://babeljs.io/repl)
3. [ES6 Fiddle](http://www.es6fiddle.net/)
4. [*Understanding ECMAScript 6* by Nicolas Zakas book](https://leanpub.com/understandinges6)
5. [*Exploring ES6* by Dr. Axel Rauschmayer](https://leanpub.com/exploring-es6)
6. [*You Don't Know JS: ES6 & Beyond*](https://github.com/getify/You-Dont-Know-JS/blob/master/es6%20&%20beyond/README.md#you-dont-know-js-es6--beyond) by By Kyle Simpson