JavaScript  new Features

By delvallejonatan

ECMAScript, ECMA, and JavaScript

ECMA: An Organization that creates standards for scripting languages
ECMAScript: provides the rules, details, and guidelines that a scripting language must observe to be considered ECMAScript compliant.

JavaScript: Scripting language that conforms to the ECMAScript specification.

 

JavaScript Engines and Babel

JavaScript Engines: A program or interpreter that understands and executes JavaScript code. Like V8 in Chrome, SpiderMonkey in Firefox, and Chakra in Edge. Bebel: A transpiler that can convert ES6 code to ES5 code.

ES6 and ES Process

ES6: It is the sixth edition of the ECMA standard, and features major changes and improvements to the ECMAScript specification.

ES Process: Each proposal for an ECMAScript feature goes through the following maturity stages.
Stage 0: strawman, Stage 1: proposal, Stage 2: draft, Stage 3: candidate and Stage 4: finished.

Top ES6 Features

Full list here

Default Parameters

ES5

 

ES6

 

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

Template Literals

ES5

 

ES6

 

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

Multi-line Strings

ES5

 

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

ES5

 

ES6

 

var jsonMiddleware = require('body-parser').json

var body = req.body, // body has username and password
  username = body.username,
  password = body.password 
var {json: jsonMiddleware} = require('body-parser')
var {username, password} = req.body
// This also works with arrays
var [col1, col2]  = $('.column'),
  [line1, line2, line3, , line5] = file.split('\n')
// Nested
var metadata = {
    title: "Scratchpad",
    translations: [
       {
        url: "/de/docs/Tools/Scratchpad",
        title: "JavaScript-Umgebung"
       }
    ],
    url: "/en-US/docs/Tools/Scratchpad"
};
var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata
console.log(englishTitle) // "Scratchpad"
console.log(localeTitle)  // "JavaScript-Umgebung"
// This is valid for function parameters
var link = function({name='joni', lastName='delValle'}) {
  ...
}

Enhanced Object Literals

ES5

 

ES6

 

var getAccounts = function(){return [1,2,3]}

var accountServiceES5 = {
  getAccounts: getAccounts,
  toString: function() {
    return JSON.stringify()
  },
  valueOf_1_2_3: getAccounts()
}
var getAccounts = function(){return [1,2,3]}

var accountServiceES5 = {
  getAccounts
  toString() {
    return JSON.stringify()
  },
  [ 'valueOf_' + getAccounts().join('_') ]: getAccounts()
}

Arrow Functions

ES5

 

ES6

 

var _this = this

$('.btn').click(function(event){
  return _this.sendData()
})


var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9']
var messages = ids.map(function (value) {
  return "ID is " + value // explicit return
})

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

var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9']
var messages = ids.map(value => `ID is ${value}`) // implicit return

Promises, before: q, bluebird, etc.

ES5

 

ES6

 

setTimeout(function(){
  console.log('Yay!')
}, 1000)

var wait1000 =  new Promise(function(resolve, reject) {
  setTimeout(resolve, 1000)
}).then(function() {
  console.log('Yay!')
})

Constructs Let and Const

ES5

 

ES6

 

function nodeSimplified(){
  var a =10
  console.log(a)  // output 10
  if(true){
   var a=20
   console.log(a) // output 20
  }
  console.log(a) // output 20
}

function nodeSimplified(){
  const MY_VARIABLE =10
  console.log(MY_VARIABLE)  //output 10 
}
function nodeSimplified(){
  let a =10
  console.log(a)  // output 10
  if(true){
   let a=20
   console.log(a) // output 20
  }
  console.log(a)  // output 10
}
function nodeSimplified(){
  const MY_VARIABLE =10
  console.log(MY_VARIABLE)  //output 10
  MY_VARIABLE =20          //throws type error
  console.log(MY_VARIABLE) }

Classes

ES5

 

ES6

 

function Bunny(name, age, favoriteFood) {
  this.name = name
  this.age = age
  this.favoriteFood = favoriteFood
} 
Bunny.prototype.eatFavFood = function () {
  console.log('\"Mmmm! Those '+this.favoriteFood+' were delicious\", said '+this.name+', the '+this.age+' year old bunny.')
};
var newBunny = new Bunny('Brigadier Fluffkins', 3, 'Raspberry Leaves')
newBunny.eatFavFood();
// "Mmmm! Those Raspberry Leaves were delicious", said Brigadier Fluffkins, the 3 year old bunny.
class Bunny {
  constructor(name, age, favoriteFood){
    this.name = name
    this.age = age
    this.favoriteFood = favoriteFood
  }
  
  eatFavFood() {
    console.log(`"Mmmm! Those ${this.favoriteFood} were delicious", said ${this.name} the ${this.age} year old bunny.`)
  };
}

let es6Bunny = new Bunny('Brigadier Fluffkins', 3, 'Raspberry Leaves')
es6Bunny.eatFavFood()
// "Mmmm! Those Raspberry Leaves were delicious", said Brigadier Fluffkins the 3 year old bunny.

Extending Objects

ES5

 

ES6

 

// Underscore

var o1 = { a: 1 };
var o2 = { b: 2 };
// clone
var copy = _.extend({}, o1);
// merge
var obj = _.extend(o1, o2);
 var o1 = { a: 1 }
 var o2 = { b: 2 }
 // clone
 var copy = Object.assign({}, o1)
 // merge
 var obj = Object.assign(o1, o2)

// Using Spread Operator

var copy = { ...o1 }
var obj = { ...o1, ...o2 }

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }
x; // 1
y; // 2
z; // { a: 3, b: 4 }

Modules

ES5

 

ES6

 

var scoreboard = function() {
    var message = 'Welcome to the game!';
    function printMessage() {
         console.log(message);
    }
    function updateMessage(newMessage) {
        message = newMessage;
    }
    //return an object that represents our new module
    return {
         showMessage: printMessage,
         updateMessage: updateMessage
    }
}(); //← This is called a immediately invoked function definition, or IIFE
// In another file
scoreboard.printMessage();
scoreboard.updateMessage(“Let the game begin!”);
function printMessage() { console.log(message) }
function updateMessage(newMessage) { message = newMessage }
export { printMessage, updateMessage }
// In another file
import * as message from ‘./message.js’
message.printMessage()

ES6 - JavaScript new Features

By Jonatan del Valle

Made with Slides.com

ES6 - JavaScript new Features

  • 471

More from Jonatan del Valle