JavaScript: para que serve um Array?

JavaScript: para que serve um Array?
Neilton Seguins
Neilton Seguins

Compartilhe

Imagine que você precisa organizar seu guarda-roupa, e para isso deve guardar seus chapéus em uma gaveta, suas calças em outra e suas meias em outra. Um array é uma estrutura semelhante ao guarda-roupa, onde você pode guardar “coisas” em um espaço reservado. Neste artigo vamos entender o que é um array e para que ele serve. Vamos falar também:

  • Como funciona um array;
  • Como declarar arrays em Javascript;
  • Métodos de arrays utilizados em Javascript.

O que é um array?

Os arrays são estruturas que servem para guardar dados, e organizá-los. Seu objetivo é ser um espaço fixo na memória do computador que armazena elementos. Esses elementos podem ser acessados por um tipo de indicação, que chamamos de índice. Você pode guardar seus chapéus na gaveta 1, suas calças na gaveta 2 e as meias na gaveta 3, e sempre que precisar de calças, chapéus ou meias vai saber em que gaveta buscar.

Para que serve um array?

De forma mais robusta, um array é uma estrutura de dados que serve para guardar elementos em um espaço da memória. Estes espaços da memória são chamados de variáveis. Aqui você encontra mais conteúdos sobre variáveis, tipos e muito mais.

Como funciona um Array em Javascript?

Pense agora que você precisa comprar frutas no supermercado. Você logo pega uma folha de papel e uma caneta e anota cada item um abaixo do outro da seguinte forma:

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 buscar o item na lista, a diferença é que ele começa a contar do zero, assim:

Lista de Frutas:

NúmeroFrutas
0Maçãs
1Uvas
2Bananas
3Abacaxi
4Morangos

Cada item é um elemento, e cada elemento é acessado por um índice que começa do zero. Além disso, podemos trocar os elementos, acrescentar e remover como bem entendermos.

Como declarar um Array em JavaScript?

Existem duas formas de declarar um array em Javascript, mas a mais comum delas é criando uma variável da seguinte forma:

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

Onde cada item da lista é separado por vírgulas e ocupa uma posição do array listaDeFrutas iniciando no índice zero. Essa forma é chamada de método literal de array.

Acessando um elemento do array

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

var primeiroItem = listaDeFrutas[0]; // Pega o item 'Maçãs'
var segundoItem = listaDeFrutas[1]; // Pega o item 'Uvas'
var terceiroItem = listaDeFrutas[2]; // Pega o item 'Bananas'

Outra forma de acessar os elementos de um array é iterando sobre ele, ou seja, percorrendo todos os elementos através de estruturas de repetição como while, for, e forEach().

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

Nem o tamanho e nem os tipos de elementos são fixos em um array, já que podemos acrescentar e remover os seus elementos. Vamos conhecer alguns métodos bastante utilizados no dia a dia de um programador ao lidar com arrays.

Métodos de Array 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.

var listaDeFrutas = ['Maçãs','Uvas','Bananas','Abacaxi','Morangos'];
var pos = listaDeFrutas.indexOf('Bananas');
//pos = 2

Adicionar elementos

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

var 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()

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

Em ambos os métodos devemos passar como parâmetro o elemento que queremos adicionar.

Remover elementos

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

var 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()

var 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.

Podemos também remover um item a partir de seu índice com o método splice()

var listaDeFrutas = ['Maçãs','Uvas','Bananas','Abacaxi','Morangos'];
var pos = listaDeFrutas.indexOf('Abacaxi'); //pos = 3
listaDeFrutas.splice(pos, 1)
// ['Maçãs','Uvas','Bananas','Morangos']

No método splice() o primeiro parâmetro deve ser a posição a partir do qual queremos remover os elementos, e o segundo parâmetro é a quantidade que queremos remover.

Conclusão

Vimos o que são arrays, e que eles servem para armazenar, agrupar e organizar dados na memória do computador e que eles não possuem tamanho nem tipo fixos e devido a isso podemos acrescentar, remover e trocar os elementos de posição livremente. Vimos também que em Javascript a forma mais comum de declarar um array é usando o método de array literals, que é uma sequência de elementos separados por vírgulas e entre colchetes. Por fim, conhecemos alguns métodos de array usados por desenvolvedores e desenvolvedoras ao lidar com arrays em programação.

Aqui na alura temos alguns cursos que te ajudam a entender os diferentes tipos de variáveis e como você pode guardar dados dentro delas.

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

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

Meu nome é Neilton Seguins, instrutor React aqui na Alura, e te convido a conhecer mais sobre o universo Frontend nesta formação exclusiva em nossa plataforma. Se quiser ficar por dentro de novidades e conteúdo exclusivo também te espero no nosso canal no discord para aprendermos juntos e trocarmos conhecimento. Te espero lá!

Neilton Seguins
Neilton Seguins

Estou sempre buscando novidades e aprendendo coisas novas. Meu objetivo é ajudar pessoas criando as melhores soluções através de Ciência e Tecnologia.

Veja outros artigos sobre Front-end