Array em JavaScript: o que é para que serve na programação

Imagine que você precisa organizar seu guarda-roupa. Para isso, guarda chapéus em uma gaveta, calças em outra e meias em uma terceira. 

Na programação, um array funciona como esse guarda-roupa: ele é uma estrutura que armazena diferentes dados em um único espaço organizado. 

Neste artigo, vamos entender o que são arrays, para que servem e como utilizá-los no dia a dia do desenvolvimento. Você vai aprender: 

• Como funciona a estrutura de um array; 
• Como criar e declarar um array em JavaScript; 
• Métodos práticos para manipular seus dados. 

O que é um array? 

Um array é uma estrutura de dados utilizada para armazenar e organizar informações de forma sequencial. O objetivo é reservar um espaço na memória do computador para guardar diversos elementos que podem ser acessados rapidamente. 

Para encontrar cada item, utilizamos uma identificação chamada índice. Pensando no exemplo do guarda-roupa: se você guarda chapéus na gaveta 0, calças na gaveta 1 e meias na gaveta 2, sempre saberá exatamente onde buscar cada peça. Em JavaScript e na maioria das linguagens, essa contagem sempre começa pelo número zero. 

Para que serve um array? 

O array serve para agrupar diferentes informações em uma única estrutura. Em vez de criar dez variáveis diferentes para guardar uma lista de nomes, você utiliza um único array. Isso torna o código mais organizado e fácil de gerenciar. 

Tecnicamente, ele reserva um espaço sequencial na memória para armazenar esses elementos. Cada item da lista ocupa uma posição específica, o que permite que o computador localize e manipule os dados de forma rápida. 

Como funciona um array em Javascript? 

Para entender melhor o que é Array JavaScript e como ele funciona, imagine que você precisa listar frutas para comprar no supermercado. Você anota cada item em uma folha de papel, um abaixo do outro, assim: 

Lista de Frutas: 

1. Maçãs; 
2. Uvas; 
3. Bananas; 
4. Abacaxi; 
5. Morangos; 

Se alguém perguntar qual a terceira coisa que você precisa comprar, logo você irá olhar sua lista e responder “Bananas”. 

Em Javascript os arrays se comportam de forma parecida ao organizar informações. A principal diferença é que a contagem da posição de cada elemento começa no zero. 

Exemplo de Array JavaScript : Lista de Frutas 

Nessa estrutura, cada item é chamado de elemento, e o número que identifica sua posição é o índice. Além de armazenar os dados, os arrays possibilitam que você altere, adicione ou remova itens conforme a necessidade do seu projeto. 

Como declarar um Array em JavaScript? 

Existem diferentes maneiras de criar essa estrutura, mas a forma mais utilizada é a declaração literal. Nela, criamos uma variável e atribuímos os valores entre colchetes: 

const listaDeFrutas = ['Maçãs','Uvas','Bananas','Abacaxi','Morangos']; 

Nesse modelo, cada item da lista é separado por vírgulas e ocupa uma posição automática dentro do array listaDeFrutas, começando sempre pelo índice zero. 

Acessando um elemento do array 

Podemos acessar elementos de um array buscando por seu índice, da seguinte forma: 

const primeiroItem = listaDeFrutas[0]; // Retorna 'Maçãs' 
const segundoItem = listaDeFrutas[1];  // Retorna 'Uvas' 
const terceiroItem = listaDeFrutas[2]; // Retorna 'Bananas'

Como percorrer um array 

Além de acessar itens individualmente, podemos percorrer toda a lista de uma vez. Isso é feito por meio de estruturas de repetição ou métodos de iteração, como o forEach(), que executa uma ação para cada elemento: 

listaDeFrutas.forEach(function (item, indice) { 
  console.log(item, indice); 
}); 
// Maçãs 0 
// Uvas 1 
// Bananas 2 
// Abacaxi 3 
// Morangos 4

Uma característica importante é que o tamanho e os tipos de dados não são fixos. Isso significa que você tem liberdade para adicionar ou remover itens durante a execução do programa. 

Vamos conhecer alguns métodos bastante utilizados no dia a dia de um programador ou programadora ao lidar com arrays. 

Principais métodos de arrays em JavaScript: 

Existem alguns métodos muito usados por desenvolvedores e desenvolvedoras ao lidar com arrays. 

Acessando um elemento pelo seu índice 

Podemos acessar o índice de um elemento com o indexOf() passando como parâmetro o elemento. 

const listaDeFrutas = ['Maçãs', 'Uvas', 'Bananas', 'Abacaxi', 'Morangos']; 
const pos = listaDeFrutas.indexOf('Bananas');  
// Saída: 2

Como adicionar elementos 

Para adicionar um elemento ao final do array podemos usar o push(). 

const listaDeFrutas = ['Maçãs','Uvas','Bananas','Abacaxi','Morangos']; 
listaDeFrutas.push('Laranjas'); 
// ['Maçãs','Uvas','Bananas','Abacaxi','Morangos', 'Laranjas']

Para adicionar um elemento no início do array podemos usar o unshift(). 

const listaDeFrutas = ['Maçãs','Uvas','Bananas','Abacaxi','Morangos']; 
listaDeFrutas.unshift('Laranjas'); 
// ['Laranjas','Maçãs','Uvas','Bananas','Abacaxi','Morangos']

Em ambos os métodos, para adicionar objeto em Array JavaScript, basta passar como parâmetro o elemento que você deseja adicionar ao array 

Como remover um elemento do Array JavaScript 

Para remover um elemento do início de um array podemos usar o shift(). 

const listaDeFrutas = ['Maçãs','Uvas','Bananas','Abacaxi','Morangos']; 
listaDeFrutas.shift(); 
// ['Uvas','Bananas','Abacaxi','Morangos']

Para remover um elemento do final de um array podemos usar o pop(). 

const listaDeFrutas = ['Maçãs','Uvas','Bananas','Abacaxi','Morangos']; 
listaDeFrutas.pop(); 
// ['Maçãs','Uvas','Bananas','Abacaxi']

Em ambos os métodos, não é preciso passar o elemento como parâmetro. 

Removendo itens de qualquer posição 

Quando você precisa de precisão para deletar algo no meio da lista, o splice() é o caminho. Ele utiliza a posição inicial e a quantidade de itens a serem removidos: 

const cestinha = ['Maçãs', 'Uvas', 'Bananas', 'Abacaxi']; 
const indiceAlvo = cestinha.indexOf('Abacaxi'); // Encontra a posição 3 
// Remove 1 item a partir da posição encontrada 
cestinha.splice(indiceAlvo, 1);  
// Resultado: ['Maçãs', 'Uvas', 'Bananas']

Conclusão 

Neste artigo, aprendemos que arrays são estruturas fundamentais para armazenar, agrupar e organizar dados na memória do computador. Diferente de outras linguagens, em JavaScript eles não possuem tamanho ou tipo fixos, o que nos dá liberdade para acrescentar, remover e trocar os elementos de posição conforme a lógica do sistema exige. 

Vimos também que a forma mais comum de criar essas listas é por meio dos array literals, utilizando colchetes e separando os itens por vírgulas. E, exploramos métodos essenciais que tornam a manipulação de dados mais simples no cotidiano de quem programa. 

Como aprender mais sobre o tema?

Se você quer evoluir no uso de arrays e dominar a manipulação de dados no JavaScript, aprofundar seus conhecimentos nesse tema é um passo importante para ganhar mais eficiência no desenvolvimento.

Arrays estão presentes em praticamente qualquer aplicação, e saber utilizá-los bem, desde operações básicas até métodos mais avançados, faz diferença direta na qualidade do seu código.

Se você quer aprofundar seus conhecimentos em lógica e manipulação de dados, confira estes conteúdos que separamos: 

• Curso de Fundamentos do JavaScript: Tipos, variáveis e funções 

E se quiser saber mais sobre arrays, pode conferir o curso: 

• Curso de Fundamentos do JavaScript: Arrays 

Também temos outros artigos que falam mais sobre métodos de arrays e tipagem dinâmica de dados: 

• Manipulação de array com map, filter e reduce 

• O que são as tipagens estática e dinâmica em programação