Javascript: diferencia entre null y undefined

You can read the English version of this post in http://phpsblog.agustinvillalba.com/javascript-difference-null-undefined/

Programando en JavaScript, seguramente todos alguna vez nos hemos encontrado en la situación de tener que ejecutar un bloque de código u otro dependiendo de si una variable es «null» o «undefined». Hoy vamos a analizar la diferencia que existe en JavaScript entre «null» y «undefined«, dado que hemos de ser muy cuidadosos a la hora de compararlos.

«undefined» en Javascript

En primer lugar, para poder hablar de null y undefined en Javascript hemos de tener claro que «undefined» es un tipo de dato, al igual que lo son el Number, String, Boolean, Object o el Array. En Javascript, a diferencia de otros lenguajes de programación con fuerte tipado, podemos tener variables de tipo «undefined». A priori puede sonar un poco extraño, pero si lo pensamos un momento, tiene sentido dado que Javascript, al ser un lenguaje débilmente tipado, nos permite declarar variables sin especificar de qué tipo serán los valores que contenga. De esa forma, Javascript considerará a la variable de un tipo de dato u otro en función de su contenido, por ejemplo:

var number1 = 123; // Tipo Number
var number2 = "123" // Tipo String
var number3;


En vista de que la variable «number3» no tiene un valor asignado, ¿de qué tipo es? Dado que todas las variables han de tener siempre un tipo, en este caso Javascript considera la variable «number3» de tipo undefined.

En resumen, en Javascript, todas aquellas variables que no han sido definidas (por lo tanto, no existen) o que han sido definidas sin asignárseles un valor, son siempre de tipo undefined.

«null» en Javascript

En Javascript, al igual que en otros muchos lenguajes de programación, el valor «null» es un valor especial. El valor null es en sí mismo un valor, pero un valor que indica la ausencia de contenido, el valor vacío. Si escribimos el siguiente código:

var number1 = null;

¿De qué tipo es la variable «number1» ahora? Para Javascript, dado que a la variable number1 se le ha asignado el valor null, es una variable de tipo Object ahora mismo.

Comparando null y undefined

Hemos de tener mucho cuidado a la hora de comparar variables que tienen asignados el valor null o no tienen valores asignados aún, dado que podemos obtener resultados erróneos o confusos de dicha comparación. Supongamos que tenemos la siguiente situación:

var variable1; //Tipo undefined
var variable2 = null; //Tipo Object, valor null


Y realizamos las siguientes comparaciones utilizando el operador de igualdad:

1. if (variable1 == variable2) // true, incorrecto
2. if (variable1 == null) //true, incorrecto
3. if (variable1 == "undefined") //false, correcto


Analicemos cada una de las comparaciones:

1 y 2 ¿Por qué se evalúan como true? Estas comparaciones se evalúan como verdaderas porque para Javascript, dado que variable1 no tiene ningún valor asignado y variable2 tiene asignado el valor vacío, las considera iguales en cuanto a su contenido. Es peligroso realizar esta comparación, dado que como podemos comprobar, ambas variables no son iguales. Se puede realizar este tipo de comparación siempre y cuando no nos importe tratar a una variable undefined como si contuviera el valor null.

3. ¿Por qué se evalúa como false? Esta comparación se evalúa como falsa porque estamos comparando una variable que no tiene ningún valor asignado con un literal que si posee contenido, la cadena «undefined», como una palabra en sí. Dado que variable1 no contiene la cadena «undefined», la condición se evalúa como falsa. Si lo que necesitamos es averiguar si una variable es de tipo «undefined», esta no es la solución.

Entonces, ¿como podríamos realizar dichas comparaciones y estar seguros de que se evalúan correctamente? Para ello hemos de utilizar el operador de identidad (===):

1. if (variable1 === variable2) //false, correcto
2. if (variable1 === null) // false, correcto


Como bien sabemos, el operador de identidad no sólo compara los valores de ambas variables, sino que también hace comprobación de tipos. Por lo que ahora sí obtenemos los resultados correctamente. Al realizar la comparación, dado que variable1 (de tipo undefined) y variable2 (de tipo Object) son de tipos diferentes Javascript nos devuelve falso en ambos casos.

Resumiendo

Si lo que necesitamos es saber simplemente si una variable tiene el valor null o no ha sido definida, podemos utilizar el operador de negación:

var data;
if (!data) //true

Si necesitamos saber si una variable contiene realmente el valor null, hemos de utilizar el operador de identidad:

var data = null;
if (data === null) //true

Si necesitamos saber si una variable es de tipo undefined, para ello hemos de utilizar el operador typeof, el cual retorna en formato String, el nombre del tipo de dicha variable:

var data;
if (typeof(data) == "undefined") //true

Con esto ya tenemos un poco más claro cómo podemos comparar variables a las que no se les ha asignado un valor y variables con valor null. También hemos aprendido cuál es realmente la diferencia que Javascript hace entre undefined y null.

You can read the English version of this post in http://phpsblog.agustinvillalba.com/javascript-difference-null-undefined/