EcmaS Versions

ES6 - ES2015

Default params

function newFunction(name, age, country) {
  var name = name || 'carlos';
  console.log(name);
}

// ES6
function newFunction(name = 'carlos', age = '23', country = 'USA') {
  console.log(name);
}

newFunction();
newFunction('José', '24', 'CO');

Template Literals

let hello = "Hello";
let world = "World";
// past
let epicPhrase = hello + ' ' + world;
// es6
let epicPhrase2 = `${hello} ${world}`

Multi Line

// past
let lorem = "line 1 \n"
+ "line 2";
// es6
let lorem2 = `Line 1
Line 2`

Destructuring

let person = {
    'name': 'Antonio',
    'age': '28',
    'country': 'Ambato'
};
console.log(person.name, person.age, person.country);

// es6
let {name, age, country} = person
console.log(name, age, country);

Spread Operator

let team1 =['Oscar', 'Julian', 'Ricardo'];
let team2 = ['Valeria', 'Yessenia', 'Camila'];

// es6
let education = ['David', ...team1, ...team2];

var vs let vs const

{
    var globalVar = "Globarl var";
}

{
    let globalLet = 'Global let'
    const AA = 'xd'; // cannot be reassigned
    console.log(globalLet);
    console.log(AA);
}
console.log(AA); // not exist
console.log(globalLet); // not exist
console.log(globalVar);

Parameters in Objects

let name = 'Oscar';
let age = 32;

const obj = {
  name: name,
  age: age
};
console.log('Before ES6 -> ', obj);

// es6
const objES6 = { name, age };
console.log(`After ES6 -> `, objES6);

Arrow Functions

const names = [
  { name: 'Carlos, age: 23 },
  { name: 'Yesica', age: 27 } 
];

let listOfNames = names.map(function(item) {
  console.log('Before ES6 -> ', item.name);
});

// es6
let listOfNamesES6 = names.map(item => console.log(`After ES6 -> ${item.name}`));

const listOfNamesES6 = (name, age, country) => {
   ...
}

const listOfNamesES6 = name => {
   ...
}

Promises

const helloPromise = foo => {
  return new Promise((resolve, reject) => {
    if (foo) {
      resolve('Hey!');
    } else {
      reject('Upss!');
    }
  });
};

const foo = false;
helloPromise(foo)
  .then(response => console.log('response -> ', response))
  .then(() => console.log('message -> Hello World!'))
  .catch(error => console.log('error -> ', error));

Class

class Calculator {
  constructor() {
    this.valueA = 0;
    this.valueB = 0;
  }
  sum(valueA, valueB) {
    this.valueA = valueA;
    this.valueB = valueB;
    return this.valueA + this.valueB;
  }
}

const calc = new Calculator();
console.log(calc.sum(2, 2));

Modules (import and export)

import { x } from './xd';
export x;

Generators

function* helloWorld() {
if (true) {
  yield 'hello, ';
}
if (true) {
  yield 'world';
}
}

const generatorHello = helloWorld();
console.log(generatorHello.next().value); // hello, 
console.log(generatorHello.next().value); // world
console.log(generatorHello.next().value); // undefined

// like fibonacci

ES7 - 2016

Includes on array

let numbers = [1,2,5,6,7,3];
if(numbers.includes(7)){
    console.log("Si se encuentra el valor 7")
}
else{
    console.log("No se encuentra");
}

Exponential

let base = 4;
let exponente = 3;
let resultado = base ** exponente;

console.log(resultado);

ES8 - 2017

ASYNC and AWAIT

const myPromise = () => {
    return newPromise((resolve, reject) => {
        (true) ? setTimeout(() => resolve('Ok!'), 1000)
        : reject(new Error('Opsss!'))
    })
}
// es6
myPromise()
    .then(res => console.log(res))
    .catch(err => console.error(err))

// es7
const foo = async () => {
    try {
        const res = await myPromise()
        console.log(res)
    } catch (err) {
        console.log(err)
    }
}
foo()

Object .entries and .values

const data = {
    frontend: "Carlos",
    backend: "Daniela",
    design: "Gabriela"
}

const entries = Object.entries(data);
console.log(entries);
console.log(entries.length);

const values = Object.values(data);
console.log(values);
console.log(values.length);

Padding

const hello = 'hello'
console.log(hello.padStart(7,'hi'))
console.log(hello.padEnd(12,'----'))
console.log('food'.padEnd(12, '----'))

Trailing commas

const data = {
    frontend: "Carlos",
    backend: "Daniela", // this is trailing comma
}

ES9 - 2018

Spread Operator - Destructuring

const obj = {
  name: 'Oscar',
  age: 32,
  country: 'MX'
};

let { name, ...extraInfo } = obj;
console.log(`name: ${name}`);
console.log(`additional information: `, extraInfo);

let { country, ...nameAndAge } = obj;
console.log(`name and age: `, nameAndAge);

Propagation Properties

const person = {
  name: 'Oscar',
  age: 32
};

const personInformation = {
  ...person,
  country: 'MX'
};
console.log(`personInformation: `, personInformation);

Promise Finally

const helloWorld = () => {
  returnnew Promise((resolve, reject) => {
    true
      ? setTimeout(() => {
          resolve('Hello World!');
        }, 3000)
      : reject(newError('Test Error'));
  });
};

helloWorld()
  .then(result => console.log('result -> ', result))
  .catch(err => console.log('err -> ', err))
  .finally(() => console.log('finalizó'));

regEx (improve)

// group
const regexData = /([0-9]{4})-([0-9]{2})-([0-9]{2})/;
const match = regexData.exec('2018-04-28');
const year = match[1];
const month = match[2];
const day = match[3];
console.log('Date -> ', year, month, day);

ES10 - 2019

let list = [1, 2, 3, [1, 2, 3, [1, 2, 3,]]]
console.log(list.flat()); // [1, 2, 3, 1, 2, 3, [1, 2, 3]]
console.log(list.flat(2)); // [1, 2, 3, 1, 2, 3, 1, 2, 3]
console.log(list.flat().flat()); // [1, 2, 3, 1, 2, 3, 1, 2, 3]
console.log(list.flat(Infinity)); // [1, 2, 3, 1, 2, 3, 1, 2, 3]

Flat Map

var arr1 = [1, 2, 3, 4];
arr1.map(x => [x, x * 2]); // return array with arrays
arr1.flatMap(x => [x, x * 2]); // Flat array

Trim Start and End

let string = '      HELLO';
console.log(string.trimStart());
// TRIM END
let string2 = 'HELLO      ';
console.log(string2.trimEnd());

Optional catch binding (Catch without error)

// es7
try { }
catch (error) { console.log(error) }
// es10
// no need send error to use in catch
try { }
catch { console.log(error) }

Entries to Objects

let entries = [['nombre', 'jesus'], ['edad', 22]]
obj = Object.fromEntries(entries)
console.log(entries)
console.log(obj)

Description in Symbol

let s = Symbol('Esta es la descripcion del simbolo')
console.log(s.description);

ES NEXT

Writed by TC39

Stages Idea (sage 0) -> Proposal (1) -> Draft (2) -> Candidate (3) -> Ready (4)

Support in each version of node (click here)