Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

Depurar en JavaScript

Jorge Barrachina
  • Escrito por Jorge Barrachina el 23 de Noviembre de 2017
  • 4 min de lectura | Javascript
Depurar en JavaScript
El reproductor de video será cargado en breves instantes.

Una de las cosas que verás en JavaScript es que hay muchas maneras de hacer las cosas y lo importante es que te manejes bien con las herramientas de depuración que tienen todos los navegadores.

Veamos un ejemplo

Vamos a ir iterando sobre la construcción de una función sencilla y vamos a ir viendo casos en los que una implementación a lo mejor no esta bien hecha, como depurar dicha implementación y ver exactamente que es lo que está pasando a la hora de ejecutarse esas distintas versiones de la función.

Escribir una función que dados como argumentos:
base = X
exponente = N
devuelva el número x elevado a la potencia de N
Ejemplo:
 power(2,4)//16
 power(3,2)//9
 power(5,2)//25
 power(7,0)//0

 //Primera iteración
 function pwer1(x,n) {
   let result =x;
   for (let i=1;i<n;i++){
     result *=x;
   }
 return result;
 }

Ejecutas la función con los casos de pruebas mencionados anteriormente y observas si arroja lo correcto:

primeraiteracionresultados

NOTA: puedes colocar puntos de ruptura en tu código para parar la ejecución en un determinado momento.

Como se puede ver cuando se hace la prueba con power(7,0) pasa un error, en vez de devolver 0 devuelve 7, ya que todo número elevado a 0 da 0.

Lo que ocurre es que en la iteración del for en la validación de i

Lo que ocurre es que en la iteración del for en la validación de i<n , 1 no es menor a 0, por lo que se sale del for y sigue a la siguiente línea de código retornando 7. Esto pasa porque se está asumiendo que nunca se va a colocar como exponente un 0, porque en la primera linea lo que se está haciendo es asignar el valor del resultado como la base.

¿Cómo se puede arreglar eso? veamos la segunda iteración.

// Segunda iteracion
function power2a(x,n){
 var result=x;
 if(n===0)
 {
   result =0;
 }
 else
 {
   for (let i=1; i<n; i++)
   {
     result *=x;
   }
 return result;
 }
}

Aquí se está haciendo prácticamente lo mismo que en la primera función, solo que en este caso se está declarando la variable result con var en vez de con let, la diferencia entre var y let es que let soporta bloques scoping mientras que var no lo soporta. Bloque scoping está relacionado con funciones scope que se explicará mejor en el curso de JavaScript profesional.

Probamos

segundaiteracionresultados

Se puede observar que en efecto para cuando el exponente es 0 el resultado es 0, por lo tanto se está comportando bien la segunda función, eso es porque en el if (n===0) se va a comprobar que realmente el exponente sea 0, si es asi, fijo el valor de result a 0, ya que cualquier número elevado a la 0 da 0, si no es cero se procede a realizar la multiplicación igual que en la primera función.

Extra

Existe un panel al lado derecho que tiene una sección que se llama “Scope”, el Scope es el término y todo el concepto que definen en cómo se accede a las variables en JS.

Se podrá ver un entorno con Block Scope, en este ejercicio, solo se verá el valor que va tomando la i del ciclo for, si se va iterando se visualizará como en el block se va cambiando el valor de i.

scope

Si nos posicionamos en la variable result se podrá ver que el block scope ha desaparecido, ya que este solo aparece por la variable i porque fue declarada con let.

scope2

Otra forma:

function power2c(x,n)
{
  let result =x;
  if (n===0)
 {
  resultado =0;
 } else {
       for (let i=1; i < n; i++)
       {
        result *=x;
       }
   }
return result;
}

Aqui lo que se está cambiando es el var por el let en la declaración de result. Se puede ver en la sección del Scope ahora como el valor de result va cambiando a medida quese va iterando gracias al let.

scope3

NOTA: el Block Scope tiene una serie de ventajas y desventajas, pero generalmente para las personas que vienen de otro lenguaje de programación se les hace mas cómodo porque están acostumbrados a lenguajes que soportan Block Scope y JS ha soportado Block Scope hasta hace poco y generalmente es el Function Scope el que prevalece.

Otra forma:
function power2b(x,n){
 let result =x;
 let i=1;
 while (i<n)
  {
  result *=x;
  i++;
  }
return result;
}

Aqui lo que se esta haciendo es cambiar el for por un ciclo while.

Por último:
function power3 (x,n)
{
  return n===0
  ? 0
  :Array(n).fill(x).reduce((sum,val) => sum*val);
}

Este código es mas iterativo pero en el sentido de usar bucles de la “vieja escuela”. En esta implementación todo es más imaginativo y tirando a la programación funcional.

Lo que se está haciendo en el código es lo siguiente:

  • Primero se evalúa si n es igual a 0 (n===0).
  • El ? es un operador ternario, es decir, un operador lógico que evalua una condición. En este caso si es n es igual a 0 el ? se encargará de retornar 0.
  • Los : es lo que se realizará si la condición evaluada en el segundo paso no es correcta. Aquí se vuelve a evaluar y se crea un Array cuyo parámetro es un número de elementos, en este caso, si ejecuto power3(2,4), lo que pasará es que se crea un array con 4 elementos y se llena con el valor de x con la función nativa del Array que es el fill(x). El array contendrá 4 veces el número 2.

    funcion3

  • Otra operación que tiene nativa los Arrays y que se puede encadenar (una de las cosas potentes de JS) es el reduce(), esta función se suele utilizar para hacer agregaciones. En este caso lo que se quiere hacer es iterar sobre todos los elementos del Array para luego multiplicar cada uno de ellos, ya que un número elevado a un exponente es lo mismo que hacer la multiplicación de esa base por el número de veces que indica el exponente, aquí sería 2x2x2x2 y al final retornará el valor acumulado que sería 16.

  • (sum,val) => sum*val) A esta notación se le conoce como función flecha, se verá en el curso con mas detalle pero en sí tienen un comportamiendo distinto a la de una función normal.

Como puedes ver para el mismo problema se pueden hacer distintas aproximaciones, cada una utilizará unas técnicas distintas y tendrán un impacto distinto dependiendo del uso que hagamos y donde coloquemos las condiciones, si utilizamos let o no, etc.

Artículo desarrollado a partir del vídeo por Ana Gabriela Durán.

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars