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 MGAlé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:
- Um array é uma variável especial que armazena uma coleção de dados de um mesmo contexto;
- O acesso a dados do array é feito através de índices;
- O acesso a dados do array também pode ser feito através de métodos como o forEach;
- O Array é utilizado na programação tanto no front-end quanto no back-end;
- O Array pode ser utilizado na prática para retornar um conjunto de dados de uma API REST para o front-end de uma aplicação.
