ECMAScript

ECMAScript

 

Antes que o JavaScript se tornasse popular, para que a linguagem evoluísse obedecendo a determinados padrões e normativas, os criadores do JavaScript se associaram ao ECMA (European Computer Manufactures Association) em 1996.

ECMAScript

 

Como o nome JavaScript já havia sido patenteado pela Sun Microsystems (atual Oracle), optou-se por se definir um novo nome à linguagem utilizando a junção das palavras ECMA e JavaScript, surgindo então o ECMAScript.

ECMAScript

 

Como o nome JavaScript ficou popular na comunidade, a linguagem é chamada por este nome até hoje, sendo o ECMAScript referenciado apenas para se determinar a versão da linguagem.

ES12

const express = require('express');
const router = express.Router();

Desestruturação

const { Router } = require('express');
const router = Router();

ES5

ES6

const array = [1, 2, 3];
const firstElement = array[0];
console.log(firstElement); // 1

Desestruturação

const [elemento1, elemento2, elemento3] = [1, 2, 3];
console.log(elemento1, elemento2, elemento3); // 1, 2, 3

ES5

ES6

const body = {
  nome: "Alan",
  sobreNome: "Santos"
};
const nome = body.name;
const sobreNome = body.sobreNome;
console.log(nome, sobreNome); // Alan Santos

Desestruturação

const body = {
  name: "Alan",
  sobreNome: "Santos"
};
const { nome, sobreNome } = body;
console.log(nome, sobreNome); // Alan Santos

ES5

ES6

const getName = function (param1, param2) {
  
});

Arrow Functions

const getName = (param1, param2) => {
  
});

ES5

ES6

router.get('/', function(req, res) {
  
});

Arrow Functions

router.get('/', (req, res) => {
  
});

ES5

ES6

Promisses

 

É um objeto usado para processamento assíncrono. Um Promise (de "promessa") representa um valor que pode estar disponível agora, no futuro ou nunca.

Promisses

fetch(`http://swapi.co/api/people/${id}`)
   .then(function(response) { 
  		return response.json() 
	})
   .then(function(person) { 
  		console.log(person.name)
	})
   .catch(function(error) { 
  		console.log(error) 
	});

ES5

Aninhamento

Async/Await

 

Com essa funcionalidade, é possível escrever código assíncrono como se estivéssemos escrevendo código síncrono.

try {
  const response = await fetch(`http://swapi.co/api/people/${id}`);
  const person = await response.json();
  console.log(person.name);
} catch (error) {
  console.log(error);
}

Async/Await

ES7

fetch(`http://swapi.co/api/people/${id}`)
   .then(response => response.json())
   .then(person => {
  		console.log(person);
  		console.log(person.name);
	})
   .catch(error => console.log(error));

ES6

const { Router } = require('express');
const router = Router();

router.get('/', async (req, res) => {
  try {
    const response = await fetch(`http://swapi.co/api/people/${id}`);
    const person = await response.json();
    console.log(person.name);
    
    res.send(person);
  } catch (error) {
    console.log(error);
    
    res.send(error);
  }  
});

Async/Await

ES7

const getPerson = async () => {
  try {
    const response = await fetch(`http://swapi.co/api/people/${id}`);
    const person = await response.json();
    console.log(person.name);
    
    return person;
  } catch (error) {
    console.log(error);
  }  
});

Async/Await

ES7

Aplicando os recursos do ECMA

 

Aplicar em nosso projeto os conceitos que conhecemos na aula de hoje, como arrow functions e desestruturação.

ECMAScript

By Alan Ferreira dos Santos

Made with Slides.com

ECMAScript

  • 436

More from Alan Ferreira dos Santos