Array no Javascript: Entenda o que é e aprenda a usar

Em programação, diversos códigos podem ser usados para dar diferentes formas a um projeto. Além dos códigos, outros elementos são usados com o objetivo de alcançar determinados resultados. Por isso, é importante saber como usar Array em Javascript para facilitar seu código. 

Quer saber para que serve o Array no Javascript, como ele pode ajudar o seu código e quer aprender a usar? Continue lendo este artigo! Você vai aprender tudo isso e muito mais. Confira!

O que é um Array?

Um array é uma estrutura de dados que permite armazenar múltiplos valores sob um único nome. Esses valores são acessados por meio de índices numéricos.

Os arrays são considerados variáveis compostas, pois podem conter diversos elementos, que podem ser do mesmo tipo ou de tipos diferentes. Por exemplo, um array pode ser usado para guardar a lista de nomes dos funcionários de um setor específico de uma empresa.

A estrutura de Array permite o armazenamento de outras variáveis, como de tipo primário, que é um Array de objetos JavaScript ou JavaScript Array Functions. Isso quer dizer que é possível armazenar funções em um elemento do array. Ou seja, itens de diferentes tipos, como um elemento string, outro elemento inteiro e outro por qualquer tipo de objeto.

Para que serve um Array?

Usar array em JavaScript serve para armazenar um conjunto de dados em uma estrutura organizada. Ele permite guardar elementos de diferentes tipos ou formatos, acessíveis por meio de índices numéricos.

Os elementos do array são organizados em uma sequência e cada item pode ser acessado usando seu índice. Para adicionar novos elementos a um array, você pode usar o método push(), que insere o item no final da estrutura.

Esse método, além de incluir um novo item na última posição, retorna o Array ao seu novo tamanho. Veja um exemplo abaixo:

var arrayNomes = ["João", "Maria", "Paulo", "Pedro"];
var resultado = arrayNomes.push("Joana");
console.log(resultado);
/* saída:
[ 'João', 'Maria', 'Paulo', 'Pedro', 'Joana' ]
5
*/
arrayNomes.push("Silvia");
console.log(arrayNomes);
/* saída:
[ 'João', 'Maria', 'Paulo', 'Pedro', 'Joana', 'Silvia' ]
*

O método push () também pode ser usado sem a atribuição do valor que retornará para alguma variável. O item também é adicionado na última posição do Array. Outro caminho é incluir um ou mais elementos na primeira posição do Array, utilizando o unshift. Veja o exemplo:

var arrayNomes = ["João", "Maria", "Paulo", "Pedro"];
var totalItens = arrayNomes.unshift("Silvia", "Carlos");
console.log(arrayNomes);
// saída: [ 'Silvia', 'Carlos', 'João', 'Maria', 'Paulo', 'Pedro' ]

Também é possível inserir um item em uma posição específica usando o método splice(), que permite especificar um índice onde o novo elemento será colocado, quantos elementos você deseja remover (se houver) e os itens que deseja adicionar. Veja o exemplo:

var arrayInserirNomes = ["José", "Ana", "Bia", "Enzo"];
arrayInserirNomes.splice(1,0,"Marlene");
console.log(arrayInserirNomes);
// saída: [ 'José', 'Aline', 'Ana', 'Bia', 'Enzo' ]

Neste caso, o 4 foi adicionado na segunda posição do array, sem remover nenhum elemento.

Ao utilizar o método splice (), o parâmetro referente à quantidade a ser excluída como zero é definido. Por isso, o resultado é a inserção do nome Aline na posição 1 do Array, com os demais elementos seguidos.

Como saber se uma variável é um Array?

Uma das formas de descobrir se uma variável é um Array é criando a sua própria função isArray():

function isArray(x) {
    return x.constructor.toString().indexOf("Array") > -1;
}

A função usada no exemplo anterior sempre retorna “true” quando o argumento é um array. Isso significa que a verificação é bem-sucedida se o protótipo do objeto incluir a palavra “Array”.

Além disso, é possível utilizar o operador “instanceof” para verificar se um objeto foi criado a partir de um determinado construtor. Ele retornará “true” se o objeto for uma instância desse construtor. Como no exemplo abaixo:

var fruits = ["Banana", "Laranja", "Maça", "Manga"];
fruits instanceof Array     // retorna true

Como fazer um Array em JavaScript?

Define o Array básico:

let myArray = [];

Em seguida, preencha com dois objetos, neste exemplo, os sentimentos Amor e Paixão:

let myArray = [
{ feeling: "Amor" },
{ feeling: "Paixão" }
];

Depois, use a função push para adicionar um elemento ao final de um Array. Nesse exemplo, usamos o elemento Ternura:

myArray.push({ feeling: "Ternura" });

Assim, fechamos o Array com 3 itens.

Caso queira remover o último item do Array, use a função pop:

myArray.pop();

Caso queira adicionar um item no início do array, use Unshift:

myArray.unshift({ feeling: "Ternura" });

Também é possível fazer iterações em cima dos Arrays usando o laço. Por exemplo, é possível criar um Array com 10 posições e fazer o console mostrar o valor de cada índice sempre que o laço for executado. Como no exemplo abaixo:

let myArray = new Array(10);
for(let i = 0; i < 10; i++){
console.log(myArray[i]);
}

Como nada foi adicionado no exemplo, o retorno será 10x undefined. Porém, quando não é possível saber o tamanho do Array, podemos usar o método para descobrir:

let myArray = new Array(10);
for(let i = 0; i < myArray.length; i++){
console.log(myArray[i]);
}

Também é possível transformar o Array em string. Nesse caso, usamos a função join() que converte cada item do Array em string e as concatena, chegando a esse resultado:

let phraseArray = ['Agradecemos', 'por isso', 'professor'];
console.log(phraseArray.join()); // Agradecemos,por isso,professor

Outra opção é usar um parâmetro string para colocar entre os itens do Array e substituir a vírgula default. Conforme abaixo:

let phraseArray = ['Agradecemos', 'por isso', professor'];
console.log(phraseArray .join(' ')); // Agradecemos por isso professor.

Além disso, você pode inverter a ordem do Array:

phraseArray = phraseArray.reverse();
console.log(phraseArray.join(' ')); // professor isso por professor

O interessante desses dois casos é ver como podemos trabalhar para ter resultados diferentes, que podem ser aplicados em contextos diversos.

Para ordenar o Array por ordem alfabética, usamos o método sort():

let fruits = new Array('Banana', 'Maçã', 'Abacate');
console.log(fruits.sort().join(' ')); //Abacate Banana Maçã

Por outro lado, se o objetivo é desconstruir um objeto ou um Array, podemos usar o Spread operator:

let fruits = new Array('Banana', 'Maçã', 'Abacate');
fruits = […fruits,'Laranja', 'Tangerina'];
console.log(fruits); // ["Banana", "Maçã", "Abacate", "Laranja", "Tangerina"]

Para pegar um pedaço do Array, usamos o método slice, porém o uso do parâmetro ends é opcional:

let fruits = new Array('Banana', 'Maçã', 'Abacate');
fruits = fruits.slice(0,1);
console.log(fruits); // ["Banana"]

Para criar um novo Array baseado no retorno da função passada, usamos o método Map:

let numbers = [1,2,3,4];
numbers = numbers.map(number => number * number);
console.log(numbers); //[1, 4, 9, 16]

No exemplo acima, uma função anônima foi criada e transformada em parâmetro. Ela recebe um number de parâmetro, que é o valor de cada item do array.

Depois, multiplica ele por ele mesmo e retorna para o map.

É uma função muito útil quando é necessário fazer processos com cada item do Array para substituí-lo ou modificá-lo.

Quando o objetivo é filtrar os itens do Array, essa função também pode ser usada. Nesse caso, a função deve ter um retorno booleano:

let numbers = [10,12,30,18];
numbers = numbers.filter(number => number >= 18);
console.log(numbers); // [30, 18]

Nesse exemplo, no filtro, os itens do Array tendem a ser no mínimo 18.

Como funciona um Array em JavaScript?

Ao usar um array em JavaScript, ele funciona como uma estrutura usada para armazenar múltiplos valores em uma única variável, organizados em uma sequência. Esses valores são acessados por meio de um índice numérico, que começa em 0.

É possível usar arrays para guardar diferentes tipos de dados, como números, strings, objetos ou até mesmo outros arrays. Eles são definidos entre colchetes [ ], com os itens separados por vírgulas.

Como modificar elementos em um Array?

Após usar array em JavaScript, para modificar elementos há várias abordagens, como alterar diretamente o valor de um índice, usar uma variável temporária ou o método push(). 

Usar array em JavaScript: acessar e modificar diretamente pelo índice

Você pode modificar o valor de um elemento no array acessando seu índice e atribuindo um novo valor.

Usar uma variável temporária para modificar elementos ao usar array em JavaScript

Para trocar dois elementos, você pode usar uma variável temporária. Você guarda o valor de um elemento em uma variável temporária e, em seguida, substitui esse elemento pelo valor de outro, usando a variável temporária para realizar a troca.

Método push() ao usar array em JavaScript

Esse método adiciona um novo elemento ao final do array.

Como acessar um Array dentro de um objeto JavaScript?

Para acessar um item de um array em JavaScript, basta usar o índice correspondente à sua posição, lembrando que os índices começam em 0. Para exibir ou modificar um elemento, você usa o nome do array seguido do índice do item. 

Como verificar se um valor é um Array em JavaScript?

Para verificar se um valor é um array em JavaScript, você pode usar o método isArray(). Esse método verifica se um determinado valor é um array e, caso for, retorna true, caso contrário, retorna false.

Erros comuns ao usar Arrays em JavaScript

• Usar o método map para buscar ou remover elementos, mas ele deve ser usado para transformar arrays;
• Usar map() para filtrar elementos;
• Uso de forEach ou for para criar uma cópia modificada;
• Não usar métodos adequados para busca, como find() ou findIndex();
• Não utilizar métodos adequados para filtragem, como filter() melhores para remover itens de arrays;
• Usar implementações manuais que podem ser substituídas por métodos nativos, como push(), splice(), some(), ou includes();
• Não entender corretamente os métodos de modificação.

Perguntas frequentes