ECMAScript 2020: algumas novidades

Com as novas implementações do ECMAScript, temos novos recursos para melhorar o desempenho de nosso código e velocidade de codificação. Além de melhorias na sintaxe, temos novos operadores e novas implantações para facilitar o desenvolvimento com JavaScript. Caso você ainda não conheça algumas dessas implementações, o MundoJS possui um curso com as principais implementações do ECMAScript 2019 e 2020, e pode ser adquirido aqui.

Agora, conheceremos mais algumas implementações do ECMA2020:

Nullish Coalescing:

O Nullish coalescing adiciona a capacidade de verificar valores nulos em vez de valores falsey.

No JavaScript, alguns valores são falsey, como strings vazias, o 0, undefined, null, false, NaN, entre outros. Mas você pode querer verificar se a variável é null, ou seja, undefined ou null, pois é normal uma variável ter uma string vazia ou valor falso. Neste caso, você pode usar o novo operador Nullish Coalescing (??).

Em comparação a:

Como podemos ver, o operador || sempre retornará ‘Algum valor verdadeiro’, enquanto o operador ?? poderá retornar um valor não-nulo.

globalThis:

Se você escreveu código JS que pode ser usado no NodeJs, no navegador e dentro de web-workers, você pode ter dificuldade em obter o objeto global. Isso ocorre porque é utilizado window para os navegadores, global para o Node e self para web-workers. Se houver mais runtimes, também haverá objetos globais diferentes para eles. Neste caso, você teria que ter a sua própria implementação de detecção de runtime e, após isso, usar o objeto global correto. O ES2020 traz o globalThis, que sempre se refere ao objeto global, não importando onde o código será executado:

Module Namespace Exports:

Com módulos JavaScript, é possível utilizar a seguinte sintaxe:

import * as utilidades from './utilidades.mjs'

E agora, também podemos exportar código:

export * as utilidades from './utilidades.mjs'

E isso é o equivalente a:

import * as utilidades from './utilidades.mjs'
export { utilidades }

Well defined for-in order:

A especificação do ECMAScript não especificava em qual order o for-in deveria executar. Agora, isso está oficialmente padronizado no ES2020, pois os navegadores implantaram uma ordem de execução consistente.

import.meta:

O objeto import.meta foi criado pela implementação do ECMAScript com um prototype null.

Considere um módulo chamado modulo.js:

<script type="module" src="modulo.js"></script>

Agora, você pode acessar as meta-informações sobre o módulo utilizando apenas o import.meta:

console.log(import.meta)

Isso retornará um objeto com uma propriedade url que indicará a URL do nosso módulo. Isso é bom para saber o que obteremos em scripts externos ou descobrir a URL de documentos que estão contidos em nossos scripts internos.

Gostou deste artigo? Comente abaixo!

A diferença entre funções regulares e arrow functions:

A Arrow function é um recurso que foi introduzido no ES6. É uma maneira mais concisa de escrever expressões de função e funciona de maneira semelhante às funções regulares, mas com certas diferenças.

let somar = function(n1, n2){
    return n1 + n2;
}

// Utilizando arrow functions =>

let somar = (n1, n2) => { return n1 + n2 };

O arrow function permite ao desenvolvedor alcançar o mesmo resultado simplificando o seu código. Os colchetes se tornam desnecessários se apenas uma expressão seja realizada:

let somar = (n1, n2) => n1 + n2;

Se houver apenas um argumento na função, os parênteses tornam-se desnecessários:

let multiplicaQuadrado = x =:> x * x;

E, caso não existam argumentos:

let dizerOla = _ => console.log("Olá");

As arrow functions têm acesso ao objeto de argumentos da função pai regular mais próxima. Os parâmetros nomeados e restantes são muito utilizados para capturar argumentos passados para arrow functions:

// Em uma função regular
let minhaFuncao = {
    mostrarArgumentos(){
        console.log(argumentos);
    }
};
minhaFuncao.mostrarArgumentos(1, 2, 3, 4);

// Utilizando arrow functions:
let minhaFuncao = {
    mostrarArgumentos: () => {
        console.log(...argumentos);
    }
};
minhaFuncao.mostrarArgumentos(1, 2, 3, 4);

// Argumento is not defined

As funções de seta não tem as suas próprias THIS, sendo o contrário de uma expressão regular. O valor de this dentro de um arrow está sempre ligado ao valor de this na função pai regular que seja mais próxima.

let pessoa = {
    nome: "Fulano Ciclano",
    thisArrow: () => {
        console.log("O nome é: " + this.nome); // Não há binding para this aqui
    },
    thisRegular(){
        console.log("O nome é: " + this.nome); // O bind vai funcionar aqui
    }
};

pessoa.thisArrow();
pessoa.thisRegular();

/* Saída */
//Meu nome é
//Meu nome é Fulano Ciclano

As funções regulares criadas utilizando declarações ou expressões de função são construtivas. Como elas são funções construtoras, elas podem ser invocadas utilizando a palavra-chave new.

As arrow functions  não são construtivas, então, não podem ser chamadas utilizando a palavra-chave new:

let soma = (n1, n2) => console.log(n1 + n2);

new soma(2, 3);

/* Saída */
// soma is not a constructor

As funções de seta também não podem ter parâmetros nomeados duplicados, seja no modo estrito ou não. Isso significa que:

// Isso aqui é válido
function somar(x, x){
    //...Seu código aqui
}

Mas ao utilizar o modo estrito, não é válido:

'use strict'
function somar(x, x) {} 
// SyntaxError: duplicate formal argument x

Com as arrow functions, os argumentos duplicados serão sempre inválidos, independente de estar ou não em modo estrito:

(x, x) => {}
// SyntaxError: duplicate argument names not allowed in this context

Referência: https://medium.com/better-programming/difference-between-regular-functions-and-arrow-functions-f65639aba256

Gostou deste artigo? Comente abaixo e mostre para seus amigos!

ES6: Default Parameters e Rest Parameter

O ECMAScript 6 foi a primeira atualização significativa para a linguagem desde o lançamento do ES5, que foi lançado em 2019. O Babel é uma ferramenta utilizada para pré-processar JavaScript, e nos permite usar algumas novas funcionalidades que ainda são experimentais, ou seja, estão em ambiente de testes. Atualmente, o ECMAScript já está em fase de experimentos da sua versão 2021, mas hoje, falaremos de duas importantes implementações do ES6: Default Parameters e Rest Parameter:

Default Parameters:

Para nos auxiliar na criação de funções mais flexíveis, o ES6 nos trouxe uma nova funcionalidade chamada Default Parameters para ser utilizada nas nossas funções. Por exemplo:
let saudacao = (nome = "Anônimo") => "Olá " + nome;
console.log(saudacao());
console.log(saudacao("Lúcio"));

// Olá Anônimo

// Olá Lúcio
O Default Parameter entra em ação quando você não especifica o argumento, ou seja, é indefinido. No nosso exemplo acima, o parâmetro nome recebe o valor padrão “Anônimo” quando você não fornece um valor como argumento.
Você pode passar mais valores padrão para quantos parâmetros você desejar:
let incrementar = (numero, valor = 8) => numero + valor;

console.log(incrementar(5));

// 13
Como você pôde perceber, o valor 8 não foi sobrescrito, trazendo 13 como resultado.

Rest Parameter

O ES6 também nos trouxe uma possibilidade de passar o Rest parameter como parâmetros de função, tornando possível a criação de funções que recebem um número variável de argumentos e esses argumentos são armazenados em um array que pode ser acessado posteriormente de dentro da função. O rest parameter elimina a necessidade de verificar a “args” e permite aplicar os métodos map(), reduce() e filter() no array de parâmetros.
Por exemplo, faremos uma função de multiplicação que receberá qualquer número nos seus argumentos e realizará uma multiplicação.
let multiplica = (...args) => {
    return args.reduce((a, b) => a * b, 1);
}

console.log(multiplica(10, 2, 10));

// 200

Com isso, vimos dois dos mais importantes recursos do JavaScript moderno que muita gente ainda desconhece. É importante sempre atualizar os seus conhecimentos da linguagem, pois ela está sempre em constante evolução, com novas funcionalidades, novos frameworks e bibliotecas para tornar seu código mais limpo, rápido e eficiente.

Gostou deste artigo? Comente abaixo!

O que há de novo no ES2020?

As propostas do ECMAScript estão crescendo e dando origem a novas implementações. Portanto, você já consegue acessar os novos recursos do ECMAScript resumidos no ES2020. E quais são eles?

Dynamic Import

O Dynamic Import é um dos recursos mais interessantes do ES2020. É um recurso que você pode usar com carregamento lento. Antes, se você quisesse importar um módulo em JavaScript, teria algo como:

import Math from ('./Math.js');
const Math = new Math;
Math.multiply();

Nesse caso, temos uma maneira estática de importar o módulo Math e não poderíamos atrasar a carga se quiséssemos que esse módulo dependesse de uma ação do usuário. Graças ao ES2020, você pode usar o carregamento lento sem um webpack. Você pode utilizar a importação como uma função em qualquer lugar do seu código, usando uma função assíncrona que retorna uma Promise:

import Math from ('./Math.js');
.then ((Math) => {
    const Math = new Math;
    Math.multiply();
});

BigInt

Representa um número maior que 2 ^ 53-1 no JavaScript pode ser um problema, pois este é o maior número que o objeto Number pode representar. O BigInt é um objeto que ajuda a representar números maiores que esse. Ele é interessante, por exemplo, no caso de uma multiplicação que gere um número maior que isso. Como o Int já indica, você deve utilizar números inteiros, e não flutuantes.

const bigNumber = BigInt(90000880880909);

Promise.allSettled

O método Promise.allSettled() retorna uma promise que é resolvida depois de todas as promises retornarem resolved ou rejected, com um vetor de objetos descrevendo cada resultado da promise. O Promise.allSettled() retorna algo como Promise.all(). Mas o Promise.all() aguarda que todas as promises sejam cumpridas ou qualquer promise seja rejeitada.

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject)=>
setTimeout (reject, 100, 'foo'));
const promise = [promise1, promise2];

Promise.allSettled(promises).
 then((results)=> results.foreach((result)=>
 console.log(result.status)));

globalThis:

A propriedade globalThis contém o valor global de this com o contexto do objeto global. Graças a isso, você não precisa diferenciar se o código está sendo executado em um navegador (this) ou no Node (global):

function canMakeHTTPrequest(){
    return typeof globalThis.XMLHttpRequest === 'function';
}

console.log(canMakeHTTPrequest());

Gostou desta notícia? Comente abaixo!

Referência: https://www.ma-no.org/en/programming/javascript/javascript-what-s-new-in-es2020

JavaScript: Campos privados, classes estáticas e mais

Embora as classes estejam disponíveis para o JavaScript desde o ES2015, elas não incluem campos e métodos privados. Esses recursos foram descartados durante o release inicial devido a divergências no comitê do TC39. Três rascunhos de especificações pretendem levar esses recursos às classes JavaScript em um futuro próximo.

Depois que essas especificações forem formalmente aceitas, os campos e métodos privados poderão ser definidos usando o sinal de hash ‘#’. A decisão de usar o sinal de hash em vez do sublinhado mais tradicional ‘_’ foi tomada para evitar alterações nas bibliotecas existentes, que atualmente marcam os campos privados dessa maneira.

Isso pode parecer contra intuitivo, no entanto, apesar das bibliotecas marcarem campos ou métodos como privados usando o sublinhado, os desenvolvedores de sinal ainda os usam. Transformar essas variáveis em variáveis verdadeiramente privadas pode interromper vários aplicativos e, portanto, retardar a adaptação das novas especificações.

O problema pode ser demonstrado por uma anedota do React, que teve que recorrer a alguns nomes de variáveis bastante contundentes para impedir que os desenvolvedores os usassem (apesar de serem marcados como privados), como ‘_SECRET_DOM_DO_NOT_USE_ORYOU_WILL_BE_FIRED’. (Lê-se _DOM_SECRETO_NAO_USE_OU_VOCE_SERA_DEMITIDO ).

Cada uma das 3 propostas do TC39 aborda um aspecto diferente de campos e métodos privados nas classes. No entanto, deve ser seguro tratá-los como uma única proposta, pois provavelmente serão adicionados ao JavaScript ao mesmo tempo. As propostas são:

Declaração de campos da classe

Atualmente não é possível definir campos (variáveis) direto na classe. Ao invés disso, os desenvolvedores precisam fazê-lo diretamente no construtor da classe.

class Counter { 
  constructor() { 
    this.xValue = 0; 
  } 
}

A proposta pretende adicionar esta habilidade para escrever os campos diretamente na definição da classe.

class Counter { 
  xValue = 0;
  #yValue = 0;
  constructor() { }
}

Criação de métodos privados e de getter e setters privados para as classes.

Esta proposta pretende permitir a adição de métodos privados e o uso de getter e setter privados.

class Counter { 
  get #x() { return #xValue; } 
  set #x(value) { }

  #clicked() { } 
}

Funcionalidades de classes estáticas (static).

Esta proposta define como será implementado a funcionalidade de campos e métodos estáticos, podendo ser públicos ou privados.

class CustomDate { 
  static public() = {} 
  static #private() = {} 
}

Para mais informações veja o post original no link abaixo:

Fonte: https://www.infoq.com/news/2019/10/javascript-private-class-fields/

Conheça o BigInt, a nova implementação do ECMAScript 2020

BigInt é um objeto nativo do JavaScript que fornece um modelo de representação de números inteiros maiores que , que é o maior número que o JavaScript consegue representar, com exatidão, utilizando o tipo primitivo Number.

Sintaxe:

A sintaxe do BigInt é:

BigInt(valor);

Onde:

  • valor: é o valor numérico do objeto que irá ser criado. Este pode ser uma string ou um número inteiro.

É importante salientar que o BigInt() não é usado com o operador new.

O BigInt é criado com a simples acrescentação de um “n” ao final de um inteiro literal – 10n – ou chamando a função BigInt();

const theBiggestInt = 9007199254740991n;

const alsoHuge = BigInt(9007199254740991);
// 9007199254740991n

const hugeString = BigInt("9007199254740991");
// 9007199254740991n

const hugeHex = BigInt("0x1fffffffffffff");
// 9007199254740991n

const hugeBin = BigInt("0b11111111111111111111111111111111111111111111111111111");
// 9007199254740991n

O BigInt difere-se do Number em alguns assuntos importantes. Por exemplo:

  • Ele não pode ser usado com métodos no objeto Math;
  • Ele não pode ser misturado em operações ou qualquer instância de Number. Eles devem ser manipulados com o mesmo tipo.
  • A precisão de BigInt pode ser perdida com a conversão de valores para Number.

Se você quiser realizar alguns testes, você pode:

  • Testando com typeof:
typeof 1n === 'bigint'; // true

typeof BigInt('1') === 'bigint'; // true
  • Se estiver envolvido em um Object, o BigInt será considerado como um tipo normal de “object”:
typeof Object(1n) === 'object'; // true

Você também pode realizar operações com BigInt ou com BigInt envolvido em objeto:

const antigoMaximoInt = BigInt(Number.MAX_SAFE_INTEGER);
// 9007199254740991

const maximoMaisUm = antigoMaximoInt + 1n;
// 9007199254740992n

const oFuturo= antigoMaximoInt + 2n;
// 9007199254740993n, isso funciona agora!

const multiplicando = antigoMaximoInt * 2n;
// 18014398509481982n

const subtraindo = multiplicando – 10n;
// 18014398509481972n

const modulo = multiplicando % 10n;
// 2n

const bigN = 2n ** 54n;
// 18014398509481984n

bigN * -1n
// –18014398509481984n

Observação:

O operador / também funciona. No entanto, se os números forem BigIntS e não BigDecimalS, a operação será arredondada para zero, o que não nos trará nenhum valor fracional.

const divisao = 4n / 2n;
// 2n

const arredondado = 5n / 2n;
// 2n, e não 2.5n

É importante salientar que o BigInt não é estritamente igual a um Number, mas eles podem ser comparados normalmente.

0n === 0;
// false

0n == 0;
// true

1n < 2;
// true

2n > 1;
// true

2 > 2;
// false

2n > 2;
// false

2n >= 2;
// true

O BigInt se comporta como um número quando é convertido em um booleano, e também pode ser usado com operadores lógicos , também dentro de uma estrutura condicional.

if (0n) {
    console.log("Olá, você está dentro do IF");
} else {
    console.log("Olá, você está dentro do ELSE");
}

0n || 12n;
// 12n

0n && 12n;
// 0n

Boolean(0n);
//  false

!0n;
// true

Propriedades:

BigInt.prototype;

Permite a adição de propriedades a um objeto BigInt. Todas as instâncias BigInt são herdadas do BigInt.prototype. O objeto de protótipo do construtor BigInt pode ser modificado para afetar todas as instâncias do BigInt.

Gostou deste artigo? Deixe seu comentário abaixo!

Novidades no ECMAScript 2019 (ES2019)/ES10

A versão 72 do Chrome lançou alguns novos recursos interessantes do ES10:

.Flat():

O método flat() cria um novo vetor recursivamente com todos os elementos do sub-vetor concatenados nele até a profundidade especificada.

let vetor = [1, 2, 3, [4, 5, 6, [7, 8, 9, [10, 11, 12]]]];

vetor.flat();
// (7) [1, 2, 3, 4, 5, 6, Array(4)]

vetor.flat().flat();
// (10) [1, 2, 3, 4, 5, 6, 7, 8, 9, Array(3)]

vetor.flat().flat().flat();
//(12) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

vetor.flat(Infinity);
//(12) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

.flatMap():

O método flatMap() primeiramente mapeia cada elemento do vetor usando uma função e mapeamente para, em seguida, nivelar o resultado em um novo array. O flatMap é bastante útil, pois mescla um mapa seguido por um flat de profundidade 1 em um método mais eficiente.

let vetor = [1, 2, 3, 4, 5];

vetor.map(x => [x, x*2]);
// (5) [Array(2), Array(2), Array(2), Array(2), Array(2)]
// 0: (2) [1, 2]
// 1: (2) [2, 4]
// 2: (2) [3, 6]
// 3: (2) [4, 8]
// 4: (2) [5, 10]

vetor.flatMap(v=>[v, v*2]);
// (10) [1, 2, 2, 4, 3, 6, 4, 8, 5, 10]

Object.fromEntries():

O método Object.fromEntries() transforma uma lista de pares de valores-chave em um objeto.

Exemplo 1:

let obj = {
    chave1:'valor1',
    chave2:'valor2',
    chave3:'valor3'
}    

let entries = Object.entries(obj);

console.log(entries);
// (3) [Array(2), Array(2), Array(2)]0: (2) ["chave1", "valor1"]1: (2) ["chave2", "valor2"]2: (2) ["chave3", "valor3"]

let fromEntries = Object.fromEntries(entries);

console.log(fromEntries);
// {chave1: "valor1", chave2: "valor2", chave3: "valor3"}

Exemplo 2:

let entries  = new Map([
    ['nome', 'ben'],
    ['idade', 25]
]);    

Object.fromEntries(entries);
// {nome: "ben", idade: 25}

String.trimStart() & String.trimEnd():

O método trimStart() remove espaços em branco do início de uma string. O método trimEnd() remove espaços em branco do final de uma string.

let olaMundo = "     Olá Mundo!     ";

console.log(JSON.stringify(olaMundo.trimEnd()));
// "     Olá Mundo!"

console.log(JSON.stringify(olaMundo.trimStart()));
// "Olá Mundo!     "

Optional Catch Binding:

Permite que os desenvolvedores usem try / catch sem criar uma ligação não utilizada. Você pode fazer uso do catch block sem um parâmetro.

try {
    throw new Error("sem erro");
} catch {
    console.log("nenhum parâmetro no catch");
}
// nenhum parâmetro no catch

Antes era obrigatório usar parâmetro no catch block:

try {
    throw new Error ("Algum erro aleatório");
} catch(e) {
    console.log(e);
}    
// Error: Algum erro aleatório

Continue lendo “Novidades no ECMAScript 2019 (ES2019)/ES10”

NaN e typeof.

Uma análise da propriedade NaN e por que ela é considerada um tipo de número.

typeof NaN
//'number'

Primeiramente, NaN é uma propriedado do objeto global, e não uma palavra-chave (diferente de true, false, null, entre outros). O valor de NaN é o mesmo que o valor de Number.NaN:

NaN; // NaN
Number.NaN; // NaN

Existem várias formas em que o NaN pode acontecer:

  • Divisão de zero por zero;
  • Dividindo um infinito por um infinito;
  • Multiplicação de um infinito por um zero;
  • Qualquer operação na qual NaN é um operando;
  • Convertendo uma String não numérica ou indefinida em um número.

Por que o tipo NaN retorna “number”?

typeof NaN; // "number"

O padrão ECMAScript indica que os números devem ser dados de ponto flutuante IEEE-754. Isso inclui Infinity, -Infinity e também, NaN. Por definição, NaN é o valor de retorno de operações que possuem um resultado numérico indefinido. Daí porque, em JavaScript, além de fazer parte do objeto global, também faz parte do objeto Number: Number.NaN.

Ainda é um tipo de dados numérico, mas é indefinido como um número real. O NaN também representa qualquer número fora do domínio de definição do ECMAScript.

A aritmética computacional é limitada:

Considere a seguinte operação:

(3.2317006071311 * 10e616) / (3.2317006071311 * 10e616); // NaN
Como a Wikipedia declara:

“A aritmética computacional não pode operar diretamente em números reais, mas apenas em um subconjunto finito de números racionais, limitado pelo número de bits usados para armazená-los.”

Na aritmética ordinária, 3,2317006071311 * 10616 é um número real finito, mas, pelos padrões ECMAScript, é simplesmente muito grande (ou seja, consideravelmente maior que Number.MAX_VALUE) e, portanto, é representado como Infinity.

A tentativa de dividir Infinity por Infinity produzirá NaN. Na aritmética comum, ambos são operandos finitos, a operação claramente é igual a 1. Neste caso, o NaN está no lugar de um numero real que não pôde ser computado devido ao tamanho dos operandos. Pareceria contra-intuitivo se os tipos NaN retornassem algo diferente de “número”. Afinal, no exemplo dado, NaN simplesmente representa um valor que não pôde ser determinado pela aritmética computacional.

NaN é desordenado:

De acordo com o padrão de ponto flutuante IEEE 754, a comparação com NaN sempre retorna um resultado não ordenado. Ou seja, NaN não é igual a, maior que ou menor que qualquer coisa, incluindo ele mesmo:

NaN < 1;    // false
NaN > 1;    // false
NaN == NaN; // false
// Mas ainda podemos verificar por NaN:
isNaN(NaN); // true

É por isso que você não pode determinar se um dado valor é NaN comparando-o com NaN e, em vez disso, deve usar a função isNaN().

Não surpreende, portanto, que a implementação nativa da função isNaN() possa ser simplesmente substituída por:

// Implementacao Nativa
function isNaN(x) {
  x = Number(x);
  // se x é NaN, NaN! = NaN é verdadeiro, senão é falso
  return x != x;
}

A implementação nativa de isNaN() retorna true mesmo se o valor for indefinido ou se o valor não puder ser coagido em um tipo de dados de número primitivo. Existem algumas bibliotecas que apresentam as suas próprias implementações. Por exemplo, a do Underscore é a seguinte:

_.isNaN = function(obj) {
  // `NaN` é o único valor para o qual` === `não é reflexivo.
  return obj !== obj;
};

Mas, seu comportamento não é o mesmo que a função isNaN() nativa:

let x;            // undefined
isNaN(x);         // true
isNaN(undefined); // true
isNaN("a");       // true
Comparado ao Underscore:
let x;              // undefined
_.isNaN(x);         // false
_.isNaN(undefined); // false
_.isNaN("a");       // false

Booleanos não são NaNs:

Considerando o código a seguir:

isNaN(true);  // false
isNaN(false); // false

Isso ocorre porque os valores booleanos são considerados e implementados como valores numéricos com um único dígito binário (ou seja, bit), portanto, eles são coagidos em suas respectivas representações de bits:

Number(true);  // 1
Number(false); // 0

Gostou deste artigo? Comente abaixo!

O que o programador JavaScript deve saber

JavaScript é uma das principais linguagens de programação mais requisitadas no mercado de trabalho atual. No entanto, os empregadores geralmente procuram uma combinação de habilidades. Descubra o que mais você deve adicionar ao seu currículo para conseguir o seu próximo trabalho JavaScript.

A pesquisa vem do CV Compiler, uma empresa que, como o próprio nome sugere, ajuda a criar um currículo convincente para desenvolvedores e outros no setor de software. Para fornecer esta orientação, mantém-se continuamente atualizado com as demandas dos empregadores. Para esta pesquisa dos desenvolvedores de habilidades em JavaScript, a equipe do Compilador de CV precisou de 300 especificações de trabalho para desenvolvedores de JavaScript de AngelList, StackOverflow, LinkedIn e páginas de carreira de empresas de tecnologia em rápido crescimento em todo o mundo. Em seguida, usando sua própria ferramenta de análise de texto, eles identificaram os termos que foram mencionados com mais frequência e criaram este gráfico:

linguagens de programação, metodologias de programação e assim por diante. Na verdade, isso pode não ter sido a primeira coisa que você percebeu – você pode ter sido atingido pelo domínio do React. Mesmo se você permitir que qualquer abertura de trabalho para o React exija JavaScript, a demanda por essa estrutura parece ser esmagadora. Como existem apenas 300 listagens de empregos e o principal concorrente da React, Angular também tem uma alta proporção de menções, algumas aberturas precisam exigir múltiplas estruturas ou uma ou mais alternativas. Mesmo assim, o recorde de 267 da React é excelente, o Angular tem 195 pontos de crédito, enquanto o Vue apenas recebe 44 menções.

Comentando sobre isso no blog Game of Frameworks, Andrew Stetsenko escreve:

“Como você deve ter notado, o Vue.js não era tão alto em nossa classificação de habilidades. Eu acho que pode haver várias razões para isso. Primeiro de tudo, nem toda empresa está pronta para transferir seus projetos para o Vue.js e descartar soluções de front-end mais estáveis ​​e comuns. Em segundo lugar, os empregadores podem querer que os desenvolvedores aprendam o Vue.js enquanto trabalham, por isso eles não mencionam nas especificações iniciais do trabalho.”

Continue lendo “O que o programador JavaScript deve saber”