DEV Community

Cover image for 16 Recursos Modernos do JavaScript Que Você Precisa Conhecer
suissAI
suissAI

Posted on

16 Recursos Modernos do JavaScript Que Você Precisa Conhecer

Olha só que maravilha essa atualização galera!!


1. Top-Level Await

O que é: Usar await direto no nível do módulo, sem precisar de função assíncrona.

Exemplo:

// Antes
async function init() {
  const config = await fetch('/api/config');
  startApp(config);
}
init();

// Agora
const config = await fetch('/api/config');
startApp(config);
Enter fullscreen mode Exit fullscreen mode

Onde usar:

  • Carregar configurações antes do app iniciar
  • Conectar no banco de dados antes do servidor subir
  • Importar dados iniciais

2. Campos Privados (#)

O que é: Campos de classe que realmente são privados.

Exemplo:

class Carteira {
  #saldo;

  constructor(saldo) {
    this.#saldo = saldo;
  }

  sacar(valor) {
    if (valor > this.#saldo) throw new Error('Saldo insuficiente');
    this.#saldo -= valor;
  }

  getSaldo() {
    return this.#saldo;
  }
}

const c = new Carteira(1000);
c.#saldo; // ❌ Erro!
c.sacar(100); // ✅ Único jeito de modificar
Enter fullscreen mode Exit fullscreen mode

Onde usar:

  • Classes de domínio (User, Order, Transaction)
  • Estado interno que não deve ser modificado
  • Dados sensíveis

3. Error.cause

O que é: Adicionar a causa original de um erro.

Exemplo:

try {
  await fetchUser(userId);
} catch (error) {
  throw new Error('Falha ao buscar usuário', {
    cause: error
  });
}

// No log você vê toda a cadeia do erro
Enter fullscreen mode Exit fullscreen mode

Onde usar:

  • Wrappers de API
  • Tratamento de erros de banco
  • Middleware de erro

4. Object.hasOwn()

O que é: Verificar se objeto tem propriedade de forma limpa.

Exemplo:

const user = { name: 'João', age: null };

Object.hasOwn(user, 'name'); // true
Object.hasOwn(user, 'age');  // true (mesmo sendo null)
Object.hasOwn(user, 'email'); // false
Enter fullscreen mode Exit fullscreen mode

Onde usar:

  • Validar payloads de API
  • Checar campos obrigatórios
  • Merge condicional de objetos

5. .at()

O que é: Indexação relativa em arrays.

Exemplo:

const orders = await getOrders();

orders.at(-1);  // Último elemento
orders.at(-2);  // Penúltimo
orders.at(0);   // Primeiro (igual [0])
Enter fullscreen mode Exit fullscreen mode

Onde usar:

  • Pegar último registro
  • Implementar undo/redo
  • Trabalhar com filas

6. toSorted()

O que é: Ordenar array sem mutar o original.

Exemplo:

const products = await getProducts();

const sortedByName = products.toSorted((a, b) => a.name.localeCompare(b.name));
const sortedByPrice = products.toSorted((a, b) => a.price - b.price);

// products original continua intacto
Enter fullscreen mode Exit fullscreen mode

Onde usar:

  • Estado do React/Vue
  • Dados compartilhados
  • Múltiplas ordenações

7. toReversed() & toSpliced()

O que é: Reverter e remover elementos sem mutar.

Exemplo:

const logs = await getLogs();
const reversed = logs.toReversed();

const items = [1, 2, 3, 4, 5];
const removed = items.toSpliced(2, 2); // [1, 2, 5]
Enter fullscreen mode Exit fullscreen mode

Onde usar:

  • Histórico de ações
  • Logs com múltiplas visualizações
  • Estado imutável

8. findLast() / findLastIndex()

O que é: Encontrar o último elemento que corresponde.

Exemplo:

const tasks = getTasks();

const lastPending = tasks.findLast(t => t.status === 'pending');
const lastErrorIndex = tasks.findLastIndex(t => t.status === 'error');
Enter fullscreen mode Exit fullscreen mode

Onde usar:

  • Última tarefa pendente
  • Último erro
  • Auditoria

9. Object.groupBy()

O que é: Agrupar array por uma propriedade.

Exemplo:

const users = await getUsers();

const byRole = Object.groupBy(users, u => u.role);
// { admin: [...], user: [...], editor: [...] }

const byStatus = Object.groupBy(orders, o => o.status);
Enter fullscreen mode Exit fullscreen mode

Onde usar:

  • Dashboards
  • Relatórios
  • Filtros e facets

10. Promise.withResolvers()

O que é: Criar promise com resolve/reject externos.

Exemplo:

const { promise, resolve, reject } = Promise.withResolvers();

uploadFile(file, {
  onSuccess: (data) => resolve(data),
  onError: (err) => reject(err)
});

await promise;
Enter fullscreen mode Exit fullscreen mode

Onde usar:

  • Upload com progresso
  • Esperar eventos
  • Integrar com callbacks

11. Set Methods

O que é: Operações de conjunto nativas.

Exemplo:

const setA = new Set([1, 2, 3]);
const setB = new Set([2, 3, 4]);

setA.intersection(setB); // Set {2, 3}
setA.union(setB);        // Set {1, 2, 3, 4}
setA.difference(setB);   // Set {1}
Enter fullscreen mode Exit fullscreen mode

Onde usar:

  • Permissões e roles
  • Filtros múltiplos
  • Comparar listas

12. RegExp.escape()

O que é: Escapar caracteres especiais em regex.

Exemplo:

const searchTerm = 'preço (R$)';
const regex = new RegExp(RegExp.escape(searchTerm), 'i');
Enter fullscreen mode Exit fullscreen mode

Onde usar:

  • Busca com input do usuário
  • Highlight de texto
  • Validação

13. Promise.try()

O que é: Tratar código síncrono e assíncrono igual.

Exemplo:

async function handle(fn) {
  try {
    return await Promise.try(fn);
  } catch (error) {
    // Mesmo tratamento pra tudo
  }
}
Enter fullscreen mode Exit fullscreen mode

Onde usar:

  • Wrappers de operações
  • Middleware
  • Retry

14. Iterator Helpers

O que é: Processamento preguiçoso de dados.

Exemplo:

const result = Iterator.from(largeArray)
  .map(x => x * 2)
  .filter(x => x > 100)
  .take(10)
  .toArray();
Enter fullscreen mode Exit fullscreen mode

Onde usar:

  • Grandes datasets
  • Streams
  • Performance crítica

15. Float16Array

O que é: Array numérico de 16 bits.

Exemplo:

const vertices = new Float16Array([
  -0.5, -0.5, 0.0,
   0.5, -0.5, 0.0
]);
Enter fullscreen mode Exit fullscreen mode

Onde usar:

  • WebGPU
  • Machine learning
  • Dados científicos

16. structuredClone()

O que é: Deep clone nativo.

Exemplo:

const original = { 
  name: 'João', 
  date: new Date(),
  nested: { value: 123 }
};

const copy = structuredClone(original);
// Copia tudo, incluindo Date e objetos aninhados
Enter fullscreen mode Exit fullscreen mode

Onde usar:

  • Clonar estado
  • Cache
  • Evitar mutação

Configuração

package.json:

{
  "type": "module",
  "engines": {
    "node": ">=20"
  }
}
Enter fullscreen mode Exit fullscreen mode

tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2025",
    "module": "ESNext"
  }
}
Enter fullscreen mode Exit fullscreen mode

É isso galera! Comecem a usar aos poucos que faz diferença no dia a dia. 🚀

Top comments (0)