Javascript: Conocer si una variable u objeto existe (diferencia entre null y undefined)

 

Actualizado: Si trabajas con jQuery y quieres saber si un selector existe en la página, revisa esta entrada.

Trabajar en Javascript implica, entre otras cosas, acceder a variables y objetos. Y siempre que accedemos a éstos nos hemos de asegurar de que existen, o correremos el riesgo de provocar un error que impida que se ejecute el resto del script.

Javascript tiene dos formas de avisarnos de que algo pasa con la variable u objeto al que deseamos acceder: las palabras null y undefined. La diferencia entre ambas radica en que mientras que undefined nos informa que el objeto o variable no está definido, null es un objeto vacío. Entonces, un objeto o variable contendrá algún valor, o será null o undefined. Pero, ¿cuándo es null y cuándo undefined? El siguiente ejemplo nos lo dejará más claro:

var obj1;
var obj2 = null;
alert(obj1); // la respuesta es undefined
alert(obj2); // la respuesta es null
alert(obj3); // se produce un error

Como vemos, en el primer caso declaramos una variable sin inicializarla, y la respuesta de hacer un alert sobre ella es un mensaje «undefined«.

En el segundo caso, declaramos una variable y la inicializamos a null; la respuesta al alert es un mensaje «null«.

El el tercer caso, al intentar hacer un alert de una variable que ni siquiera está inicializada, se produce un error y se detiene la ejecución del script.

Veamos ahora qué tipos contienen cada una de éstas variables:

alert(typeof obj1); // la respuesta es undefined
alert(typeof obj2); // la respuesta es object
alert(typeof obj3); // la respuesta es undefined

Vemos que para el primer ejemplo, es «undefined«, mientras que el segundo es «object«, porque null es un objeto, como ya se comentó. La diferencia es que en el tercer ejemplo nos informa que la variable obj3 es «undefined«, pero no se detiene la ejecución del código.

Entonces, para comprobar si una variable u objeto existe o está inicializada, podemos hacer lo siguiente:

if (typeof obj3 == "undefined"){
    alert("Variable obj3 no definida");
}

Otro detalle a tener en cuenta es que una función siempre retornará un valor, aunque sea un null. Entonces, si intentamos obtener un objeto que no existe en el documento, obtendremos un null, pero no se detendrá la ejecución:

alert("existe elemento pepe? "+document.getElementById("pepe"));

Obtendremos el mensaje «existe el elemento pepe? null«.

Por último, es interesante saber también que el operador typeof también se puede aplicar a funciones, y su respuesta será «function» si ésta existe, o «undefined» si no.

if (typeof miFuncion != "undefined"){
    miFuncion();
}

Estas validaciones siempre deberían hacerse para obtener un código menos propenso a fallos. Imaginaos una respuesta AJAX que por algún caso no devuelviera una variable con la cual contábamos. ¿Permitirías que el resto de scripts de tu página se detuvieran por ahorrarte una línea de código?