Aula 5

JavaScript Intermediário

EcmaScript (parte 1 - Definição, Versões e Arrow Function)

ECMAScript

O ECMAScript (ES) é a especificação que define as linguagens de script, como o JavaScript. Ele tem evoluído desde sua criação em 1997 para incluir novos recursos e funcionalidades que atendem às demandas dos desenvolvedores modernos. Abaixo, apresento a evolução do ECMAScript, destacando suas principais versões e inovações.

ECMAScript 1 (1997)

ECMAScript 2 (1998)

ECMAScript 3 (1999)

ECMAScript 4 (Cancelado)

A proposta para esta versão era ambiciosa, incluindo tipagem estática e classes complexas, mas acabou sendo abandonada devido à falta de consenso.

ECMAScript 5 (2009)

ECMAScript 6 (2015)

Um marco na evolução do JavaScript, introduzindo recursos modernos.

Veremos a seguir a explicação detalhada dessas mudanças tão significativas no JavaScript

ECMAScript 7 (2016)

  • Operador de Exponenciação (**)

    • Uma forma simplificada de calcular potências.

    console.log(2 ** 3); // 8
  • Método Array.prototype.includes

    • Verifica se um valor está presente em um array.

    
const numeros = [1, 2, 3];
console.log(numeros.includes(2)); // true
console.log(numeros.includes(4)); // false

    ECMAScript 8 (2017)

  • Object.values e Object.entries

    • Object.values: Retorna os valores de um objeto. Object.entries: Retorna pares chave-valor como arrays. 

    
const pessoa = { nome: "Maria", idade: 25 };
console.log(Object.values(pessoa)); // ["Maria", 25]
console.log(Object.entries(pessoa)); // [["nome", "Maria"], ["idade", 25]]
  • String.prototype.padStart e padEnd

    • Adiciona preenchimento no início ou no final de uma string.

    
console.log("5".padStart(3, "0")); // "005"
console.log("5".padEnd(3, "-")); // "5--"
  • async/await (veremos em aulas posteriores)

    • ECMAScript 9 (2018)

    Arrow Function

    Funções em JavaScript podem ser declaradas de diferentes formas, sendo as mais comuns a função normal e a arrow function. Ambas possuem diferenças importantes em sintaxe e comportamento.

    Funções de seta introduzem uma sintaxe curta para escrever funções. Além disso, elas não têm seu próprio this, herdando do contexto ao redor.

    Sintaxe

    A principal diferença inicial é a forma como as funções são escritas: 

              
function soma(a, b) {
  return a + b;
}
console.log(soma(2, 3)); // Saída: 5
          
        
              
const soma = (a, b) => a + b;
console.log(soma(2, 3)); // Saída: 5

    Comportamento do this

    O comportamento do this é uma das principais diferenças: 

              
const obj = {
  valor: 10,
  funcaoNormal: function () {
    return this.valor;
  },
};
console.log(obj.funcaoNormal()); // Saída: 10
          
        
              
const obj = {
  valor: 10,
  arrowFunction: () => {
    return this.valor;
  },
};
console.log(obj.arrowFunction()); // Saída: undefined

    Uso como Construtor

    Apenas funções normais podem ser usadas como construtores:

              
// Função Normal
function Pessoa(nome) {
  this.nome = nome;
}
const pessoa1 = new Pessoa("João");
console.log(pessoa1.nome); // Saída: João

// Arrow Function
const Pessoa = (nome) => {
  this.nome = nome;
};
const pessoa1 = new Pessoa("João"); // Erro: Pessoa não é um construtor

    Explicação sobre o this

    A palavra-chave this representa o objeto ao qual a função atual pertence. Seu valor depende de onde e como a função foi chamada: