18

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".

1

3 Respostas 3

18

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
5
  • 2
    Faltou 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 retornar false.
    – mgibsonbr
    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
  • 1
    Isso é porque ele está interpretando x como "a coisa que você quer saber se existe". Se você fizer var x = "foo"; console.log(x in window); ele vai retornar false, mas se você fizer var x = "Number"; console.log(x in window); ele vai retornar true. E se você fizer var x = "undefined"; console.log(x in window); ele vai retornar true (pois window possui uma propriedade chamada undefined). x in window é mais ou menos como testar se window[x] existe. Por isso - embora esteja dando o valor correto por "coincidência" - é uma forma incorreta, pois se está testando outra coisa.
    – mgibsonbr
    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 de window; 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.
    – bfavaretto
    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
13

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.

9

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.

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 .