European Computer Manufacture`s Association - ECMA Internation

É uma organização global que cria padrões para utilização da comunicação envolvendo a tecnologia.

ECMAScript

O ECMAScript é um conjunto de regras que os criadores de navegadores devem seguir para garantir a padronização e suporte do javascript, que é linguagem que roda nos navegadores.

Então o ECMAScript são as diretivas do javascript que estão sempre em atualização para fazer o alinhamento entre os navegadores e a evolução do js.

ES6 - ECMAScript 6 - ES2015

Após 2015 o ECMAscript passou a ser relacionado ao ano e não mais a versão.

Infelizmente a maioria dos navegadores ainda não suportam as novas diretivas do ES6, que foram feitas para evoluir alguns problemas antigos do js e escalar melhor em aplicações complexas.

Para contornar isso surgiu o transpiler Babel, que converte o código escrito em ES6 para ES5 no qual os navegadores tem suporte.

Declaração de variáveis

O let foi criado para corrigir problemas de declaração de variáveis que acontecia com var, como também aplicar o escopo de variável por bloco e não pro função.

Já o const foi criado para valores estáticos, ou seja, após ser atribuído um valor a uma const, esse não será mais alterado, somente seu estado interno, oferecendo ganhos de performance.

var = a;

let a = 1
a = 2 // Ok

const b = 1
b = 2 // Uncaught SyntaxError "b" is read-only

//internal state change
const obj = {
	one: 1
}
obj[1] = 2; //{one: 1, 1:2}

Em resumo:

Não utilizar mais o var.

Declarar as variável como const por padrão e somente as que terão retribuição de valores deverão ser let.

Valores padrão para parâmetros

y = 1 | null; // ES5

const multiply = (x, y = 1) => { // ES6
  return x * y
}

const multiply = (x, y = 1) => x * y // ES6 reduzido

multiply(3, 2)

Rest parameters

Parecem ser uma lista, mas é um objeto arguments passado como parâmetro da função

var sum = function() {
    var result = 0;
    for (var i=0; i < arguments.length; i++) {
        result += arguments[i];
    }
    return result;
}

//reduzido
const sum = (...numbers) =>  numbers.reduce((acc, current) => acc + current, 0)

sum(1, 2, 3, 4, 5) // 15

Programação funcional

Arrow function

É uma forma de simplificar funções e corrigir problemas de escopo do js que era necessário user o this.

Function

hello = function() {
  return "Hello World!";
}

Arrow function

hello = () => {
  return "Hello World!";
}

console.log(hello());

Arrow function with parameters

hello = (val) => "Hello " + val;
hello("World");

Desistruração (destructuring)

// Importação de libs
//estruturado
var ReactRouter = require('react-router');
var Route = ReactRouter.Route;
var Link = ReactRouter.Link;
var Router = ReactRouter.Router;

//deistruturado
const { 
  Route, 
  Link, 
  Router
} = require('react-router')

// Objeto
const person = { name: 'Sabrina', age: 29 }

const {name, age} = person

console.log(name) // 'Sabrina'
console.log(age) // 29

Modulos

export function sum(x, y) { //exportação de modulo
  return x + y
}

import { sum } from 'lib' //importação de modulo em outro arquivo e utilização

sum(1, 2) // 3

Padrão

As vezes precisamos fazer apenas uma exportação por arquivo, então podemos usar o padrão