Qual é a melhor maneira de verificar se um elemento/variável é undefined
no Javascript?
Já vi alguns exemplos usando variavel === undefined
e outros usando typeof variavel == "undefined"
.
-
Relacionado (mas no meu entender, não é uma duplicata): pt.stackoverflow.com/questions/19273/…– bfavarettoCommented 5/08/2015 às 1:05
3 Respostas
O mais correto é utilizar typeof variavel === "undefined"
, pois undefined
pode ser sobrescrito utilizando window.undefined
, fazendo com que a comparação variavel === undefined
retorne valores inesperados.
Na versão 5 do ECMAScript, não é possível mais sobrescrever window.undefined
, embora por compatibilidade com engines mais antigas seja recomendado não utilizar este formato de comparação.
Observação: algumas pessoas utilizam if ( variavel ) {
para checar se a variável esta definida. Isto não é confiável, pois variavel
pode ter valores que são interpretados como false
, e portanto não entrando no if
mesmo que a variável esteja definida.
Se o que você deseja é verificar se variavel
foi declarada, você deve utilizar o operador in
. Isto acontece pois quando uma variável é declarada, mas não é inicializada explicitamente, implicitamente ela é inicializada com o valor undefined
. Logo:
console.log(typeof x === "undefined"); // true
console.log("x" in window); // false
var x;
console.log(typeof x === "undefined"); // true
console.log(x in window); // true
-
2Faltou aspas no
"x" in window
. E a propósito, esse teste só se aplica no top-level, certo? Ex.:(function() { var x; console.log(x in window); })();
ainda vai retornarfalse
. Commented 5/08/2015 às 2:13 -
Sem ler a especificação do JS eu não sei argumentar, mas, se você executar:
(function test() { var x; console.log("x" in window); })();
o resultado éfalse
. Mas, se você executar(function test() { var x; console.log(x in window); })();
, o restultado étrue
. Testei isso utilizando o console de desenvolvedor do Chrome. Talvez o comportamento seja um pouco diferente quando executado dentro de uma página de verdade. Sobre as aspas, no primeiro teste (console.log(x in window); // false
), elas são realmente necessárias. No segunto, elas interferem no resultado. Commented 5/08/2015 às 2:24 -
1Isso é porque ele está interpretando
x
como "a coisa que você quer saber se existe". Se você fizervar x = "foo"; console.log(x in window);
ele vai retornarfalse
, mas se você fizervar x = "Number"; console.log(x in window);
ele vai retornartrue
. E se você fizervar x = "undefined"; console.log(x in window);
ele vai retornartrue
(poiswindow
possui uma propriedade chamadaundefined
).x in window
é mais ou menos como testar sewindow[x]
existe. Por isso - embora esteja dando o valor correto por "coincidência" - é uma forma incorreta, pois se está testando outra coisa. Commented 5/08/2015 às 2:52 -
O @mgibsonbr tem razão. E veja esse seu exemplo:
(function test() { var x; console.log(x in window); })();
. Isso não cria uma variável global (ou seja, propriedade dewindow
; cria uma local. O que você está testando é se existe uma propriedade chamada "undefined" (que é o valor de x) em window, por isso dá true. Commented 6/08/2015 às 2:36 -
Essa postagem sempre me serve como referência. Na verdade, a resposta abaixo também. Rs Commented 7/10/2021 às 13:37
As duas verificações que você mencionou servem para coisas diferentes.
1. Variáveis não declaradas
Se uma variável não foi declarada, com var variável = ...
, você não pode usá-la em comparações de igualdade como if(variavel === undefined)
. Isso lança um erro porque a variável não existe.
Porém, o operador typeof
aceita um operando que não exista. Por isso, pode-se usar typeof variavel == "undefined"
para essa verificação. E esse teste com typeof
também servem para verificar o segundo caso:
2. Variáveis cujo valor é undefined
Uma variável existente pode conter o valor undefined
. Nesse caso, é equivalente verificar com variavel === undefined
ou typeof variavel == "undefined"
– exceto no caso de a variável global undefined
ter sido sobrescrita como o Vinícius citou na resposta dele, mas isso não é mais permitido pelos browsers modernos.
Depende do que você quer testar:
Se existe ou não uma variável com esse nome
Nesse caso, eu tentaria fazer uma operação com ela e observaria um ReferenceError
:
var x;
try {
x + 1;
document.body.innerHTML += "<pre>x existe</pre>";
} catch(e) {
if ( e instanceof ReferenceError )
document.body.innerHTML += "<pre>x não existe</pre>";
else
throw e;
}
try {
y + 1;
document.body.innerHTML += "<pre>y existe</pre>";
} catch(e) {
if ( e instanceof ReferenceError )
document.body.innerHTML += "<pre>y não existe</pre>";
else
throw e;
}
Se existe ou não uma variável global com esse nome
Nesse caso (e somente nesse caso) pode-se testar por sua presença no objeto global (nos browsers, window
), como apontado na resposta do Vinícius:
var a;
document.body.innerHTML += "<pre>a " + ("a" in window ? "" : "não ") + "existe.</pre>";
document.body.innerHTML += "<pre>b " + ("b" in window ? "" : "não ") + "existe.</pre>";
// Não funciona com variáveis locais a uma função
(function() {
var c;
document.body.innerHTML += "<pre style='color:red'>c " + ("c" in window ? "" : "não ") + "existe.</pre>";
document.body.innerHTML += "<pre>d " + ("d" in window ? "" : "não ") + "existe.</pre>";
})();
Se uma variável (existente ou não) é undefined
Como apontado por bfavaretto, uma variável pode ser existente, válida, até já ter tido valor em algum momento, mas num determinado ponto ela pode ter recebido o valor undefined
. Em muitos casos essa situação é indistinguível do caso em que a variável simplesmente não existe. Mas se você só quer saber se ela é diferente de undefined
- i.e. se ela é definida - você pode usar o typeof
:
var a = 10;
var b;
document.body.innerHTML += "<pre>a" + (typeof(a) == "undefined" ? " não" : "") + " está definida.<pre>";
document.body.innerHTML += "<pre>b" + (typeof(b) == "undefined" ? " não" : "") + " está definida.<pre>";
document.body.innerHTML += "<pre>c" + (typeof(c) == "undefined" ? " não" : "") + " está definida.<pre>";
Ok, e em que situação eu posso comparar diretamente com undefined
?
Comparar com undefined
(ou com void(0)
) provocará uma resposta diferente em cada um dos três casos acima: lançará uma exceção se a variável não existe, retornará true
se ela existe mas possui o valor undefined
, ou retornará false
se ela existe mas possui outro valor. Note que a comparação sempre deve ser feita com ===
ou !==
, nunca ==
ou !=
(já que estas últimas são por demais imprevisíveis para se usar com segurança).
"use strict";
var a = 10;
var b;
try {
document.body.innerHTML += "<pre>a" + (a === undefined ? " não" : "") + " está definida.</pre>";
document.body.innerHTML += "<pre>b" + (b === undefined ? " não" : "") + " está definida.</pre>";
document.body.innerHTML += "<pre>c" + (c === undefined ? " não" : "") + " está definida.</pre>";
} catch(e) {
document.body.innerHTML += "<pre>Erro: tentativa de acessar uma variável inexistente.</pre>";
}
Pessoalmente, eu considero ok essa forma, pois em geral acessar uma variável que não foi definida é um erro de programação, não algo que você vá querer testar em execução (exceto para fins de depuração, é claro). Usar simplesmente variavel === undefined
e deixar a exceção propagar, caso variavel
não exista, me parece uma forma adequada de programar.
Você pode ter um try..catch
"genérico" só pro programa não "explodir" caso um erro desses passe despercebido, mas na minha opinião é inútil tentar tratar essa exceção. Pois como essa situação é inesperada (se fosse esperada, você simplesmente a corrigiria e declararia a variável!), dificilmente seu programa poderá se recuperar desse erro.