EcmaScript 6

An Introduction

Created by Oscar Andrés Granada / @oagranada

Why ES6

  • Use O.O.P. in the browser.
  • Increase "Syntactic sugar" in the language.
  • Make it compatible with another programing languages.

Characteristics

ES6 include many new features


Down arrow

Variable declarations

Introduction of let.


function foo( els ) {
  'use strict'
  for(let i in els){
    console.log("Hello!"); // write Hello!
  }
  console.log(i); // write undefined
}
            

Constants

Introduction of const.


function foo( ) {
  'use strict'
  const w = 1;
  w = 2; // generate error
}
            

Return multiple values

Introduction of data distribution in many vars.


function foo( ) {
  return [1,2,3];
}

let a, b, c = foo(); // a=1, b=2, c=3
function f(){
  'use strict'
   return {a:1, b:2};
}

function g(){
  'use strict'
  let {a, b} = f(); // a=1, b=2
}
            

Default values in functions

Asignation in function params declaration.


function foo( name='username') {
  return "Hello " + name;
}
foo(); // "Hello username"
foo("Pepa pig"); // "Hello Pepa Pig"
            

Package params into array

Introduction of ... operator.


function foo( a, b, ...others ) {
  'use strict'
  for(let i in others){
    console.log(others[i]); // write an element of array
  }
  console.log(a+" - "+b);
}
foo(1, 2, 3, 4);
var arr = [3,4,5,6];
foo(...arr); // pass a=3, b=4, arr = [5, 6]
            

Multi line string

Introduction of ``` operator.


function foo( a, b ) {
	'use strict'
  let q = ```SELECT id, username
  FROM sampleData whete id='${a} '
  AND username='${b}'```;
	return q;
}
            

Arrow functions

Introduction of () => { } syntax.


var foo = ( a, b) => {
  console.log(a+" - "+b); // write undefined
};
            

Classes and methods

Introduction of class structure.


class Human {
  constructor(name){
    this.name = name;
  }
}
class User extends Human{
  static release(){
    // TODO: code logic here...
  }
  get UserName(){
    return this.name;
  }
}

var i = new User("Pepa");
            

Iterative for variant

Introduction of of keyword.


var w = (els)=>{
  for(el of els){
    console.log(el); // write value
  }
};
w([1,2,3,4]); // print 1, 2, 3, 4
            

Notations to specify numeric base

Introduction of 0o and 0b literals.


var w = ()=>{
  var octal = 0o12; // 10;
  var binary = 0o101; // 5;
};
            

Modularization

Introduction of export export.


export let sampleMethod = function sampleMethod(){
  // TODO: code logic here...
}
            

import * as mortgage from './mortgage';
sampleMethod();
            

Context Management

Use of this to access to parent context.


{
	"foo": ()=>{
	},
	"var": ()=>{
		this.foo();
	}
}

            

import * as mortgage from './mortgage';
sampleMethod();
            

Advantages

Disadvantages

THE END