Como popular um Array no Javascript

A criação de arrays é uma tarefa cotidiana para um programador. Não é diferente para o programador Javascript, todos os dias as listas de dados estão em nossas mãos para trabalharmos com elas. O fato é que existem várias formas de criar um array e popular ele com dados. 

Hoje vou ensinar a você algumas formas de como criar um array e alguns erros que você deve evitar enquanto fizer isso.

Array.fill

var meuArray = new Array(10).fill(‘ola’);

A primeira opção para popular um array é o Array.fill, esta opção é bastante comum e útil para variáveis imutáveis, como Numbers, Strings e Booleans. Mas e se eu quiser trabalhar com um array de objetos? Será que ela pode me atender?

var meuArray = new Array(10).fill({ nome: “João da Silva” });

Neste caso, se em algum momento eu quiser acessar um dos itens do array desta forma:

meuArray[0].nome = “Maria”;

Eu vou passar a ter problemas. Como que eu estou criando a mesma instância de Objeto para todos os itens do array, ou passando a mesma referência, ao tentar alterar um item, eu vou acabar alterando todos os demais. Assim diz a documentação do Array.fill:

O método fill() preenche todos os valores do array a partir do índice inicial a um índice final com um valor estático.

MDN Web docs

Se você quiser preencher o array com objetos que possam ser acessados em instâncias diferentes você vai precisar utilizar o map(), este vai lhe permitir inserir novos itens, sem que eles tenham a mesma referência.

var meuArray = new Array(10).fill(null).map(function (valor, index) {
    return { id: index, nome: “João da Silva” };
});

Desta forma nós estamos criando um array vazio e depois estamos alterando o valor de cada item específico do nosso array. Sendo assim, nós temos objetos totalmente independentes uns dos outros. Se você tentar alterar o nome novamente, você vai alterar um item específico e não todos os itens, como anteriormente.

Utilizando o loop for

Utilizar o loop for é uma outra forma de criar um array. Esta forma é mais old school, mas ainda tem as suas aplicações em alguns casos específicos.

var meuArray = new Array(10);
 
for (var i = 0; i < meuArray.length; i++)
{
    meuArray[i] = { id: i, nome: “Jonatan” };
}

Uma das vantagens de se trabalhar com o for é que você pode parar o loop quando alguma condição acontecer. Por exemplo: Se eu tiver um item com o id = 3.

var meuArray = new Array(10);

 

for (var i = 0; i < meuArray.length; i++)
{
    if (i == 3)
    {
        break;
    }
    meuArray[i] = { id: i, nome: “Jonatan” };
}

Utilizando o Array.from

Segundo a documentação do Array.from:

O método Array.from() cria uma nova instância de um Array quando for passado um array-like ou um iterable object como argumento.

No  ES6, a sintaxe de classe permite a subclassificação de classes nativas e classes definidas pelo usuário; como resultado, os métodos estáticos pertencentes a classe, comoArray.from, são "herdadas" por subclasses do Array e criam novas instâncias dasubclasse, não do Array.

MDN Web docs

Basicamente, você pode criar um array de qualquer coisa que você possa iterar, ou seja, possa percorrer utilizando um loop for, por exemplo.

var meuArray = Array.from({ length: 10 }, function (val, index) {
    return { id: index, nome: “João da Silva” };
});
 
console.table(meuArray);

Nesta forma de utilizar o Array.from estamos passando 2 argumentos para a função. O primeiro é um objeto, que especifica qual o length (tamanho) do array que queremos criar. O segundo parâmetro atua como uma função Map, lembrando que esta função tem os mesmos parâmetros de um forEach. Retorne o objeto que você quer montar e está pronto o seu array. Depois disso é só partir pro abraço! 

Referências

Array.from MDN Web Docs

Array.fill MDN Web Docs

Jonatan Pietroski

20 de junho de 2019

Jonatan Pietroski é um Analista de Sistemas especialista em tecnologias WEB. Apaixonado pelo o que faz, Jonatan tornou-se um Evangelista Javascript, ensinando novos Alunos à iniciar na carreira de programador.

Leave a comment

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Copyright © – Jonatan Pietroski