Antes de mais nada, vale lembrar que Undefined
é um dos tipos definidos pela linguagem (assim como String
, Number
, Boolean
, etc). E a especificação diz o seguinte:
The Undefined type has exactly one value, called undefined. Any variable that has not been assigned a value has the value undefined.
Ou seja, o tipo Undefined
possui apenas um valor, que é undefined
. E qualquer variável a qual não foi atribuído um valor, tem o valor undefined
.
Ou seja, ao fazer apenas let variavel;
, a variável possui o valor undefined
(e só para deixar mais confuso, ainda existe uma propriedade do objeto global chamada undefined
cujo valor é - adivinhe - undefined
).
Quanto a arrays, é um pouco mais complicado. Segue explicação baseada nesta resposta do SOen.
O construtor Array(n)
, quando chamado com apenas um argumento, e este argumento é um número inteiro, retorna um array cujo tamanho (ou seja, cujo valor da propriedade length
) é este número.
Mas ao tentar acessar qualquer um dos elementos do mesmo, o retorno é undefined
:
let x = Array(2);
console.log(x.length); // 2
console.log(x[0], x[1]); // undefined, undefined
console.log(x);
Obs: na última linha podem haver divergências quanto à saída. Rodando no snippet do site, eu obtive [undefined, undefined]
, mas próprio console do Chrome, o retorno foi [empty x 2]
e no Node foi [ <2 empty items> ]
.
O que acontece é que, apesar de parecer, Array(2)
não é a mesma coisa que [undefined, undefined]
. Por exemplo, se mapearmos cada elemento do array para algum valor qualquer, usando map
:
console.log([undefined, undefined].map(e => 1)); // [1, 1]
console.log(new Array(2).map(e => 1));
Sobre a última linha, novamente houve a divergência: no snippet do site, a saída foi [undefined, undefined]
e no Chrome e Node a saída foi respectivamente [empty x 2]
e [ <2 empty items> ]
.
Enfim, segundo a especificação, o construtor Array(tamanho)
só cria um array cujo valor da propriedade length
é o tamanho informado, e só. Nenhum elemento de fato foi criado dentro dele.
Por isso ao percorrê-lo com map
o resultado continua sendo "2 empty items", pois a especificação diz que map
verifica se a propriedade do array (o índice, no caso) existe. Mas o array criado com Array(tamanho)
não possui essas propriedades:
function verificarIndices(array) {
for (let i = 0; i < array.length; i++) {
console.log(`tem ${i}? ${array.hasOwnProperty(i)}`);
}
}
console.log('array de undefined');
verificarIndices([undefined, undefined]); // imprime "true" para os índices
console.log('Array(2)');
verificarIndices(Array(2)); // imprime "false" para os índices
console.log(Object.getOwnPropertyNames([undefined, undefined])); // ['0', '1', 'length']
console.log(Object.getOwnPropertyNames(new Array(2))); // ['length']
O que nos leva a concluir que o array não possui elementos, e undefined
é apenas um valor que é retornado quando um elemento não existe. Afinal, é isso que ocorre quando acessamos um índice que não existe:
let x = [1, 2, 3];
console.log(x[999]); // undefined
Por fim, outra forma de ver que o array criado por Array(n)
não tem índices (e portanto podemos concluir que não tem os respectivos elementos):
console.log('percorrendo [undefined, undefined]');
for (let i in [undefined, undefined])
console.log(i); // imprime 0 e 1
console.log('percorrendo Array(2)');
for (let i in Array(2))
console.log(i); // não imprime nada
console.log('--------');
console.log(Object.keys([undefined, undefined])); // [ '0', '1' ]
console.log(Object.keys(Array(2))); // []
E quanto ao comentário sobre toString
, a especificação diz que toString
chama internamente o método join
sem argumentos. E quando join
é chamado sem argumentos, a especificação diz que é usada uma vírgula como separador. O algoritmo também diz que, se o elemento for undefined
ou null
, é usada a string vazia no lugar. E como já vimos que o acesso aos elementos não existentes de Array(2)
retorna undefined
, o resultado de toString
será um monte de vírgulas (para ser mais preciso, em um array de tamanho N, serão N - 1 vírgulas).