EcmaScript 6 – An Introduction – Characteristics



EcmaScript 6 – An Introduction – Characteristics

0 0


ES6_speak

EcmaScript6 introduction

On Github ogranada / ES6_speak

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

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

EcmaScript 6 An Introduction Created by Oscar Andrés Granada / @oagranada