Javascript: diferencia entre null y undefined

Publicado: 09/03/2013 en desarrollo, JavaScript, Programación
Etiquetas:, ,

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

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

Anuncios
comentarios
  1. Juan dice:

    Gracias!! me sirvio mucho

  2. Julio Sandino dice:

    Excelente articulo, me sirvio mucho

  3. Mauricio dice:

    Esta informacion me fue de gran utilidad muchas gracias por compartirla

  4. muchas gracias me fue muy util

  5. Excelente artículo, me sirvió de mucho, gracias.

  6. Jose Luis Uyuni dice:

    gracias me sirvio de mucho

  7. Dario dice:

    Perfecto!!! Me sirvió gracias!!!

  8. cormite dice:

    Agustín, como siempre, excelente y conciso. Muchas gracias.

  9. Iván Gabriel dice:

    Excelente. Gracias.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s