3

Neste trecho de código:

let arr = []; 
arr[3] = null;

O seguinte trecho arr[3] = null; faz com que o array tenha tamanho de acordo com o valor dentro da anotação de array []. O forEach vai ser usado para trabalhar com os índices desse array.

var arr2 = []

arr2[2] = null

console.log(arr2)

// vai exibir somente o 'null 2'
arr2.forEach((el, i) => {
 console.log(el, i)
})

Se executar o seguinte código acima no navegador, o console.log(arr2) vai exibir algo como:

(3) [empty × 2, null]

No snippet do SO, ele exibe undefined, não sei porquê...

Com base nisso, eu pergunto:

  • Esse "valor" empty não é iterável pelo método forEach? E pelo outros métodos funcionais(map, filter, ...)?
  • Esse empty pelo visto não é o mesmo que undefined, certo? O que é esse valor?
3
  • 1
    Relacionado (e talvez dup): pt.stackoverflow.com/q/471070/112052
    – hkotsubo
    27/05/2021 às 22:41
  • 1
    @hkotsubo, de fato relacionada, mas, duplicada, acho que não. O foco da pergunta é outro, a sua resposta tangencia este assunto em razão do grande aprofundamento. Se é duplicata... Eu diria que não. 27/05/2021 às 22:52
  • 1
    @hkotsubo realmente tem uns pontos interessantes na P/R. Mas a intenção era falar sobre específicamente os "buracos" de array. Eu concordo com o Felipe nesse caso. Mas obrigado assim mesmo :D 27/05/2021 às 23:20

1 Resposta 1

3

Parabéns, você acabou de descobrir os arrays esburacados em JavaScript!


Quando você cria um array e atribui a ele um valor num índice além de seus limites, ele irá "esburacar" o array. Por exemplo:

let arr = [];
arr[3] = 'Final element'; // Atribui essa string ao quarto elemento (índice 3).

Ao tentar avaliar arr no Console do Chrome, por exemplo, será imprimido algo do tipo:

(4) [empty × 3, "Final element"]

Repare que, de fato, o array tem length 4, já que foi o último índice atribuído. No entanto, os três primeiros elementos do array são... empty.

Com exemplos como esse, muitas pessoas pensam que esse empty é um outro tipo de valor do JavaScript, como um undefined ou null. Contudo, empty não existe no JavaScript. Ele só foi impresso pelo Console para demonstrar posições do array que não possuem elementos.

Um array em JavaScript nada mais é que um mero objeto. Desse modo, um array como ['a', 'b', 'c'], de modo bem simples, pode ser resumido a isto:

{
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
}

De modo que um array esburacado não possui todos os índices na sequência numérica esperada. Voltando ao exemplo do início desta resposta, o array arr poderia ser resumido a:

{
  3: 'Final element',
  length: 4
}

E é exatamente isso que o empty impresso no Console representa! A ausência completa da propriedade. É a mesma coisa que um objeto sem uma determinada propriedade.

Quando um programador cria um array esburacado e tenta acessar uma posição vazia, retorna-se undefined. É a mesma coisa que tentar acessar uma propriedade que não existe em um objeto, afinal, arrays são objetos em JavaScript.

Repare que isso não significa que o array tem um índice com elemento undefined. Ele simplesmente não tem nada ali.


Isso significa que o array deixa de ser iterável?

Não, de modo algum.

Formalmente falando, um "iterável" em JavaScript é todo valor que implementa um iterador qualificado sob o nome simbólico @@iterator. No caso de arrays esburacados, esse método não deixa de existir. Veja:

let arr = [];
arr[3] = 'Final element';

// Continua sendo iterável. Pode-se testar isso consumindo o iterador via `for..of`.
for (const element of arr) {
  console.log(element);
}

A especificação define que elementos vazios devem constar, no protocolo de iteração padrão de arrays, como undefined. O exemplo acima demonstra isso.

Repare que o protocolo de iteração consome, na totalidade, todas as posições do array (incluindo as posições vazias, nesse caso, gerando undefined).


E quanto ao for "clássico"?

Nada impede também de percorrer o array desde o índice zero até seu comprimento, não inclusivo. Veja:

let arr = [];
arr[3] = 'Final element';

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

O que acontece no exemplo acima é que estamos, literalmente, tentando acessar propriedades qualificadas por números de 0 até o comprimento do array menos 1. Naturalmente, em arrays esburacados, alguns desses índices não serão propriedades existentes, casos nos quais undefined é retornado.

Com o for "clássico" podemos atestar, ainda, que os elementos vazios não são, de fato, propriedades do array. O undefined que é impresso no exemplo acima se deve a uma tentativa de propriedade não existente ao objeto array. Esse comportamento já foi explicado anteriormente nesta resposta.

Veja que elementos vazios não são, de fato, propriedades:

let arr = [];
arr[3] = 'Final element';

for (let i = 0; i < arr.length; i++) {
  console.log(`Has element at index ${i}? ${i in arr}`);
}


E quanto aos métodos do Array.prototype, tal como forEach ou map?

Nesse caso pode haver estranhamento. JavaScript sendo JavaScript.

Métodos do Array.prototype tais como forEach, map, filter, reduce, some, every (e outros) não operam sobre elementos que não existem no array.

Desse modo, esse tipo de método simplesmente irá ignorar membros vazios.

Isso implica que, no caso de você ter um array com quatro posições, mas sendo três delas vazias, somente uma iteração será aparente ao programador. Repare no "aparente" porque, internamente, todos os índices até length - 1 são percorridos, mas a especificação não invoca o callback dos referidos métodos para elementos que não existem como propriedade.

Por exemplo, veja este forEach e map:

let arr = [];
arr[3] = 'Final element';

// O callback será invocado somente uma vez:
// Somente uma mensagem será impressa:
arr.forEach((element, index) => {
  console.log(`At index ${index}, the element is: ${element}`);
});

// O callback será invocado somente uma vez:
const mapped = arr.map((element, index) => {
  return `At index ${index}, the element is: ${element}`;
});

// OS BURACOS SÃO MANTIDOS no array mapeado.
// O snippet do SOpt mostra de modo incorreto.
// Saída esperada: (4) [empty × 3, "At index 3, the element is: Final element"]
console.log(mapped);

Esse tipo de comportamento está previsto na especificação para cada um dos referidos métodos. Por exemplo, no caso de forEach, podemos referir à seção 22.1.3.12, que, em resumo:

  • Para cada índice Pk (Pk < length) do array,
    • Se o array (objeto) possui propriedade cuja chave é Pk, invocar o callback.
    • Caso contrário, incrementar o índice.

Repare que a especificação explicitamente define que índices que não reflitam uma propriedade no objeto array não devem invocar o callback do forEach. Regras similares a essa existem para filter, map, reduce, etc.


Em suma, pense nos buracos de arrays como um índice que, literalmente, não existe no array.

Apenas por curiosidade, arrays totalmente vazios podem ser criados pelo construtor Array invocado como função. Por exemplo, Array(5) criará um array com length 5, sendo seus "5 elemento" vazios. Nesse caso, isso implica que somente a propriedade length estará definida nesse array.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .