O que são arrays e como utilizá-los no JavaScript?

Neste artigo você entenderá o que são arrays na programação, como eles funcionam e porque são úteis para o dia a dia do programados. Além disso, ao longo deste conteúdo você verá como utilizar arrays dentro do contexto do JavaScript.

O que é um array?

Um array é um tipo especial de variável utilizado para armazenar uma coleção de dados, ou seja, armazenar múltiplas informações de uma só vez.

O ideal é que as informações armazenadas em um array façam partes de um mesmo contexto, como por exemplo, uma lista de carros, uma lista de produtos, ou UFs de um estado.

Considere o exemplo abaixo para armazenar a UF dos Estados:

let uf_rf = "RJ"; let uf_sp = "SP"; let uf_mg = "MG";

Sem o uso de um array seria necessário criar uma variável para cada estado. Com array, o resultado seria esse:

let uf = ["RJ", "SP", "MG"];

Note que assim como mencionamos anteriormente, o array UF possui apenas siglas de estados, ou seja, todos os dados possuem o mesmo contexto.

Como acessar dados de um array?

O acesso a valores de um array pode se dar de diversas maneiras. A mais comum delas é através de índices, ou seja, um número que representa a posição do item dentro do array. Os items de um arrays são contados a partir do número 0 (zero), portanto, o índice 0 representa o primeiro item do array, o índice 1 o segundo e por aí vai. Por exemplo:

let uf = ["RJ", "SP", "MG"]; console.log(uf[0]); // Vai imprimir RJ console.log(uf[1]); // Vai imprimir SP console.log(uf[2]); // Vai imprimir MG

Além do acesso via índices, também é possível acessar os dados de array sem o uso de índices através de métodos, como por exemplo, o forEach no JavaScript. Veja o exemplo:

let lista_uf = ["RJ", "SP", "MG"]; lista_uf.forEach(uf => { console.log(uf); });

Perceba que ao executar o código acima os três itens são impressos no console.

Isso ocorre, pois o método forEach percorre todos os itens do array, e através do parâmetro definido dentro dele, nesse caso uf, ele consegue receber o valor de cada um dos itens.

Quando devo utilizar o forEach?

O uso de forEach é sempre o mais indicado quando não se sabe a quantidade de itens que compõe o array, pois nesse caso corre o risco de deixar algum item de fora.

Outro caso em que o uso de forEach é indicado é em arrays muito extensos, pois o código para exibir dados de um array de 100 itens ficaria muito grande e aumentaria a complexidade do projeto.

const carros = ["Gol", "Uno", "Pálio", "Vectra", "Fiesta", "206", "Ka", "Siena", "Golf GTi"]; carros.forEach(carro => { console.log(carro); });

Nesse caso, o desenvolvedor queria mostrar todos os carros de uma lista muito grande, por isso, a melhor opção seria o uso do forEach.

E quando posso utilizar os índices?

Os índices podem ser usados em casos em que o desenvolvedor tem um array pequeno e sabe exatamente quantos itens existem dentro desse array. Nesse caso, como os itens do array são conhecidos, o uso dos índices não aumentará a complexidade do projeto.

Outro uso para os índices é quando o desenvolvedor sabe a quantidade de itens do array e precisa acessar um item específico, por exemplo, se o desenvolvedor quiser acessar apenas o item 2 de um array com quatro items ele pode fazer isso através do índice. Veja:

const carros = ["Gol", "Uno", "Pálio", "Vectra"]; console.log(carros[1]);

Nesse caso, como o desenvolvedor queria mostrar apenas o carro Uno, a melhor alternativa seria o uso do índice.

Em qual situação prática um array é utilizado?

Como vimos anteriormente, o array é utilizado para armazenar múltiplos dados que fazem parte de uma mesmo contexto, portanto, na prática, um array é utilizado quando precisamos trabalhar uma quantidade grande de itens que tenham um propósito em comum.

Por exemplo, considere que você tenha um e-commerce e precise mostrar na página inicial uma lista dos produtos que estão em promoção no site.

Nesse caso, o front-end (web) precisa enviar uma requisição para o back-end através de uma API REST solicitando a lista de produtos que estão em promoção.

A API, por sua vez, retornará uma lista (array) com todos os produtos que estão em promoção para o front-end, que poderá acessar e listar os produtos através dos modos que mostramos previamente.

Confira a seguir um exemplo de uma lista de produtos sendo acessada via forEach:

const lista_produtos_promocao = ["Samsung Galaxy S22", "iPhone 14", "TV Samsung Neo QLED"] lista_produtos_promocao.forEach(produto => { console.log(produto); });

Confira também essa mesma lista de produtos sendo acessada através do uso de índices:

const lista_produtos_promocao = ["Samsung Galaxy S22", "iPhone 14", "TV Samsung Neo QLED"] console.log(lista_produtos_promocao[0]); console.log(lista_produtos_promocao[1]); console.log(lista_produtos_promocao[2]);

Pontos importantes

Agora que você já entende o que é e como o array funciona, confira no flow abaixo alguns pontos importantes:

Mais conteúdos

Se você curtiu esse artigo e ficou interessado em saber mais sobre arrays dá uma conferida nesse nosso vídeos sobre o tema no Youtube:

Além dos conteúdos sobre array, o canal da DevMedia no Youtube possui diversos outros conteúdos de programação, então não deixa de conferir.

Artigos relacionados