Haciendo match entre la URL y una ruta

les comparto como funciona de forma visual la funcion .SPLIT(’ '). lo que se ponga dentro del parametro de la funcion será el punto de division para el array que se va a crear. en el ejemplo vemos que se divide en 3 partes, dividas por el “/”.

Nota: se puede poner cualquier caracter, y ese caracter será el que divida el array a crearse.

Creo que vengo muy bien en los cursos de desarrollo y de Js, pero de este taller no entiendo NADA!

Espero les ayude, lo comente para describirlo

hay un error de edicion en el video

No soy un experto en JS pero creo que este código

if (routePathSegs.length !== urlSegs.length) {
        return false;
      }

      return routePathSegs.every(
        (routePathSeg, i) => routePathSeg === urlSegs[i]
      );

hace en la práctica lo mismo que este

if (routePathSegs === urlSegs){
        return true;
      }

      return false;

Si me equivoco que me corrijan. Lo único que puedo entender es que por motivos de performance se decida usar esa lógica ya que me imagino un caso donde la lista de routas sega muy grande o porque no es fiable el código que pongo como sustitución.

¿Por que comparamos el largo y no alguna otra cosa?

A continuación explico línea a línea lo que sucede en el método _matchUrlToRoute(urlSegs)

_matchUrlToRoute(urlSegs)
{
  // find recorre cada elemento del array routes y cuando la arrow function retorne true, 
  // entonces almacena el objeto. Ejemplo:
  // matchedRoute = { path: '/about', template: '<h1>About Me</h1>' }
  // Si no lo encuentra regresa "undefined"
  const matchedRoute = this.routes.find(route =>
  {
    // routePathSegs = 'about'
    const routePathSegs = route.path.split('/').slice(1);

    // Primera validación, si las rutas no tienen el mismo largo son diferentes y regresa false.
    // entonces find debe buscar en el siguiente objecto del array routes
    if (routePathSegs.length !== urlSegs.length) {
      return false;
    }

    // every compara letra a letra las dos rutas, si son iguales regresa true, de lo contrario regresa false.
    return routePathSegs
      .every((routePathSeg, i) => routePathSeg === urlSegs[i]);
  });

  // regresa el objeto matchedRoute = { path: '/about', template: '<h1>About Me</h1>' }
  return matchedRoute;
}

Documentación
Método find
Método every

No entendí el funcionamiento del every() 😕

Esta clase fue muy desafiante

Mientras más veo contenido JS más me doy cuenta de lo que me falta por aprender.

Si no estan claros acerca del metodo .Slice aqui les dejo un Enlace con la documentacion

Creo que todavía me falta mucho para aprender a programar de esa manera pero, me está gustando de igual manera. 😁

f

en el navegador me da error porque no puede encontrar la variable route