JavaScript é uma linguagem que muitos desenvolvedores usam diariamente, mas existem inúmeras joias escondidas em seu ecossistema com as quais até mesmo desenvolvedores experientes podem não estar familiarizados. Este artigo explora alguns conceitos JavaScript menos conhecidos que podem aprimorar significativamente suas habilidades de programação. Abordaremos conceitos como Proxies, Símbolos, Geradores e muito mais, demonstrando cada um com exemplos e resolvendo problemas para ilustrar seu poder.

Ao final, você terá um conhecimento mais profundo de JavaScript e saberá quando (e quando não) usar esses recursos avançados.

1. Proxies

O que são proxies?

Um proxy em JavaScript permite interceptar e personalizar operações fundamentais, como pesquisas de propriedades, atribuições e invocações de funções.

Problema: Imagine que você está construindo um sistema onde os usuários têm objetos que rastreiam suas ações. Em vez de modificar todas as partes do seu aplicativo para rastrear o acesso à propriedade, você pode usar um proxy para interceptar e registrar essas ações.

Exemplo:

const user = {
  name: "Alice",
  age: 25
};

const handler = {
  get(target, prop) {
    console.log(`Property '${prop}' was accessed`);
    return prop in target ? target[prop] : `Property ${prop} doesn't exist`;
  },
};

const userProxy = new Proxy(user, handler);

console.log(userProxy.name); // Logs: Property 'name' was accessed, Returns: Alice
console.log(userProxy.address); // Logs: Property 'address' was accessed, Returns: Property address doesn't exist

Prós:

• Permite manipular e interceptar quase qualquer interação com um objeto.
• Ótimo para registro, validação e comportamento dinâmico.

Contras:

• Pode introduzir sobrecarga de desempenho se usado em excesso.
• Mais difícil de depurar devido à camada de abstração entre sua lógica e o comportamento do objeto.

2. Símbolos

O que são símbolos?

Símbolos são um novo tipo primitivo introduzido no ES6. Eles fornecem chaves exclusivas para propriedades de objetos, tornando-os úteis quando você precisa evitar colisões de nomes de propriedades.

Problema: Digamos que você esteja trabalhando em um objeto que se integra a código de terceiros e deseja adicionar propriedades personalizadas sem substituir suas chaves.

Exemplo:

const uniqueId = Symbol('id');
const user = {
  [uniqueId]: 123,
  name: "Alice"
};

console.log(user[uniqueId]); // 123
console.log(Object.keys(user)); // ['name'] - Symbol key is hidden from iteration

Prós:

• Os símbolos são únicos, mesmo que compartilhem a mesma descrição.
• Evita substituições acidentais de propriedades, tornando-as ideais para uso em bibliotecas ou design de API.

Contras:

• Os símbolos não são enumeráveis, o que pode tornar a depuração ou a iteração um pouco mais complicada.
• Pode reduzir a legibilidade do código se usado em excesso.

3. Funções do gerador

O que são geradores?

Geradores são funções que podem ser pausadas e retomadas, o que os torna úteis para gerenciar fluxos assíncronos ou produzir dados sob demanda.

Problema: Suponha que você queira gerar uma sequência de números de Fibonacci. Em vez de gerar a sequência inteira antecipadamente, você pode criar um gerador que produza valores um por um, permitindo uma avaliação lenta.

Exemplo:

function* fibonacci() {
  let a = 0, b = 1;
  while (true) {
    yield a;
    [a, b] = [b, a   b];
  }
}

const fib = fibonacci();

console.log(fib.next().value); // 0
console.log(fib.next().value); // 1
console.log(fib.next().value); // 1
console.log(fib.next().value); // 2

Prós:

• Eficiente para gerar sequências onde você só precisa de alguns valores por vez.
• Permite fluxos assíncronos mais limpos quando usado com rendimento.

Contras:

• Não são tão comumente usados ​​como Promises ou async/await, então eles têm uma curva de aprendizado mais acentuada.
• Pode levar a códigos complexos se usado em excesso.

4. Literais de modelo marcados

O que são literais de modelo marcados?

Os modelos marcados permitem processar literais de modelo com uma função, tornando-os incrivelmente poderosos para a construção de DSLs (linguagens específicas de domínio), como bibliotecas CSS-in-JS.

Problema: Você precisa construir um sistema de modelo que processe a entrada do usuário e a limpe para evitar ataques XSS.

Exemplo:

function safeHTML(strings, ...values) {
  return strings.reduce((acc, str, i) => acc   str   (values[i] ? escapeHTML(values[i]) : ''), '');
}

function escapeHTML(str) {
  return str.replace(/&/g, "&").replace(/, "<").replace(/>/g, ">");
}

const userInput = "";
const output = safeHTML`User said: ${userInput}`;
console.log(output); // User said: <script>alert('XSS')</script>

Prós:

• Permite um controle preciso sobre a interpolação de strings.
• Ótimo para construir bibliotecas que requerem análise ou transformação de strings (por exemplo, CSS, consultas SQL).

Contras:

• Geralmente não é necessário, a menos que você esteja trabalhando com bibliotecas específicas ou criando a sua própria.
• Pode ser difícil de entender e depurar para iniciantes.

5. WeakMaps e WeakSets

O que são WeakMaps e WeakSets?

WeakMaps são coleções de pares de valores-chave onde as chaves são fracamente referenciadas. Isso significa que se não existirem outras referências à chave, a entrada será coletada como lixo.

Problema: Você está construindo um sistema de cache e deseja garantir que, quando os objetos não forem mais necessários, eles sejam automaticamente coletados como lixo para liberar memória.

Exemplo:

let user = { name: "Alice" };
const weakCache = new WeakMap();

weakCache.set(user, "Cached data");

console.log(weakCache.get(user)); // Cached data

user = null; // The entry in weakCache will be garbage collected

Prós:

• Coleta automática de entradas, evitando vazamentos de memória.
• Ideal para armazenamento em cache onde a vida útil dos objetos é incerta.

Contras:

• WeakMaps não são enumeráveis, tornando-os difíceis de iterar.
• Limitado apenas a objetos como chaves.

6. Curry

O que é curry?

Currying transforma uma função que recebe vários argumentos em uma sequência de funções, cada uma com um único argumento. É uma técnica de programação funcional que pode aumentar a flexibilidade do código.

Problema: Digamos que você tenha uma função que aplica um desconto com base em uma porcentagem. Você deseja reutilizar esta função com diferentes porcentagens em todo o seu aplicativo.

Exemplo:

const applyDiscount = (discount) => (price) => price - price * (discount / 100);

const tenPercentOff = applyDiscount(10);
const twentyPercentOff = applyDiscount(20);

console.log(tenPercentOff(100)); // 90
console.log(twentyPercentOff(100)); // 80

Prós:

• Pode tornar as funções mais reutilizáveis ​​pré-aplicando argumentos.
• Permite criar facilmente aplicativos parciais.

Contras:

• Não é intuitivo para desenvolvedores não familiarizados com programação funcional.
• Pode levar a códigos excessivamente complexos se usado excessivamente.

Conclusão

Cada um desses conceitos avançados de JavaScript - Proxies, Símbolos, Geradores, Literais de Modelo Tagged, WeakMaps e Currying - oferece recursos exclusivos para resolver problemas específicos de maneiras mais eficientes, escalonáveis ​​ou elegantes. No entanto, eles apresentam compensações, como maior complexidade ou possíveis problemas de desempenho.

A principal lição é entender quando e onde usar esses conceitos. Só porque eles existem não significa que você deva usá-los em todos os projetos. Em vez disso, incorpore-os quando eles fornecerem benefícios claros, como melhorar a legibilidade, o desempenho ou a flexibilidade do código.

Ao explorar essas técnicas avançadas, você será capaz de resolver problemas mais sofisticados e escrever JavaScript mais poderoso.