Javascript

Por Carlos Carvalho e Murilo Guerreiro Arouca

O que é?

ECMAScript ™ é a linguagem de script usada para criar páginas da Web com comportamento dinâmico. O ECMAScript ™, mais comumente conhecido pelo nome JavaScript ™, é um componente essencial de qualquer navegador da Web e o padrão ECMAScript ™ é um dos principais padrões que permitem a existência de aplicativos da Web interoperáveis ​​na World Wide Web.

Resumindo, ela é uma linguagem de programação que não foi projetada para rodar em servidores como linguagens mais tradicionais, mas no navegador do usuário. Ignorada por alguns e subestimada por outros, houve um tempo em que ela foi considerada uma "linguagem de brinquedo", atualmente não há praticamente um site sequer que não a use e os incríveis avanços da World Wide Web (aplicações ricas, atualização dinâmica de conteúdo, etc) seriam impossíveis sem ela.

História

JavaScript foi criada em 1995 por Brendan Eich enquanto trabalhava na Netscape Communications Corporation. Originalmente projetada para rodar no Netscape Navigator, ela tinha o propósito de oferecer aos desenvolvedores formas de tornar determinados processos de páginas web mais dinâmicos, tornando seu uso mais agradável. Um ano depois de seu lançamento, a Microsoft portou a linguagem para seu navegador, o que ajudou a consolidar a linguagem e torná-la uma das tecnologias mais importantes e utilizadas na internet.

Embora ela tenha esse nome, não se deve confundir JavaScript com Java, linguagem de programação desenvolvida pela Sun Microsystems: antes, a linguagem criada pela Netscape recebera nomes como LiveScript e Mocha, mas, para aproveitar o grande sucesso da linguagem da Sun no mercado, os executivos da Netscape resolveram mudar o nome de sua linguagem para o atual. Entretanto, Java e Java Script são completamente diferentes e possuem propósitos diversos.

Evolução e Novos Recursos

O desenvolvimento de novos recursos para a linguagem JavaScript realmente melhorou nos últimos anos, graças, em parte, a frameworks JavaScript que pressionam os limites e provam o quão importante uma funcionalidade pode ser. Entretanto, ao mesmo tempo, há uma enorme comunidade por trás dessa evolução, que fazem nosso desenvolvimento ficar mais fluido e agradável, confira alguns dos novos recursos disponíveis na versão do ES7 e ES8.

ARRAY.PROTOTYPE.INCLUDES

Array.prototype.includes é semelhante ao indexOf, que determina se um array contém um determinado elemento, mas, em vez disso, retorna true ou false.

['foo', 'bar', 'baz'].includes('foo'); // true, não 0 como retornaria o ‘indexOf`
[’foo', 'bar', 'baz'].includes('foobar'); // false
Além de ser mais eloqüente e realmente dar aos desenvolvedores o valor booleano em vez da posição de um dado, includes também funciona com NaN (não é um número). Finalmente, includes tem um segundo parâmetro opcional fromIndex. Isso é bom para otimização, pois permite procurar um dado a partir de uma determinada posição.

["foo", "bar", "baz"].includes("foo"); // === true
["foo", "bar", "baz"].includes("foo", 1); // === false

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

[1, NaN].includes(NaN); // === true

[1, -0, 2].includes(+0); // === true
[1, +0, 2].includes(-0); // === true

Em resumo, includes traz simplicidade para qualquer desenvolvedor que tenha que verificar se um valor está ou não em um array…

EXPONENTIATION OPERATOR

Se você esqueceu o que é o expoente, é quando você multiplica o mesmo número (base) sobre si mesmo muitas vezes (expoente). Por exemplo, 7 potência de 3 é 7 * 7 * 7.

Atualmente, no ES6/ES2015, você pode usar o método Math.pow ou criar uma função recursiva para resolver esse problema:

// Math.pow - 2 potência de 8
console.log(Math.pow(2, 8)) // 256

function power(base, exponent) {
if (exponent == 0) return 1;
return base * power(base, exponent - 1);
}

// Usando função recursiva - 2 potência de 8
console.log(power(2, 8)) // 256
Agora com o Exponentiation Operator do ES7/ES2016, podemos usar uma sintaxe mais curta:

// Exponentiation Operator - 2 potência de 8
console.log(2 ** 8); // 256

let a = 2
a **= 3
console.log(a); // 8
Este operador é principalmente usado por desenvolvedores que fazem softwares envolvendo cálculos matemáticos e é útil no caso de 3D, Realidade Virtual, SVG ou visualização de dados.

ES8

OBJECT.VALUES / OBJECT.ENTRIES

Extrair valores e pares de chave-valor de objetos se tornaram ainda mais fáceis! Com as novas funcionalidades Object.values e Object.entries que estão na especificação ECMAScript2017 e similarmente ao Object.keys, retornam arrays.

Cada item do array retornado por Object.keys, Object.values e Object.entries correspondentemente, contém uma chave, um valor ou a entrada para uma propriedade/atributo de um objeto.

Antes do ES8/ES2017, desenvolvedores JS que precisavam iterar sobre às próprias propriedades de um objeto tinham que usar Object.keys, iterar sobre o array retornado por ele e usar obj[key] para acessar cada valor:

let obj = { a: 1, b: 2, c: 3 };
Object.keys(obj).forEach((key, index) => {
console.log(key, ": ", obj[key]);
});
/* == RESULTS
*
* a : 1
* b : 2
* c : 3
*
*/
Object.values retorna um array de valores de propriedade enumeráveis do objetos. E podemos iterar sobre ele usando o bom e velho Array.prototype.forEach combinado com arrow functions do ES6 de retorno implícito:

// Object literal
let obj = { a: 1, b: 2, c: 3 };
Object.values(obj).forEach(val => console.log(val)); // 1, 2, 3

// String
Object.values("BrazilJS"); // [ 'B', 'r', 'a', 'z', 'i', 'l', 'J', 'S' ]
Object.entries, por outro lado, irá retornar um array de objetos de chaves-valores de propriedade enumeráveis do objeto (como um array). Cada item do array resultante também será um array.

// Object literal
let obj = { a: 1, b: 2, c: 3 };
JSON.stringify(Object.entries(obj)); // '[["a",1],["b",2],["c",3]]'

// String
Object.entries("JS"); // [ [ '0', 'J' ], [ '1', 'S' ] ]

STRING PADDING

String.prototype.padStart e String.prototype.padEnd além de tornar o trabalho com strings em JavaScript uma experiência mais agradável, ajudam a evitar depender de bibliotecas extras.

Ambos os métodos nos permitem trocar uma determinada string com qualquer texto de nossa escolha para garantir que uma string corresponda a um determinado comprimento.

O método padStart() retorna uma string de um determinado comprimento (targetLength), inserindo almofadas no início. As almofadas são uma string determinada, repetidas, se necessário, até atingir o comprimento desejado. O preenchimento é aplicado desde o início (esquerda) da string atual.

console.log("BrazilJS".padStart(14)); // " BrazilJS"
console.log("BrazilJS".padStart(14, "wow - ")); // "wow - BrazilJS"
console.log("BrazilJS".padStart(14,"654321")); // "654321BrazilJS"
console.log("BrazilJS".padStart(14, "0")); // "000000BrazilJS"
console.log("BrazilJS".padStart(1)); // "BrazilJS"

// uso sem uma string inicial
console.log(''.padStart(78, 'Eu vou aprender ES7 + ES8!')); // 'Eu vou aprender ES7 + ES8!Eu vou aprender ES7 + ES8!Eu vou aprender ES7 + ES8!'
O método padEnd() retorna uma string de um determinado comprimento (targetLength), inserindo almofadas no final. As almofadas são uma string determinada, repetidas, se necessário, até atingir o comprimento desejado. O preenchimento é aplicado no final (direita) da string atual.

console.log("BrazilJS".padEnd(14)); // "BrazilJS "
console.log("BrazilJS".padEnd(14, " - wow")); // "BrazilJS - wow"
console.log("BrazilJS".padEnd(14,"654321")); // "BrazilJS654321"
console.log("BrazilJS".padEnd(14, "0")); // "BrazilJS000000"
console.log("BrazilJS".padEnd(1)); // "BrazilJS"

ECMAScript 2019 Language Specification

Este Padrão Ecma define a Linguagem ECMAScript 2019. É a décima edição da especificação da linguagem ECMAScript. Desde a publicação da primeira edição, em 1997, a ECMAScript cresceu e se tornou uma das linguagens de programação de uso geral mais utilizadas no mundo. É mais conhecida como a linguagem incorporada nos navegadores da Web, mas também foi amplamente adotada para aplicativos incorporados e de servidor.

O desenvolvimento da especificação da linguagem ECMAScript começou em novembro de 1996. A primeira edição deste Padrão Ecma foi adotada pela Assembléia Geral Ecma de junho de 1997.

Esse Padrão Ecma foi submetido ao ISO / IEC JTC 1 para adoção sob o procedimento fast-track e aprovado como padrão internacional ISO / IEC 16262, em abril de 1998. A Assembléia Geral Ecma de junho de 1998 aprovou a segunda edição do ECMA-262 para mantenha-o totalmente alinhado com a ISO / IEC 16262. As mudanças entre a primeira e a segunda edição são de natureza editorial.

Propostas do TC39 para o JavaScript

É o TC39 que controla como os recursos do ECMAScript são projetados, começando com o ECMAScript 2016 (ES7).

TC39 (Comitê Técnico 39):

O TC39 é o comitê que desenvolve o JavaScript. Seus membros são empresas (entre outros, todos os principais fornecedores de navegadores). O TC39 se reúne regularmente , suas reuniões são assistidas por delegados que os membros enviam e por especialistas convidados. As atas das reuniões estão disponíveis on-line e dão uma boa ideia de como o TC39 funciona.

É interessante notar que o TC39 opera por consenso: as decisões exigem que uma grande maioria concorde e ninguém discorde com força suficiente para vetar. Para muitos membros, os acordos levam a obrigações reais (eles terão que implementar recursos etc.).

O processo do TC39

Cada proposta para um recurso ECMAScript passa pelos seguintes estágios de maturidade , começando com o estágio 0. A progressão de um estágio para o próximo deve ser aprovada pelo TC39.

Estágio 0: palhaço

O que é isso? Uma maneira livre de enviar ideias para o ECMAScript em evolução. As inscrições devem vir de um membro do TC39 ou de um não-membro que tenha se registrado como colaborador do TC39 .

O que é necessário? O documento deve ser revisado em uma reunião do TC39 ( fonte ) e, em seguida, é adicionado à página com propostas do estágio 0 .

Fase 1: proposta

O que é isso? Uma proposta formal para o recurso.

O que é necessário? Um campeão chamado deve ser identificado quem é responsável pela proposta. O campeão ou um co-campeão deve ser um membro do TC39 ( fonte ). O problema resolvido pela proposta deve ser descrito em prosa. A solução deve ser descrita através de exemplos, uma API e uma discussão sobre semântica e algoritmos. Por último, os possíveis obstáculos para a proposta devem ser identificados, como interações com outros recursos e desafios de implementação. Em termos de implementação, polyfills e demos são necessários.

Qual é o próximo? Ao aceitar uma proposta para o estágio 1, o TC39 declara-se disposto a examinar, discutir e contribuir com a proposta. No futuro, grandes mudanças na proposta são esperadas.

Fase 2: rascunho

O que é isso? Uma primeira versão do que estará na especificação. Neste ponto, uma inclusão eventual do recurso no padrão é provável.

O que é necessário? A proposta deve agora, adicionalmente, ter uma descrição formal da sintaxe e semântica do recurso (usando a linguagem formal da especificação do ECMAScript). A descrição deve ser a mais completa possível, mas pode conter todos e espaços reservados. Duas implementações experimentais do recurso são necessárias, mas uma delas pode estar em um transpilador como Babel.

Qual é o próximo? Apenas mudanças incrementais são esperadas a partir de agora.

Fase 3: candidato

O que é isso? A proposta está praticamente finalizada e agora precisa de feedback de implementações e usuários para progredir ainda mais.

O que é necessário? O texto da especificação deve estar completo. Os revisores designados (nomeados pelo TC39, não pelo campeão) e o editor de especificações do ECMAScript devem assinar o texto da especificação. Deve haver pelo menos duas implementações compatíveis com especificações (que não precisam ser habilitadas por padrão).

Qual é o próximo? Doravante, as mudanças só devem ser feitas em resposta a questões críticas levantadas pelas implementações e seu uso.

Estágio 4: terminado

O que é isso? A proposta está pronta para ser incluída no padrão.

O que é necessário? As seguintes coisas são necessárias antes que uma proposta possa chegar a esse estágio:

Teste 262 testes de aceitação (aproximadamente, testes de unidade para o recurso de linguagem, escritos em JavaScript).
Duas implementações de expedição em conformidade com especificações que passam nos testes.
Experiência prática significativa com as implementações.
O editor de especificações ECMAScript deve assinar o texto da especificação.
Qual é o próximo? A proposta será incluída na especificação do ECMAScript assim que possível. Quando a especificação passa por sua ratificação anual como padrão, a proposta é ratificada como parte dela.

Propostas

Os seguintes recursos estão atualmente no estágio 3:

- Function.prototype.toStringrevisão (Michael Ficarra)
- global (Jordan Harband)
- import() (Domenic Denicola)
- Recursos Legacy RegExp em JavaScript (Claude Pache) [ proposta ]
- BigInt - inteiros de precisão arbitrária (Daniel Ehrenberg)
- Ligação de captura opcional (Michael Ficarra)
- import.meta (Domenic Denicola)
- Métodos de instância privada e acessadores (Daniel Ehrenberg) [ proposta ]
- Array.prototype.flatMap/flatten (Brian Terlson, Michael Ficarra)
- Separadores numéricos (Sam Goto, Rick Waldron)
- Declarações de campo de classe para JavaScript (Daniel Ehrenberg, Jeff Morrison)
- Superconjunto JSON (Richard Gibson) [ proposta ]
- String.prototype.{trimStart,trimEnd}(Sebastian Markbåge) [ proposta ]
- String.prototype.matchAll (Jordan Harband)

Decorators

O Decorator Pattern é um mecanismo que permite estender o comportamento de um objeto em tempo de execução, adicionando novas funcionalidades sem ter que criar uma nova classe ou, no caso do JavaScript, função construtora.

Function Decorator

Uma outra aplicação de Decorators no JavaScript é específica de funções e tem o nome de Function Decorator. Esse pattern diz respeito a estender o comportamento de uma função, utilizando o escopo léxico de variáveis (escopo de variáveis por função, não por bloco) e funções como objetos de primeira classe (funções são apenas objetos, como strings e arrays) para atingir o seu objetivo. Imagine que você queira estender o comportamento de uma função existente, garantindo que ela seja executada uma única vez; qualquer chamada subsequente deve ser ignorada.

Concluindo, o Decorator Pattern permite criar objetos extremamente configuráveis sem ter que usar herança de classes. No entanto, ele pode não ser a melhor solução para a maioria dos casos. Em muitas situações, usar o Adapter pattern, pode ser uma saída mais simples de entender e implementar, facilitando a manutenção do código.

JavaScript X Compilador

Você pode ouvir os termos interpretado e compilado no contexto da programação. JavaScript é uma linguagem interpretada — o código é executado de cima para baixo e o resultado da execução do código é imediatamente retornado. Você não tem que transformar o código em algo diferente antes do navegador executá-lo.

Linguagens compiladas, por outro lado, são transformadas (compiladas) em algo diferente antes que sejam executadas pelo computador. Por exemplo, C/C++ são compiladas em linguagem Assembly, e depois são executadas pelo computador.

Os dois tipos tem vantagens diferentes.

Referências utilizadas

https://www.ecma-international.org/memento/tc39-m.htm
https://canaltech.com.br/internet/O-que-e-e-como-funciona-a-linguagem-JavaScript/
https://nandovieira.com.br/design-patterns-no-javascript-decorator
https://blog.betrybe.com/javascript
http://exploringjs.com/es2016-es2017/ch_tc39-process.html
http://2ality.com/2018/02/ecmascript-2019.html
https://tc39.github.io/ecma262/#sec-intro
https://braziljs.org/blog/alguns-novos-recursos-es7-es8/
https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/O_que_e_JavaScript