Vetores em JavaScript na Prática | Exercícios Passo a Passo
Como um sistema consegue armazenar centenas de produtos, milhares de clientes ou uma lista inteira de mensagens sem criar uma variável para cada informação?
A resposta está nos vetores (arrays).
Sempre que você vê uma lista de produtos em um e-commerce, comentários em uma rede social ou resultados de uma pesquisa, existe uma grande chance de que esses dados estejam sendo manipulados utilizando vetores.
Neste artigo você aprenderá como os vetores funcionam na prática resolvendo exercícios passo a passo com JavaScript, entendendo não apenas a sintaxe, mas principalmente a lógica utilizada pelas aplicações reais.
O que é um vetor?
Um vetor (Array) é uma estrutura capaz de armazenar vários valores dentro de uma única variável.
Por exemplo:
const numeros = [8, 15, 22, 5, 31];
Em vez de criar cinco variáveis diferentes, armazenamos todos os números em uma única estrutura.
É exatamente isso que torna os vetores tão importantes no desenvolvimento de software.
Como os dados são organizados?
Cada elemento possui uma posição chamada índice.
O detalhe importante é que os índices sempre começam em 0.
Índice
0 1 2 3 4
↓
[8, 15, 22, 5, 31]
Isso significa que:
- índice 0 → primeiro elemento;
- índice 1 → segundo elemento;
- índice 2 → terceiro elemento.
Esse conceito aparece praticamente em qualquer linguagem de programação.
Descobrindo o tamanho do vetor
Para saber quantos elementos existem utilizamos a propriedade length.
console.log(numeros.length);
Ela retorna a quantidade total de posições ocupadas.
Essa informação é extremamente utilizada durante laços de repetição.
Primeiro e último elemento
Uma dúvida muito comum entre iniciantes é descobrir como acessar o primeiro e o último valor do vetor.
O primeiro elemento sempre está no índice zero.
Já o último pode ser encontrado utilizando:
numeros[numeros.length - 1]
Essa técnica é utilizada constantemente em sistemas reais.
Percorrendo todos os elementos com o for
Uma das maiores vantagens dos vetores é permitir percorrer automaticamente todos os seus elementos.
Para isso utilizamos o laço for.
for (let i = 0; i < numeros.length; i++) {
}
A variável i representa o índice atual.
Dessa forma conseguimos acessar qualquer posição do vetor.
É assim que diversos sistemas processam listas completas de informações.
Filtrando valores
Imagine que você precise mostrar apenas produtos acima de determinado preço.
Ou apenas alunos aprovados.
Ou clientes com idade superior a 18 anos.
Tudo isso funciona percorrendo o vetor e aplicando uma condição.
Durante o projeto fazemos exatamente esse exercício filtrando apenas os números maiores que 10.
Esse tipo de lógica aparece diariamente no desenvolvimento de software.
Somando todos os elementos
Outro exercício clássico consiste em calcular a soma de todos os valores armazenados.
Criamos uma variável acumuladora.
Depois percorremos o vetor adicionando cada elemento ao total.
Esse mesmo conceito é utilizado em sistemas financeiros, relatórios, dashboards e cálculos estatísticos.
Encontrando o maior valor sem utilizar Math.max()
Um dos exercícios mais importantes para fortalecer a lógica consiste em descobrir qual é o maior número presente no vetor.
Ao invés de utilizar funções prontas, implementamos toda a lógica manualmente.
O algoritmo funciona assim:
- Guarda o primeiro elemento como maior valor.
- Percorre todo o vetor.
- Sempre que encontra um número maior, atualiza a variável.
- Ao final, teremos o maior elemento da lista.
Esse exercício desenvolve muito o raciocínio lógico.
Inserindo novos elementos com push()
Os vetores também permitem crescer dinamicamente.
Utilizando push(), adicionamos um novo elemento ao final da lista.
numeros.push(40);
Essa operação é utilizada constantemente quando um usuário realiza um cadastro ou adiciona novos itens em um sistema.
Removendo elementos com pop()
Também podemos remover o último elemento utilizando pop().
numeros.pop();
Esse método é bastante utilizado em operações como desfazer ações, remover itens de carrinhos ou controlar pilhas de dados.
Onde os vetores aparecem no mundo real?
Mesmo sem perceber, você utiliza vetores diariamente.
Por exemplo:
- lista de produtos;
- comentários de vídeos;
- mensagens do WhatsApp;
- resultados do Google;
- lista de usuários;
- pedidos de uma loja;
- carrinho de compras;
- catálogo de filmes;
- playlists de música.
Sempre que existe uma coleção de informações, normalmente existe um vetor por trás daquela funcionalidade.
O que você aprenderá neste projeto?
Durante a resolução dos exercícios você aprenderá:
- índices;
- propriedade length;
- primeiro e último elemento;
- laço for;
- filtragem de dados;
- soma dos elementos;
- encontrar o maior valor sem utilizar Math.max();
- manipulação utilizando push() e pop().
Mais importante do que decorar comandos, você entenderá a lógica utilizada para resolver problemas reais.
Assista ao projeto completo
Se você prefere aprender acompanhando cada exercício sendo resolvido passo a passo, preparei um vídeo mostrando toda a construção da lógica de forma prática e sem complicação.
Durante a aula resolvemos diversos desafios comuns para quem está iniciando em JavaScript, explicando cada linha de código e mostrando como pensar durante a resolução dos problemas.
🎥 Vídeo editado (recomendado)
Aprenda Vetores em JavaScript Resolvendo Exercícios Passo a Passo
Este é o conteúdo recomendado para quem deseja aprender vetores de forma objetiva, focando apenas nos conceitos e exercícios mais importantes.
📺 Quer assistir à aula completa?
Se você prefere acompanhar toda a explicação realizada durante a live, incluindo comentários adicionais, dúvidas respondidas e todo o desenvolvimento dos exercícios, confira também a transmissão completa.
Live Completa
Conclusão
Os vetores são uma das estruturas mais importantes da programação.
Eles permitem armazenar grandes quantidades de informações, percorrer listas automaticamente, realizar filtros, cálculos e manipulações de forma extremamente eficiente.
Por isso, dominar vetores é um passo fundamental para quem deseja aprender JavaScript e evoluir para o desenvolvimento de aplicações reais.
Essa é justamente a proposta do Desvendando o Código: mostrar que a programação não é decorar comandos, mas compreender como as estruturas de dados resolvem problemas do mundo real.
Quando você entende a lógica por trás dos vetores, fica muito mais fácil aprender objetos, APIs, banco de dados, React, Node.js e diversas outras tecnologias que utilizam listas de informações todos os dias.


