Aspectos teóricos
Semanticamente, undefined
significa "sem referência" e null
significa "sem valor". Ou como colocado por @Calebe Oliveira, "Se algum método retornar undefined
, indica que determinada propriedade não existe" e se ele retorna null
"a propriedade chamada existe, mas não possui um valor". Conforme a Wikipedia (tradução livre, ênfase minha):
Na computação (em particular, na programação), valor indefinido é uma condição em que uma expressão não possui um valor correto, embora seja sintaticamente correta. Um valor indefinido não deve ser confundido com a string vazia, o booleano "falso" ou outros valores "vazios" (porém definidos). Dependendo das circunstâncias, uma avaliação resultante em um valor indefinido pode causar uma exceção ou comportamento indefinido, mas em algumas linguagens de programação valores indefinidos podem ocorrer durante o curso normal, previsível, da execução de um programa.
A linguagem JavaScript não usa esses conceitos dessa forma, dando uma definição precisa porém bastante distinta (como demonstrado na citação feita por @bfavaretto da especificação ECMAScript), e há quem argumente que a semântica do null
é você quem define, conforme sua interpretação. A razão é que - quando se trata de variáveis, a coisa é bem mais complexa - como mostra a seção que trata de referências (tradução livre, ênfase minha):
Uma Referência é a resolução de um binding nome[-valor]. Uma Referência consiste em três componentes, o valor base, o nome referido e a flag de referência "strict" (de valor booleano). O valor base é um dos: undefined
, um objeto, um booleano, uma string, um número, ou um registro do ambiente [de execução]. Um valor base indefinido indica que a referência não pode ser resolvida em um binding. O nome referido é uma string.
Ou seja, se uma expressão não se resolver em um binding (i.e. a referência não existe) seu valor base é undefined
e seu acesso acarreta em um ReferenceError
; se a referência exstir, mas nunca tiver sido atribuída, seu valor é undefined
. Já o null
também representa um "valor vazio", mas somente aparece quando explicitamente definido como tal - variáveis não inicializadas jamais terão o valor null
.
var a = 10, b = null, c;
console.log(a); // 10
console.log(b); // null
console.log(c); // undefined
console.log(d); // Uncaught ReferenceError: d is not defined
Na prática
Diversos aspectos práticos foram bem abordados nas demais respostas, mas gostaria de complementá-las com as seguintes observações:
Programaticamente, não é possível distinguir entre uma propriedade inexistente e uma com valor undefined
:
var x = {};
console.log(x.foo); // undefined
console.log(x); // Object {}
x.foo = undefined;
console.log(x.foo); // undefined
console.log(x); // Object {foo: undefined}
delete x.foo;
console.log(x.foo); // undefined
console.log(x); // Object {}
...a menos que se itere sobre suas propriedades (ou técnicas similares, reflexivas):
for ( var p in x )
console.log(p); // Vai imprimir "foo" se x == Object {foo: undefined}
Por essa razão, deve-se ter cuidado caso se utilize duck typing com objetos que podem possuir valores ausentes (i.e. deve-se de fato usar null
para representar esses valores).
Essa diferença é observada quando um objeto é serializado em outro formato. Por exemplo, ao montar uma requisição Ajax ou se converter para o formato JSON:
$.get(url, { foo:undefined, bar:null }); // http://example.com/?bar=
JSON.stringify({ foo:undefined, bar:null }); // {"bar":null}
Isso possui importância prática, pois o código consumidor do objeto serializado pode tratar diferentemente "propriedade ausente" e "valor ausente" (ex.: Python lança um KeyError
ao consultar uma chave ausente num dict
- mas se comporta normalmente quando a chave existe mas seu valor é None
). Assim, se seu objeto for em algum momento transmitido a um sistema externo, é importante usar esses tipos consistentemente e/ou normalizar o objeto antes da serialização (conforme o comportamento desejado).
Muitas vezes é mais conveniente utilizar undefined
do que null
, pois pode-se expressar a ausência de um valor pela simples ausência de código. Exemplo:
function teste(obrigatorio, opcionais) {
var acc = obrigatorio;
acc -= (opcionais.foo || 1);
acc -= (opcionais.bar || 2);
acc -= (opcionais.baz || 3);
if ( acc >= 0 )
return acc;
}
var resultado = teste(10, { foo:20 });
if ( resultado ) { ... }
A solução "semanticamente correta" seria retornar null
no final da função (em vez de deixá-la implicitamente retornar undefined
), além de passar os argumentos opcionais como { foo:20, bar:null, baz:null }
. Admitir o uso de undefined
nesses casos torna o código mais conciso, sem nenhum efeito indesejável (a menos é claro que os resultados interajam com sistemas externos - como exposto no item acima).
Misturar null
e undefined
não causa tantos problemas, na verdade tratá-los como iguais é bem fácil (como citado de passagem em todas as outras respostas, mas sem aprofundar no assunto). Às vezes não é correto testar um valor somente como "truey" ou "falsey" - pois um valor 0
, false
ou ainda a String vazia (""
) ainda é considerado um valor presente - de modo que um teste explícito é necessário.
Entretanto, como o operador ==
considera null
e undefined
equivalentes (e a mais nada), não é necessário se testar por ambos caso a entrada misture os dois. O exemplo do item anterior (que poderia retornar zero como valor válido) seria reescrito como:
var resultado = teste(10, { foo:20 });
if ( resultado != null ) { ... }
// ou
if ( resultado != undefined ) { ... }
(a primeira opção é preferível - além de mais curto, é semanticamente mais preciso, ao menos conforme a intenção do código)