Javascript Array: aprenda o que é como criar e usar!

O JavaScript Array faz parte dos objetos globais da linguagem e é utilizado para armazenar uma coleção de elementos em uma única variável. Na prática, o array é uma estrutura de dados que contém um índice numérico e um elemento, que pode ser de qualquer tipo primitivo de dados, um objeto ou, até mesmo, um outro array.

Trata-se de um recurso muito utilizado na linguagem e, portanto, é importante que as pessoas que utilizam JavaScript entendam como ele funciona e de que forma pode ser usado em uma aplicação web. Pensando nisso, fizemos este conteúdo em que vamos mostrar:

  • O que é um array?
  • Qual a sua sintaxe?
  • Como criar um array?
  • Arrays e objetos: quando usar e qual a diferença?
  • Como usar o array?
  • Quais as propriedades e métodos do JavaScript Array?
  • Como utilizar instâncias de array?

Vamos lá? Boa leitura!

O que é um array?

Antes de entrarmos na definição de array, é preciso entender a diferença entre variáveis simples e compostas. A primeira permite o armazenamento de apenas um valor correspondente. Portanto, ao declararmos uma variável do tipo string para armazenar um nome, por exemplo, apenas o nome de uma pessoa poderá ser armazenado.

Já a variável composta permite o armazenamento de vários elementos, de um mesmo tipo de dados ou não. Nesse exemplo da string nome, podemos ter uma variável que armazena a lista de nomes de alunos de uma sala de aula, por exemplo. Portanto, temos uma variável que armazena outras variáveis do tipo string para guardar o nome de todos os alunos.

Esse é o conceito de um array, ou seja, é uma estrutura que permite o armazenamento de outras variáveis, que podem ser do tipo primário, um array de objetos JavaScript ou, até mesmo, JavaScript array functions, ou seja, é possível armazenar funções em um elemento do array.

Isso significa que os itens podem ser de tipos diferentes, ou seja, podemos ter em um array um elemento string, outro elemento inteiro e outro do tipo objeto. Para acessar cada item nessa estrutura temos um índice numérico, que é acessado de diferentes formas, como mostraremos mais adiante.

Qual a sua sintaxe?

A sintaxe de um array tem diferentes formatos. A declaração direta ou representação literal é aquela em que o array é representado pelos símbolos de colchetes, que podem ou não conter elementos. Veja a sintaxe:

var novaArray = []

Nesse caso, o array novaArray é criado sem nenhum elemento atribuído. Essa mesma representação pode ser feita com a atribuição dos elementos, conforme a sintaxe abaixo:

var novaArray = [elemento0, elemento1, elemento2, ..., elementoN]

Outra sintaxe para a declaração de um array é por meio da utilização do construtor new. Veja abaixo:

var novaArray = new Array()
var novaArray = new Array(elemento0, elemento1, elemento2, ... , elementoN)

No primeiro caso, será criado um array vazio, ou seja, com a propriedade length, que significa tamanho, igual a zero. Já na segunda opção será criado um array com a quantidade de elementos informadas. Há, ainda, uma outra sintaxe:

var novaArray = new Array(numeroDeElementos)

Em que o numeroDeElementos corresponde ao tamanho do array. Ao criar um array apenas com a informação do número de elementos será definido o tamanho do array, ou seja, não há nenhum conteúdo atribuído a eles, mas há a alocação de memória conforme o tamanho determinado.

É importante dizer que, apesar de existirem formas diferentes de declarar um array, a recomendação de utilização é para a declaração do tipo literal, uma vez que essa forma é mais prática, tem maior legibilidade e velocidade de execução. 

Como criar um array?

Como dissemos, a criação de um array pode ser feita de diferentes maneiras. A seguir, mostramos a inicialização e o resultado de saída para a declaração de forma literal e por meio do construtor new. Confira o resultado para a criação de arrays unidimensional e bidimensional.

Array unidimensional

var arrayLiteral = [];
arrayLiteral[0] = "Olá";
console.log(arrayLiteral);
// saída: ['Olá']
var arrayNew = new Array();
arrayNew[0] = "Olá";
console.log(arrayNew);
// saída: ['Olá']

Nessas duas declarações o resultado é o mesmo, ou seja, o array é criado sem nenhum elemento. A seguir, atribuímos o conteúdo “Olá” na posição inicial do array. Já nos dois próximos exemplos, atribuímos os valores 1 e 2 para os elementos do array. O resultado é o mesmo para as duas opções.

var novaArrayLiteral = [1,2];
console.log(novaArrayLiteral);
// saída: [ 1, 2 ]
var novaArrayNew = new Array(1,2);
console.log(novaArrayNew);
// saída: [ 1, 2 ]

Nos próximos dois exemplos temos uma diferença entre os resultados. Perceba que na forma literal o valor 2 é atribuído ao primeiro elemento do array. Por isso, a propriedade length, que corresponde ao tamanho do array, retorna o valor 1. Já ao inicializarmos a variável com o construtor new Array (2), ele será criado com dois elementos vazios.

A seguir, atribuímos o conteúdo “Olá” à primeira posição. Perceba que o resultado mostra um elemento com o conteúdo adicionado e outro vazio. Além disso, o tamanho do array é de dois elementos.

var outraArrayLiteral = [2];
console.log(outraArrayLiteral[0]);
console.log(outraArrayLiteral.length);
// saída: [ 2 ]
// 1
var outraArrayNew = new Array(2);;
outraArrayNew[0] = "Olá";
console.log(outraArrayNew);
console.log(outraArrayNew.length);
// saída: [ 'Olá', <1 empty item> ]
// 2

Array Bidimensional

O array bidimensional nada mais é que um array que armazena outro array. Trata-se de um recurso muito útil em diversas situações. Confira o próximo exemplo, em que criamos um array bidimensional para armazenar o nome, sobrenome, idade e curso dos alunos. Confira o código.

var arrayBidimensionalLiteral = [];
arrayBidimensionalLiteral[0] = ["João", "Souza", 20, "Direito"];
arrayBidimensionalLiteral[1] = ["Maria", "Gonçalves", 21, "Medicina"];
console.log(arrayBidimensionalLiteral);
/*saída:
[
  [ 'João', 'Souza', 20, 'Direito' ],
  [ 'Maria', 'Gonçalves', 21, 'Medicina' ]
]
*/
var arrayBidimensionalNew = new Array();
arrayBidimensionalNew[0] = new Array("João", "Souza", 20, "Direito");
arrayBidimensionalNew[1] = new Array("Maria", "Gonçalves", 21, "Medicina");
console.log(arrayBidimensionalNew);
/* saída:
[
  [ 'João', 'Souza', 20, 'Direito' ],
  [ 'Maria', 'Gonçalves', 21, 'Medicina' ]
]
*/

Nesse exemplo, fizemos a declaração do array tanto da forma literal quanto com o construtor new(). Perceba que primeiro criamos um array unidimensional e, a seguir, acessamos cada elemento para adicionar um novo array com o conteúdo desejado.

Arrays e objetos: quando usar e qual a diferença?

Como mencionamos, um array é uma estrutura de dados em que diversos elementos são armazenados e associados a um índice correspondente. Portanto, para cada item do array temos um índice numérico para acessá-lo, com o valor inicial do índice igual a zero. Confira o array abaixo.

var meuArray = [1, 2, 3, 4];
meuArray[4] = 5;
console.log(meuArray);
// saída: [ 1, 2, 3, 4, 5 ]

Cada elemento tem um índice e um valor determinado. Portanto, no índice 0 temos o elemento 1, no índice 1 temos o elemento 2 e assim por diante. Por isso, quando queremos manipular o array precisamos informar o índice correspondente. Nesse caso, adicionamos um elemento com índice 4 e conteúdo 5 à variável.

Em JavaScript, o array não pode ter índice literal, ou seja, não é possível utilizar uma string para acessar o elemento. É importante dizer que o índice numérico pode ser informado entre aspas, como meuArray [‘4’] para indicar o respectivo índice. Entretanto, essa prática não é utilizada, pois o valor será convertido para o correspondente numérico.

Uma forma de usar literais como índice é por meio de objetos. Um objeto é uma estrutura utilizada para agrupar diferentes propriedades de um mesmo elemento. No nosso exemplo sobre alunos, podemos ter um objeto chamado aluno que contém diversas características ligadas a ele, como nome, sobrenome, idade e curso. Veja a diferença entre os códigos abaixo.

var arrayAluno = ['João', 'Souza', 20, 'Direito'];
console.log("Nome do aluno: " + arrayAluno[0] + " " + arrayAluno[1]);
console.log("Idade: " + arrayAluno[2] + " " + "Curso: " + arrayAluno[3]);
/*saída:
Nome do aluno: João Souza
Idade: 20 Curso: Direito
*/
var objetoAluno = {
    nome: "João",
    sobrenome: "Souza",
    idade: 20,
    curso: "Direito"
}
console.log("Nome do aluno: " + objetoAluno.nome + " " + objetoAluno.sobrenome);
console.log("Idade: " + objetoAluno.idade + " " + "Curso: " + objetoAluno.curso);
/* saída:
Nome do aluno: João Souza
Idade: 20 Curso: Direito
*/

O arrayAluno contém as mesmas informações que o objetoAluno. Entretanto, a forma de acessar o conteúdo é diferente entre os dois formatos. Enquanto no array é preciso informar o índice de cada elemento, no objeto basta acessar a propriedade desejada.

A decisão sobre qual estrutura utilizar deve ser pensada de acordo com a finalidade pretendida. Se a intenção é manter uma lista de dados que se repetem, como uma relação de nomes ou de dados numéricos, o array é a melhor alternativa.

Já se a necessidade é armazenar um elemento com propriedades variadas, o objeto é a melhor opção. Além disso, é possível conciliar as duas alternativas e utilizar um JavaScript array of objects, em que temos um array para enumerar uma série de objetos.

Como usar o array?

Basicamente, o array é utilizado para armazenar um conjunto de dados. Já vimos como devemos fazer para criar uma variável desse tipo e, agora, precisamos saber como manipular os seus elementos da melhor forma. Confira, a seguir, diferentes formas de fazer essa atividade.

Adicionando elementos a um array

O primeiro passo para adicionar um elemento em um array é definir em que posição queremos fazer isso. Uma alternativa é inserir um item no final do array. Para isso, utilizamos o método push (), que, além de adicionar o novo item na última posição, retorna o novo tamanho do array. Confira o algoritmo a seguir.

var arrayNomes = ["João", "Maria", "Paulo", "Pedro"];
var resultado = arrayNomes.push("Joana");
console.log(arrayNomes);
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' ]
*

Perceba que o método push () também pode ser utilizado sem a atribuição do valor retornado para alguma variável. Da mesma forma, o item será incluído na última posição do array.

Também podemos incluir um ou mais elementos na primeira posição do array. Para isso, utilizamos o método unshift (). Veja o exemplo de JavaScript add to array, a seguir.

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' ]

Outra possibilidade é a inclusão de um elemento em uma posição específica do array. Para isso, utilizamos o método splice (), que contém o índice em que haverá a inserção do elemento, o número de elementos que serão excluídos — o método permite isso também — e o item ou itens a serem incluídos. Confira o exemplo.

var arrayInserirNomes = ["João", "Maria", "Paulo", "Pedro"];
arrayInserirNomes.splice(1,0,"Marlene");
console.log(arrayInserirNomes);
// saída: [ 'João', 'Marlene', 'Maria', 'Paulo', 'Pedro' ]

Perceba que, ao executarmos o método splice (), definimos o parâmetro referente à quantidade a ser excluída como zero. Por isso, o resultado foi a inserção do nome Marlene na posição 1 do array, seguido dos elementos restantes.

Removendo elementos de um array

A remoção de itens de um array também contém formas diferentes, de acordo com a posição do elemento. Para remover o primeiro item do array, utilizamos o método shift (). Além de excluir o elemento, ele retorna o item excluído, caso o valor seja atribuído a uma variável ou constante. Confira o código.

var removePrimeiroItemArray = ["João","Maria", "Paulo", "Pedro"];
var itemRemovido = removePrimeiroItemArray.shift();
console.log(removePrimeiroItemArray);
console.log("Item excluído: " + itemRemovido);
/* saída:
[ 'Maria', 'Paulo', 'Pedro' ]
Item excluído: João
*/

Podemos, também, excluir um elemento em alguma posição específica do array. Para isso, empregamos o método splice (), que já aplicamos para adicionar elementos na variável. No caso da remoção, basta informar o índice do item a ser excluído e a quantidade de elementos que serão removidos.

Vale dizer que a adição de novos elementos é opcional nesse método. Por isso, ele tanto pode ser usado para adicionar quanto para remove item from array JavaScript. Veja o exemplo com a exclusão.

var arrayRemoverNomes = ["João", "Maria", "Paulo", "Pedro"];
var itensRemovidos = arrayRemoverNomes.splice(2,2);
console.log(arrayRemoverNomes);
console.log("Itens removidos: " + itensRemovidos);
// saída: [ 'João', 'Maria', 'Joana', 'Cláudia', 'Pedro' ]

A remoção de um elemento também pode ser feita no final do array. Para isso, utilizamos o método pop (), que exclui o último elemento e retorna o item excluído. Veja o exemplo, a seguir.

var arrayExcluirUltimo = ["João", "Maria", "Paulo", "Pedro"];
var itemExcluido = arrayExcluirUltimo.pop();
console.log(arrayExcluirUltimo);
console.log("Item excluído: " + itemExcluido);
/* saída:
[ 'João', 'Maria', 'Paulo' ]
Item excluído: Pedro
*/

Alterando elementos de um array

A alteração do array pode ser feita por meio do método splice (), que, na prática, remove e adiciona um novo elemento no array na posição indicada para concluir a alteração. Veja o próximo exemplo.

var arrayAlterarNomes = ["João", "Maria", "Paulo", "Pedro"];
var itemAlterado = arrayAlterarNomes.splice(2,1, "Joana");
console.log(arrayAlterarNomes);
console.log("Item alterado: " + itemAlterado);
/* saída: [ 'João', 'Maria', 'Joana', 'Pedro' ]
Item alterado: Paulo
*/

Iterando arrays

Existem diferentes formas de iterar os elementos de um array. Uma delas é por meio da estrutura de repetição for. Perceba que utilizamos a propriedade length (), que informa a quantidade de itens existentes, para controlar o momento de interrupção do loop. Veja, a seguir, um loop para exibir os itens de um array.

var arrayNomes = ["João","Maria", "Paulo", "Pedro"];
for (i = 0; i < arrayNomes.length; i++){
    console.log("O item " + i + " é " + arrayNomes[i] );
}
/* saída:
O item 0 é João
O item 1 é Maria
O item 2 é Paulo
O item 3 é Pedro
*/

O laço for também é útil para a manipulação de arrays bidimensionais ou multidimensionais, como a que mostramos anteriormente.

A linguagem oferece, ainda, uma série de métodos que ajudam a desenvolver essa atividade. O método forEach (), por exemplo, percorre os elementos do array e executa uma função callback para cada item. Confira como o mesmo código anterior pode ser escrito com a ajuda desse recurso.

var arrayNomes = ["João","Maria", "Paulo", "Pedro"];
arrayNomes.forEach((elemento, indice) => console.log("O item " + indice + " é " + elemento ));
/* saída:
O item 0 é João
O item 1 é Maria
O item 2 é Paulo
O item 3 é Pedro
*/

Quais as propriedades e métodos do JavaScript Array?

O objeto array oferece uma série de propriedades e métodos que ajudam as pessoas que desenvolvem programas a utilizar esse recurso em suas aplicações web. Confira, a seguir, os principais deles.

Propriedades

Array.length

Como dissemos, a propriedade length () retorna o tamanho de elementos em um array. Já passamos por essa propriedade no exemplo sobre iteração de arrays, o que demonstra como esse recurso é útil para a manipulação da estrutura de repetição for ou para outros loops semelhantes.

get Array

Trata-se de uma propriedade com valor de função, que funciona como uma função construtora para a criação de objetos derivados.

Array.prototype

A propriedade prototype permite a criação de propriedades com característica de função. Observe o exemplo a seguir.

Array.prototype.retornaPares = function() {
    var numerosPares = [];
    this.forEach(elemento => {
        if (elemento % 2 === 0 )
            numerosPares.push(elemento);
    })
    return numerosPares;
};
var arrayNumeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arrayPares = arrayNumeros.retornaPares();
console.log(arrayPares);

Nesse exemplo, criamos uma prototype chamada retornaPares () para retornar os números pares em um novo array. Perceba que criamos um array vazio e utilizamos o método forEach () para fazer a leitura da variável e adicionar os elementos que atendem ao critério de seleção por meio do método push (). A seguir, retornamos o novo array apenas com o resultado desejado.

Métodos

Array.from()

O método from() é utilizado quando queremos criar um array a partir de um objeto que não é um array. Um exemplo são as strings em que cada caractere é convertido para um elemento de array. Veja o código a seguir.

var frase = "JavaScript"
var arrayFrase = Array.from(frase);
console.log(arrayFrase);
/* saída:
[
  'J', 'a', 'v', 'a',
  'S', 'c', 'r', 'i',
  'p', 't'
]*/

Array.isArray ()

O método isArray () é empregado quando queremos descobrir se uma variável ou constante é um objeto array. Caso o resultado seja positivo, ele retorna o valor verdadeiro. Se for negativo, o retorno é falso. Veja o exemplo abaixo.

var nomes = ["João","Maria", "Paulo", "Pedro"];
console.log(Array.isArray(nomes));
// saída: true
var nomesString = "João, Maria, Paulo, Pedro";
console.log(Array.isArray(nomesString));
// saída: false

Array.of ()

O método Array.of () retorna um novo array com o elemento ou os elementos definidos entre os parênteses. Observe o exemplo.

var novoArray = Array.of(2);
console.log(novoArray);
// saída: [ 2 ]
var outroArray = Array.of(1,2,3);
console.log(outroArray);
// saída: [ 1, 2, 3 ]
var arrayVazio = Array.of();
console.log(arrayVazio);
// saída: []

Como utilizar instâncias de array?

As instâncias de um array herdam de seu protótipo Array. Existem diversos métodos prototype disponíveis no objeto array que retornam novas instâncias com base em um array original. Acompanhe alguns deles a seguir.

Array.filter ()

O método array filter() faz uma busca em um array original e retorna os elementos encontrados em uma nova variável. Confira o exemplo abaixo.

var nomes = ['Silvia', 'Carlos', 'João', 'Maria', 'Paulo', 'Pedro'];
var nomesComP = nomes.filter(nome => nome.charAt(0) == "P" );
console.log(nomesComP);
// saída: [ 'Paulo', 'Pedro' ]

Nesse caso, utilizamos a função charAt(), que lê cada caractere de uma string, e comparamos com a letra que desejamos selecionar. Perceba que os resultados foram adicionados em um novo array, chamado nomesComP.

Array.map ()

Outro método que também retorna um novo array é o map (), que executa uma função callback para cada item e devolve o processamento em um novo array. No exemplo abaixo vamos transformar os itens da lista para letras maiúsculas. Confira a depuração do código, a seguir.

var listaNomes = [ 'Silvia', 'Carlos', 'João', 'Maria', 'Paulo', 'Pedro' ];
var nomesMaiuscula = listaNomes.map(nome => nome.toUpperCase());
console.log(nomesMaiuscula);
// saída: [ 'SILVIA', 'CARLOS', 'JOÃO', 'MARIA', 'PAULO', 'PEDRO' ]

Array.concat ()

O método concat () retorna um novo array por meio da união de outros arrays existentes. Confira o exemplo abaixo.

var listaMeninas = ["Silvia", "Maria", "Joana"];
var listaMeninos = ["João", "Paulo", "Pedro"];
var listaPessoas = listaMeninas.concat(listaMeninos);
console.log(listaPessoas);
// saída: [ 'Silvia', 'Maria', 'Joana', 'João', 'Paulo', 'Pedro' ]
var listaPessoas2 = listaMeninos.concat(listaMeninas);
console.log(listaPessoas2);
// saída: [ 'João', 'Paulo', 'Pedro', 'Silvia', 'Maria', 'Joana' ]

Nesse exemplo, criamos duas listas e utilizamos o método para concatená-las. Perceba que a ordem dos elementos será definida de acordo com o array que chama o método concat (). Fizemos duas simulações para ilustrar a diferença entre os resultados.

O JavaScript Array é um objeto da linguagem que funciona como uma estrutura para armazenar diferentes tipos de dados, entre eles, outros arrays, objetos e funções. Além disso, é um recurso que oferece diversos métodos e propriedades que ajudam em sua manipulação e no desenvolvimento de aplicações web com mais organização.

Gostou do nosso conteúdo sobre a utilização de arrays em JavaScript? Então, confira este guia inicial sobre expressões regulares, com dicas imperdíveis sobre esse recurso!