Saturday, December 8, 2018

What is new in ES6

1. const and let keywords
const enables you to define constants (finally!). let enables you to define block level variables.

2. Default Parameters in ES6
Before ES6
var link = function (height, color, url) {
    var height = height || 50
    var color = color || 'red'
    var url = url || 'http://azat.co'
    ...
}

In ES6
n ES6, we can put the default values right in the signature of the functions:

var link = function(height = 50, color = 'red', url = 'http://azat.co') {
  ...
}

3. Template Literals in ES6

Before ES6
var name = 'Your name is ' + first + ' ' + last + '.'
var url = 'http://localhost:3000/api/messages/' + id

In ES6
var name = `Your name is ${first} ${last}.`
var url = `http://localhost:3000/api/messages/${id}`

4. Multi-line Strings in ES6

Before ES6

var roadPoem = 'Then took the other, as just as fair,\n\t'
    + 'And having perhaps the better claim\n\t'
    + 'Because it was grassy and wanted wear,\n\t'
    + 'Though as for that the passing there\n\t'
    + 'Had worn them really about the same,\n\t'

var fourAgreements = 'You have the right to be you.\n\
    You can only be you when you do your best.'

In ES6

simply utilize the backticks:

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.`

5. Destructuring Assignment in ES6

Before ES6
var data = $('body').data(), // data has properties house and mouse
  house = data.house,
  mouse = data.mouse

In ES6
var {house, mouse} = $('body').data() // we'll get house and mouse variables

var {json: jsonMiddleware} = require('body-parser')

var {username, password} = req.body

6. Arrow Functions in ES6

Before ES6
var _this = this
$('.btn').click(function(event){
  _this.sendData()
})

In ES6 
$('.btn').click((event) =>{
  this.sendData()
})

7. Promises in ES6

8. Classes in ES6

9. Modules in ES6

10.Array helper functions
map,filter,reduce.

11. Rest and spread operators
Spread

It enables extraction of array or object content as single elements.

Example — make shallow copy of array:

var array = ['red', 'blue', 'green']
var copyOfArray = [...array]

console.log('Copy of', array, 'is', copyOfArray)
console.log('Are', array, 'and', copyOfArray, 'same?', array === copyOfArray)

Copy of ["red","blue","green"] is ["red","blue","green"] 
Are ["red","blue","green"] and ["red","blue","green"] same? false 


Example — merge arrays:

var defaultColors = ['red', 'blue', 'green']
var userDefinedColors = ['yellow', 'orange']

var mergedColors = [...defaultColors, ...userDefinedColors]

console.log('Merged colors', mergedColors)
//Output

Merged colors ["red","blue","green","yellow","orange"] 

Rest
Would you like to bind the first few function parameters to variables, and others to single variables as an array? Now you can do it quite easily.

function printColors(first, second, third, ...others) {
  console.log('Top three colors are ' + first + ', ' + second + ' and ' + third + '. Others are: ' + others)
}
printColors('yellow', 'blue', 'orange', 'white', 'black')

Output
Top three colors are yellow, blue and orange. Others are: white,black 

9. Destructuring
Of array

Enables extraction of requested elements from the array and assigning them to variables.

function printFirstAndSecondElement([first, second]) {
    console.log('First element is ' + first + ', second is ' + second)
}

function printSecondAndFourthElement([, second, , fourth]) {
    console.log('Second element is ' + second + ', fourth is ' + fourth)
}

var array = [1, 2, 3, 4, 5]

printFirstAndSecondElement(array)
printSecondAndFourthElement(array)

First element is 1, second is 2 
Second element is 2, fourth is 4 

Of object

Enables extraction of requested properties from the object and assigning them to variables of the same name as properties.

function printBasicInfo({firstName, secondName, profession}) {
console.log(firstName + ' ' + secondName + ' - ' + profession)
}

var person = {
  firstName: 'John',
  secondName: 'Smith',
  age: 33,
  children: 3,
  profession: 'teacher'
}

printBasicInfo(person)

Output
John Smith - teacher 

No comments:

Followers

Link