Verificación de cadena vacía, null y undefined en JavaScript: guía completa

Entrenador de Python en Línea para Principiantes

Aprende Python fácilmente sin sobrecargarte de teoría. Resuelve tareas prácticas con verificación automática, recibe pistas y escribe código directamente en el navegador, sin instalar nada.

Start Course

Introducción: por qué esta tarea es más fácil de lo que parece

\n\n

Cada desarrollador que haya escrito al menos una vez en JavaScript se ha enfrentado a la situación de tener que verificar si una cadena está vacía, o si quizás es null o undefined. Parecería que no podría ser más sencillo. Pero seamos honestos: ¿cuántas veces escribiste if (str == "") y obtuviste un error cuando la variable resultó ser null? ¿Y cuántas veces intentaste llamar a .trim() en undefined y viste un error rojo en la consola?

\n\n

Este tema es una de las preguntas más populares en Stack Overflow con decenas de miles de visitas. Y con razón. En JavaScript hay muchos matices que convierten una simple verificación en un campo minado. En este artículo analizaremos todas las formas posibles, desde las más obvias hasta las profesionales, y descubriremos cuál es mejor usar en tu proyecto.

\n\n

Hablaremos sobre qué son los valores falsy, cómo funcionan los operadores == y ===, y por qué "" y 0 no son lo mismo que false. Al final del artículo sabrás exactamente cómo escribir una verificación universal que no falle.

\n\n

El problema: ¿qué se considera una cadena "vacía"?

\n\n

Antes de escribir código, debemos definir claramente qué estamos verificando. En el contexto de la pregunta "How do I check for an empty/undefined/null string in JavaScript?", normalmente nos referimos a tres estados:

\n\n
    \n
  • Cadena vacía ("" o '') — una cadena de longitud cero.
  • \n
  • null — ausencia intencional de valor.
  • \n
  • undefined — variable declarada pero no inicializada.
  • \n
\n\n

Pero también hay un cuarto caso implícito: una cadena que consiste solo en espacios (" "). A menudo también se considera "vacía" desde el punto de vista de la lógica de negocio. Analizaremos todas las variantes.

\n\n

Método 1: Conversión lógica (el más simple)

\n\n

La forma más popular y concisa es usar el hecho de que JavaScript convierte automáticamente los valores en true o false en un contexto booleano.

\n\n
let str = "";\n\nif (!str) {\n    console.log("La cadena está vacía, es null o undefined");\n} else {\n    console.log("La cadena no está vacía");\n}\n
\n\n

Este código funcionará para "", null, undefined, 0, NaN y false. ¿Por qué? Porque todos estos valores en JavaScript se consideran falsy. Si estás seguro de que la variable es una cadena (o puede ser null/undefined), este método es suficiente.

\n\n

Pero hay un inconveniente: si la variable es igual a 0 (un número), la verificación también dirá "vacío". Si esto es crítico, este método no es adecuado.

\n\n

Método 2: Comparación estricta (control explícito)

\n\n

Si quieres ser lo más preciso posible y verificar solo los tres estados mencionados, usa la comparación estricta (===).

\n\n
function isEmptyOrNull(str) {\n    return str === "" || str === null || str === undefined;\n}\n\nconsole.log(isEmptyOrNull(""));      // true\nconsole.log(isEmptyOrNull(null));    // true\nconsole.log(isEmptyOrNull(undefined)); // true\nconsole.log(isEmptyOrNull("hello")); // false\nconsole.log(isEmptyOrNull(0));       // false (el número no pasa)\n
\n\n

Este código funciona sin sorpresas. No confunde 0 o false con una cadena vacía. Pero no maneja cadenas con espacios.

\n\n

Método 3: Trim + verificación (para "verdadera" vacuidad)

\n\n

A menudo los usuarios ingresan espacios en un formulario, y la cadena " " se ve visualmente vacía. Para detectar también estos casos, necesitas recortar los espacios usando el método .trim().

\n\n
function isBlank(str) {\n    return !str || str.trim() === "";\n}\n\nconsole                

Blogs

Book Recommendations