Em resumo, "undefined" significa que uma variável foi declarada, mas não foi inicializada com um valor. Já "null" é um valor atribuído intencionalmente para indicar que uma variável não tem um valor definido.
Exemplos:
let x;
console.log(x); // Variável não foi Declarada. RESULTADO: undefined
let y = null;
console.log(y); // Variável foi Declarada como NULL(Nula). RESULTADO: null
Complementando, undefined também pode ocorre nos casos em que você tenta acessar propriedades que não existem, por exemplo:
let array = [1, 2, 3]; // array com 3 elementos
console.log(array[10]); // undefined, pois o array não tem elemento na posição 10
let obj = { nome: 'Fulano' };
console.log(obj.idade); // undefined, obj não tem a propriedade "idade"
Claro que tem algumas pegadinhas. Por exemplo, se o objeto tiver uma propriedade, mas o valor dela for undefined, tem tomar cuidado na hora de verificar se ela existe:
let obj = { nome: 'Fulano' };
console.log(obj.idade); // undefined, obj não tem a propriedade "idade"
// false, pois obj não tem a propriedade "idade"
console.log(obj.hasOwnProperty('idade'));
obj.idade = undefined; // agora objeto tem a propriedade "idade"
console.log(obj.hasOwnProperty('idade')); // true, agora obj tem a propriedade "idade"
console.log(obj.idade); // mas o valor continua sendo undefined
Exato, valeu!
Para programar, iniciamos pela declaração e depois pela atribuição de valor a uma variavel.
undefined é uma excessão caracterizada pela tentativa de uso de uma variável sem declaração.
Null é o conteúdo ou valor para uma variavel sem valor atribuído.
As duas situações são resolvidas com uma programação disciplinada, independente da linguagem.
undefined é uma excessão caracterizada pela tentativa de uso de uma variável sem declaração.
Acredito que não seja o caso de variável sem declaração, mas sim sem atribuição de valor.
let a
// nesse momento, a variável existe, mas não há valor atribuído a ela
Interessante a leitura e a discussão posterior! realmente é algo que pode passar batido. Massa!
Curioso mesmo, veja:
No meu deu os dois, mas no editor de texto dá NULL mesmo.
Cuidado para não se confundirem!
O que acontece é que quando o console do Chrome identifica uma expressão que é válida mas não tem retorno ele retorna por padrão undefined.
Exemplo:
> function testeRetorno() {
return true;
}
<- undefined
A declaração de uma função não retorna nada, por isso o Chrome retorna por padrão undefined. Observe que ele coloca uma setinha antes deste valor, algo como <-
Agora observe o que ocorre quando você simplesmente escreve o nome da função no console e dá enter:
> testeRetorno
<- ƒ testeRetorno() {
return true;
}
Ele retorna o valor da variável teste retorno, que é uma função.
Por fim, ao executar essa função, como ela possui retorno, teremos true como retorno:
> testeRetorno()
<- true
"Então qual o motivo do console.log retornar dois valores?"
Ele não retorna dois valores! Ele primeiro imprime o valor solicitado e depois dá o retorno padrão quando a expressão não tem retorno, o undefined.
Perceba:
> console.log(3)
3 // valor solicitado para impressão
<- undefined // retorno padrão
Espero que tenha ajudado a entender essas diferenças. Qualquer dúvida só comentar.
Isso é porque o console do browser também mostra o retorno do console.log. E segundo a documentação, ele sempre retorna undefined.
Teste, por exemplo, com console.log(10). Vai mostrar o 10, e depois o undefined (primeiro ele imprime o 10, e depois o browser mostra o retorno do console.log).
Ou ainda, typeof console.log(10). Vai mostrar o 10 (pois é o console.log imprimindo o valor), e depois undefined, pois o retorno de console.log é o valor undefined.
Se você fizer isso fora do browser (por exemplo, num arquivo .js separado, e rodando com o Node), vai ver que no seu caso só vai imprimir null.
Ou ainda, outro teste. Crie uma função que imprime o valor, e retorna "ok":
function imprime(algo) {
console.log(algo);
return 'ok';
}
let teste = null;
imprime(teste);
No console do browser, vai imprimir null (o valor de teste), e depois vai mostrar 'ok' (o retorno da função imprime). Testando fora do browser, vai mostrar somente null.
Dessa eu não sabia, mas já suspeitava de que era padrão do console retornar isso. Valeu!
Já deram as melhores respostas possiveis em termos técnicos, pra acrescentar e ilustrar gostaria de mostrar em imagem bem didatica:
Obrigado!