Original article: Cannot Read Property 'split' of Undefined

Si alguna vez has usado el método split de JavaScript, hay una buena chance que te has encontrado con el siguiente error: TypeError: Cannot read property 'split' of undefined esto es TipoDeError: No se puede leer la propiedad 'split' de undefined.

Hay un par de razones de por qué recibirías este error. Lo más posible es que solo sea un malentendido de cómo split funciona y como iterar sobre los arreglos.

Por ejemplo, si intentas enviar el siguiente código para el desafío Encontrar la Palabra Más larga en una Cadena:

function encontrarPalabraMasLarga(cad) { 
  for(let i = 0; i < cad.length; i++) {
    const arreglo = cad.split(" ");
    arreglo[i].split("");
  }
}

encontrarPalabraMasLarga("El zorro marrón veloz saltó sobre el perro perezoso");

Lanzará el error TypeError: Cannot read property 'split' of undefined.

El método split

Cuando split es llamado sobre una cadena, divide la cadena en subcadenas basado en el separador pasado como argumento. Si se pasa una cadena vacía como argumento, split trata cada carácter como una subcadena. Luego regresa un arreglo conteniendo las subcadenas: 

const pruebaCad1 = "Prueba prueba 1 2";
const pruebaCad2 = "magdalena tortita";
const pruebaCad3 = "Primero,Segundo,Tercero";

pruebaCad1.split(" "); // [ 'Prueba', 'prueba', '1', '2' ]
pruebaCad2.split(""); // [ 'm', 'a', 'g', 'd', 'a', 'l', 'e', 'n', 'a', ' ', 't', 'o', 'r', 't', 'i', 't', 'a' ]
pruebaCad3.split(","); // [ 'Primero', 'Segundo', 'Tercero' ]

Chequea MDN para más detalles sobre split.

El problema explicado con ejemplos

Sabiendo qué regresa el método split y cuántas subcadenas puedes esperar es la clave para resolver este desafío.

Miremos otra vez al código de arriba y veamos por qué no está funcionando como se espera: 

function encontrarPalabraMasLarga(cad) { 
  for(let i = 0; i < cad.length; i++) {
    const arreglo = cad.split(" ");
    arreglo[i].split("");
  }
}

encontrarPalabraMasLarga("El zorro marrón veloz saltó sobre el perro perezoso");

Separar cad en un arreglo de esta manera (const arreglo = cad.split(" ");) funciona como pensamos y regresa ['El', 'zorro', 'marrón', 'veloz', 'saltó', 'sobre', 'el', 'perro', 'perezoso'].

Pero mira un poco más de cerca al bucle for. En vez de usar la longitud del arreglo como una condición para iterar i, se utiliza cad.length.

cad es "El zorro marrón veloz saltó sobre el perro perezoso", y si registras cad.length en la consola, obtendrás 44.

La última declaración en el cuerpo del bucle for es lo que está causando el error: arreglo[i].split(""). La longitud de arreglo es 9, así que i rápidamente iría más allá de la longitud máxima de arreglo:

function encontrarPalabraMasLarga(cad) { 
  for(let i = 0; i < cad.length; i++) {
    const arreglo = cad.split(" ");
    console.log(arreglo[i]);
    // arreglo[0]: "El"
    // arreglo[1]: "rápido"
    // arreglo[2]: "marrón"
    // ...
    // arreglo[9]: "perro"
    // arreglo[10]: undefined
    // arreglo[11]: undefined
  }
}

encontrarPalabraMasLarga("El zorro marrón veloz saltó sobre el perro perezoso");

Llamar arreglo[i].split(""); para separar cada cadena en subcadenas de caracteres es un enfoque válido, pero arrojará Tipo de Error: No se puede leer la propiedad 'split' de undefined cuando se pasa undefined.

Cómo resolver buscar la palabra más larga en una Cadena con split

Vayamos rápidamente en un pseudocódigo para saber cómo resolver este problema:

  1. Separar cad en un arreglo de palabras individuales
  2. Crear una variable para rastrear la longitud de la palabra más grande
  3. Iterar sobre el arreglo de palabras y comparar la longitud de cada palabra a la variable mencionado arriba
  4. Si la longitud de la palabra actual es más grande que la que se almacenó en la variable, reemplazar ese valor con la longitud de la palabra actual
  5. Una vez que la longitud de cada palabra es comparado con la longitud máxima de la palabra de la variable, regresar ese número desde la función

Primero, separar cad en un arreglo de palabras individuales:

function encontrarPalabraMasLarga(cad) {
  const arreglo = cad.split(" ");
}

Crear una variable para hacer un seguimiento de la palabra más larga y ponerlo en cero:

function encontrarLongitudPalabraMasLarga(cad) {
  const arreglo = cad.split(" ");
  let maxLongitudPalabra = 0;
}

Siendo que el valor de arreglo es ['El', 'zorro', 'marrón', 'veloz', 'saltó', 'sobre', 'el', 'perro', 'perezoso'], puedes usar arreglo.length en tu bucle for:

function encontrarPalabraMasLarga(cad) {
  const arreglo = cad.split(" ");
  let maxLongitudPalabra = 0;
  
  for (let i = 0; i < arreglo.length; i++) {
    
  }
}

Iterar sobre el arreglo de palabras y chequear la longitud de cada palabra. Recuerda que las cadenas también tienen un atributo length que puedes llamar fácilmente para tener la longitud de una cadena:

function encontrarPalabraMasLarga(cad) {
  const arreglo = cad.split(" ");
  let maxLongitud = 0;
  
  for (let i = 0; i < arreglo.length; i++) {
    arreglo[i].length;
  }
}

Usa un chequeo de declaración if si la longitud de la palabra actual (arreglo[i].length) es más grande que maxLongitud. Si es así, reemplaza el valor de maxLongitud con arreglo[i].length:

function encontrarPalabraMasLarga(cad) {
  const arreglo = cad.split(" ");
  let maxLongitud = 0;
  
  for (let i = 0; i < arreglo.length; i++) {
    if (arreglo[i].length > maxLongitud) {
      maxLongitud = arreglo[i].length;
    }
  }
}

Finalmente, regresa maxLongitud al final de la función, después del bucle for:

function encontrarPalabraMasLarga(cad) {
  const arreglo = cad.split(" ");
  let maxLongitud = 0;
  
  for (let i = 0; i < arreglo.length; i++) {
    if (arreglo[i].length > maxLongitud) {
      maxLongitud = arreglo[i].length;
    }
  }
    
  return maxLongitud;
}