Squad Front

Appearance

Algoritmos e Estruturas de Dados no Front-End ​

Este guia aborda conceitos de ciência da computação aplicados ao desenvolvimento de interfaces, com foco em performance e manipulação eficiente de dados.

1. Complexidade de Tempo e Espaço (Big O) ​

No front-end, entender a complexidade é vital ao lidar com grandes volumes de dados (ex: listas de pacientes, logs de telemetria).

  • O(1) - Constante: Acesso direto a uma chave de objeto ou item de array por índice.
  • O(n) - Linear: Percorrer uma lista uma vez (ex: filter, find, forEach).
  • O(n log n): Algoritmos de ordenação eficientes (como o .sort() do JS em motores modernos).
  • O(n²) - Quadrático: Loops aninhados (ex: um find dentro de um map). **Evite isso ao lidar com listas grandes. **

2. Estruturas de Dados Comuns no JS ​

Arrays ​

Melhor para listas ordenadas onde o acesso por índice é comum.

  • Pitfall: unshift e shift são O(n) pois precisam re-indexar todo o array.

Objects e Maps ​

Ideais para buscas rápidas (O(1)).

  • Dica: Use Map quando precisar manter a ordem das chaves ou quando as chaves não forem apenas strings.

Sets ​

Coleções de valores únicos. Úteis para remover duplicatas de forma performática.

javascript
const uniqueIds = [...new Set(ids)]; // O(n) para criar, O(1) para verificar existência.

3. Aplicação Prática: Normalização de Estado ​

Em vez de armazenar dados aninhados (árvores), transformamos em objetos indexados por ID. Isso transforma buscas O(n) em O(1).

Antes (O(n)):

javascript
const user = users.find(u => u.id === targetId);

Depois (O(1)):

javascript
const user = usersById[targetId];

4. Algoritmos no DOM ​

Tree Traversal (Travessia de Árvore) ​

O DOM é uma árvore. Entender busca em profundidade (DFS) ou largura (BFS) ajuda a entender como seletores e o motor de renderização funcionam.

Imutabilidade e Comparação ​

Ao atualizar o estado no React, usamos imutabilidade para que a comparação de "mudança" seja apenas uma comparação de referência (O(1)), em vez de uma comparação profunda de objeto (O(n)).

5. Referências ​