Futuro do JavaScript: novas propostas e recursos

Rocketseat

6 min de leitura

Navegação Rápida:

1. Pattern Matching

2. Pipeline Operator

3. Async Context

4. Novos métodos para Sets e arrays

5. Temporal API 🕰️⌛

Conclusão

Você já se perguntou como será o futuro do JavaScript? Atualmente, a linguagem está entre as mais utilizadas no mundo, com milhões de desenvolvedores e empresas adotando suas evoluções constantemente. Estamos diante de uma revolução que promete transformar a forma como programamos! Prepare-se para conhecer as novidades mais impactantes dessa atualização e entender como elas podem tornar seu código mais eficiente, legível e poderoso. Vamos nessa?

⚠️

Muitos desses recursos ainda são propostas ou estão em estágios experimentais, o que significa que seu suporte nativo pode ser limitado e, para uso em produção, podem ser necessários polyfills ou transpiladores.

1. Pattern Matching

O Pattern Matching traz uma abordagem revolucionária para manipular estruturas de dados complexas de forma mais clara e intuitiva. Com ele, podemos comparar padrões em objetos e arrays sem precisar escrever múltiplas verificações if-else. Imagine-o como um switch aprimorado que torna seu código mais limpo e expressivo.

Antes da proposta do Pattern Matching:


function checkStudentStatus(student) {
    if (student.course === "Discover" && student.status === "active") {
        return "O aluno está no Discover 🚀";
    } else if (student.course === "Formação Fullstack" && student.status === "inactive") {
        return "O aluno Formação Fullstack está inativo ⏳";
    } else {
        return "Status desconhecido 🤷";
    }
}

Com Pattern Matching:


function matchStudent(student) {
    const patterns = [
        { course: "Discover", status: "active", result: "O aluno está no Discover 🚀" },
        { course: "Formação Fullstack", status: "inactive", result: "O aluno Formação Fullstack está inativo ⏳" }
    ];

    for (let pattern of patterns) {
        if (student.course === pattern.course && student.status === pattern.status) {
            return pattern.result;
        }
    }
    return "Status desconhecido 🤷";
}

Com esse novo recurso, podemos simplificar o código garantindo uma leitura mais clara.

⚠️

Pattern Matching: Atualmente está na fase de proposta (conforme a proposta do TC39).

2. Pipeline Operator

O Pipeline Operator (|>) pode trazer mais clareza e fluidez ao código ao encadear funções de maneira elegante. Se você já participou de algum dos cursos da Rocketseat, sabe o quanto incentivamos boas práticas para manter o código mais limpo e modularizado. Com essa nova funcionalidade, transformar dados e encadear funções se torna mais simples do que nunca! 🚀

Antes do Pipeline Operator:


const result = process(clean(parse(inputData)));

Com Pipeline Operator:


const result = inputData
  |> parse
  |> clean
  |> process;

Agora, vamos imaginar um cenário prático dentro da Rocketseat. Suponha que temos um sistema que processa inscrições para eventos como a NLW. Podemos estruturar melhor o fluxo de dados utilizando o Pipeline Operator:


const processEnrollment = (enrollment) => enrollment
  |> validate
  |> sanitize
  |> storeInDatabase
  |> sendConfirmationEmail;

const newEnrollment = { name: "João", email: "joao@email.com" };
processEnrollment(newEnrollment);

Dessa forma, podemos estruturar melhor nossa lógica de maneira sequencial e legível. Agora, seu código assíncrono também pode ser encadeado de forma limpa e intuitiva!

⚠️

É uma funcionalidade em estágio experimental e pode ser utilizada via Babel.

Como usar o Pipeline Operator hoje?

Atualmente, o Pipeline Operator ainda está na Stage 2 do processo de propostas do ECMAScript, ou seja, ainda não faz parte oficial do JavaScript. No entanto, já podemos utilizá-lo com Babel!

Passo 1: Instalar o Babel Plugin:


npm install --save-dev @babel/plugin-proposal-pipeline-operator

Passo 2: Configurar o Babel: Adicione o seguinte trecho no seu arquivo de configuração do Babel (.babelrc ou babel.config.js):


{
  "plugins": ["@babel/plugin-proposal-pipeline-operator"]
}

Agora, você pode escrever código utilizando o Pipeline Operator sem preocupações! 🎉

O que acontece por de baixo dos panos?

O Babel transforma o seguinte código:


const result = inputData
  |> parse
  |> clean
  |> process;

Em algo equivalente a:


const result = process(clean(parse(inputData)));

Ou seja, ele elimina as camadas de parênteses e torna o código muito mais legível!

Por que isso é incrível? 🚀

📌 Elimina parênteses aninhados, deixando o código mais fluido;

📌 Melhora a legibilidade e facilita a depuração;

📌 Torna a programação funcional mais acessível e intuitiva!

3. Async Context

Diga adeus às dores de cabeça com chamadas assíncronas! O Async Context chegou para acabar com os pesadelos de perder o contexto de execução em operações assíncronas. Quem nunca tentou rastrear uma requisição e acabou perdido entre awaits e callbacks? 😅 Pois bem, essa novidade promete simplificar o gerenciamento do estado assíncrono e facilitar o desenvolvimento de aplicações modernas.

Imagine um cenário na Rocketseat, onde temos um sistema de interações ao vivo, como no Café com Instrutores. Cada requisição precisa ser rastreada para garantir que os alunos estejam conectados corretamente e recebendo o suporte adequado. Com o Async Context, conseguimos armazenar e recuperar dados em diferentes ciclos assíncronos sem perder o controle.

Antes:


async function fetchEventData() {
    console.log("Buscando informações do evento...");
    const response = await apiCall();
    console.log("Dados recebidos com sucesso!");
    return response;
}

Com Async Context:


const asyncHooks = require('async_hooks');
const asyncLocalStorage = new Map();

// Criando uma função para armazenar e recuperar o contexto
function getCurrentContext() {
    const asyncId = asyncHooks.executionAsyncId();
    return asyncLocalStorage.get(asyncId) || {};
}

// Exemplo: Salvando contexto do Café com Instrutores
asyncLocalStorage.set(asyncHooks.executionAsyncId(), { mentor: 'Diego Fernandes', event: 'Café com Instrutores' });

// Depois, dentro de uma função assíncrona
async function fetchMentorshipData() {
    const context = getCurrentContext();
    console.log(context); // { mentor: 'Diego Fernandes', event: 'Café com Instrutores' }

    const response = await apiCall(); // Alguma operação assíncrona
    return response;
}

Embora o exemplo acima utilize a API async_hooks para demonstrar como é possível rastrear o contexto em operações assíncronas, é importante destacar que o Async Context representa uma evolução na linguagem. Essa novidade trará uma forma nativa e integrada de gerenciar o estado assíncrono, eliminando a complexidade de utilizar APIs específicas do ambiente Node.js, como o async_hooks. Em outras palavras, a intenção é oferecer aos desenvolvedores uma ferramenta mais simples e padronizada para lidar com contextos em código assíncrono.

Casos de uso:

Monitoramento e rastreamento de requisições em eventos como NLW;

Gerenciamento de autenticação e sessões em aplicativos da Rocketseat;

Logging estruturado para depuração e análise de fluxo de execução.

Agora, a rastreabilidade do código assíncrono se torna mais previsível, tornando o desenvolvimento muito mais seguro e escalável!

4. Novos métodos para Sets e arrays

Os conjuntos (Set) finalmente ganharam funcionalidades que os tornam tão práticos quanto arrays e objetos! Agora, métodos como union, intersection e difference facilitam operações comuns sem necessidade de manipulações complexas.

Imagine um cenário na Rocketseat, onde estamos lidando com listas de alunos inscritos em diferentes formações. Queremos saber quais alunos estão matriculados em React e Node.js ao mesmo tempo, sem precisar manipular arrays manualmente. Com os novos métodos de Set, isso fica muito mais simples!

⚠️

São recursos propostos e podem requerer polyfills ou transpiladores.

Antes:


const reactStudents = new Set(["Ana", "Bruno", "Carlos"]);
const nodeStudents = new Set(["Carlos", "Daniel", "Ana"]);
const intersection = new Set([...reactStudents].filter(student => nodeStudents.has(student)));
console.log(intersection); // Set { 'Ana', 'Carlos' }

Com os novos métodos:


const reactStudents = new Set(["Ana", "Bruno", "Carlos"]);
const nodeStudents = new Set(["Carlos", "Daniel", "Ana"]);
const intersection = reactStudents.intersection(nodeStudents);
console.log(intersection); // Set { 'Ana', 'Carlos' }

Agora, fica muito mais prático trabalhar com conjuntos.

Novos métodos para arrays

Os arrays também receberam melhorias incríveis com novos métodos como groupBy e toSorted. Vamos ver como eles podem ser úteis:

Imagine que estamos organizando os alunos de um evento como a NLW, e queremos agrupá-los por curso.

Antes:


const students = [
  { name: "Ana", course: "React" },
  { name: "Bruno", course: "Node.js" },
  { name: "Carlos", course: "React" }
];

const grouped = students.reduce((acc, student) => {
  (acc[student.course] = acc[student.course] || []).push(student);
  return acc;
}, {});

console.log(grouped);

Com groupBy:


const students = [
  { name: "Ana", course: "React" },
  { name: "Bruno", course: "Node.js" },
  { name: "Carlos", course: "React" }
];

const grouped = students.groupBy(student => student.course);
console.log(grouped);

Muito mais simples e intuitivo, não acha?

Outro exemplo muito útil é o toSorted, que nos permite ordenar arrays de forma não destrutiva.

Antes:


const scores = [85, 92, 78, 88];
const sortedScores = [...scores].sort((a, b) => b - a);
console.log(sortedScores);

Com toSorted:


const scores = [85, 92, 78, 88];
const sortedScores = scores.toSorted((a, b) => b - a);
console.log(sortedScores);

Agora, a manipulação de arrays e conjuntos ficou ainda mais fluida, facilitando o desenvolvimento de aplicações modernas e escaláveis!

5. Temporal API 🕰️⌛

Se você já tentou trabalhar com datas e horários no JavaScript, sabe o quanto isso pode ser frustrante. De lidar com Date inconsistentes até fusos horários problemáticos, a experiência nunca foi das melhores... até agora! Com a Temporal API, tudo se tornou mais intuitivo e previsível!

Imagine um cenário na Rocketseat, onde estamos organizando eventos ao vivo como a NLW. Precisamos garantir que os horários sejam exibidos corretamente para alunos de diferentes países, respeitando seus fusos horários locais. Com a Temporal API, isso se torna muito mais simples!

⚠️

Embora traga uma solução moderna para manipulação de datas, sua implementação nativa ainda não está amplamente difundida.

Antes:


const eventDate = new Date('2024-07-15T18:00:00Z');
const localTime = new Date(eventDate.toLocaleString("pt-BR", { timeZone: "America/Sao_Paulo" }));
console.log(localTime);

Com Temporal API:


const { Temporal } = require('@js-temporal/polyfill');
const eventDate = Temporal.ZonedDateTime.from("2024-07-15T18:00:00[UTC]");
const localTime = eventDate.withTimeZone("America/Sao_Paulo");
console.log(localTime.toString()); // Data e horário corretamente ajustados

Benefícios da Temporal API

Trabalha diretamente com fusos horários, sem conversões manuais; Evita erros comuns de Date, trazendo mais precisão e previsibilidade; Manipulação simplificada para cálculos de dias, meses e anos.

Agora, podemos garantir que eventos globais como NLW, mentorias e encontros ao vivo sejam exibidos no horário correto para todos os participantes!

Conclusão

O JavaScript continua a evoluir, com novas propostas e recursos que prometem transformar a forma como escrevemos código. Funcionalidades como Pattern Matching, Pipeline Operator, Async Context, novos métodos para Sets e arrays e a Temporal API trazem melhorias significativas para o desenvolvimento, desde a simplificação de estruturas condicionais e encadeamento de funções até a manipulação eficiente de dados e o tratamento de datas e horários.

É importante lembrar que nem todos os recursos mencionados estão disponíveis em todas as versões do JavaScript. Algumas funcionalidades ainda são propostas em estágio inicial ou experimental, o que significa que seu uso pode exigir polyfills ou transpiladores.

Manter-se atualizado sobre as novidades do JavaScript é fundamental para aproveitar ao máximo o potencial da linguagem e construir aplicações cada vez mais modernas e eficientes. Acompanhar as discussões e propostas da comunidade, como as do TC39, permite vislumbrar o futuro do JavaScript e se preparar para as próximas inovações."

Seja otimizando estruturas condicionais com Pattern Matching, encadeando funções com Pipeline Operator, ou manipulando dados de maneira eficiente com os novos Métodos para Sets e arrays, há algo para todos os desenvolvedores aproveitarem:

🚀

Quer dominar JavaScript e se tornar um desenvolvedor Fullstack? Inscreva-se na formação da Rocketseat e leve suas habilidades para o próximo nível!

🔗 Formação Fullstack 🔗 Formação React 🔗 Formação Node.js

Artigos_

Explore conteúdos relacionados

Descubra mais artigos que complementam seu aprendizado e expandem seu conhecimento.

JavaScript