Javascript

 Javascript

El lenguajes más usado en el front-end. Para los que no lo sepan se le dice front-end a la parte que se enfrenta al usuario de una aplicación, en este caso la aplicación puede ser una página web y el usuario puede estar usando un navegador en su celular o tablet. La parte visual de la página web seguramente tendrá eventos que serán manejados con Javascript. Es un lenguaje multipropósito y multiparadigma, o sea que se lo usa para todo y de muchas maneras a la vez. 

Hoy quiero enseñarte algunas funciones útiles y particulares de JS que aparecen también en otros lenguajes.

Función map

Supongamos que tenemos un array de números y queremos trabajar con sus valores cambiados de signo. Por ejemplo tenemos [-1, 0, 2, 3, 5] y queremos trabajar o manipular el array [1, 0, -2, -3, -5]. La función map() nos ayuda a mapear estos valores sin modificar el array original. En código sería:

  const original = [-1, 0, 2, 3, 5];
  const negados = original.map( elemento => elemento * (-1));

Ya podemos intuir un poco su sintaxis. En resumen es un método de la clase Array y devuelve un nuevo array aplicando una función que recibe como parámetro.

Función reduce

La función reduce() va recorriendo todo el array ejecutando una función y devuelve el último valor de la función. Para entenderlo veamos este ejemplo:

Queremos obtener la suma de todos los elementos del array, entonces lo recorremos sumando cada elemento y devolemos el último valor resultado de la suma, en código sería así:

  let numeros = [1,2,3,4,5,6,7,8,9]; 
  const sumatotal = numeros.reduce((acumulador,elemento) => acumulador + elemento, 0);
  console.log(sumatotal);

Como podemos ver, la función reduce() toma dos parámetros, una función que en este caso suma dos valores, y un valor inicial que en este caso es el 0. El valor inicial es el valor de la variable acumulador al principio de la ejecución y en este caso el resultado final sería 45.

Ahora probemos multiplicar todos los elementos del array. El valor inicial en este caso será el 1 porque es el elemento neutro de la multiplicación. La función anónima será muy parecida, con un operador de multiplicación reemplazando la suma. Veamos:

  let numeros = [1,2,3,4,5,6,7,8,9]; 
  const producto = numeros.reduce((acumulador,elemento) => acumulador * elemento, 1);
  console.log(producto);

Les dejo como ejercicio el problema de encontrar el elemento menor (o mayor) en un array. También hay que recorrer todos los elementos buscando el menor o el mayor.

Función filter

Esta función hace un filtro en el array y te devuelve solo los elementos que cumplan con la condición. Por ejemplo si tenemos un vector de números de todo tipo y queremos obtener sólo los números pares, podríamos escribir este código:

  let valores = [40,8799,44,13,74,807,2,66,50];
  const valores_pares = valores.filter(numero => { return numero % 2 == 0; });
  console.table(valores_pares);

Podemos ver que la función parámetro retorna un valor boolean que puede ser true o false. Con este valor de verdadero solo deja pasar los elementos que cumplen la condición y genera un nuevo array con esos valores. 

Un ejemplo con strings: buscar las cadenas más largas, en este caso con más de 10 caracteres

  let cadenas = ['fabricación','lógica','informatización','inteligencia','universidad','artificial','dos','especificaciones'];
  const cadenas_largas = cadenas.filter(palabra => { return palabra.length > 10; });
  console.log(cadenas_largas);

Nota

Notar que los elementos de un array no siempre son números, pueden ser strings o ser otros objetos más complicados que reciban métodos que actuen como condicionales o de procesamiento acumulativo o de transformación. Para estos casos estas tres funciones también se aplican espectacularmente.

Supongamos que tenemos objetos de la clase Mutacion y otra de la clase ADN y queremos obtener una reducción de un adn aplicándole varias mutaciones: 

  let mutaciones = [mutacionInsercion, mutacionDelecion,mutacionInversion];
  const genoma = mutaciones.reduce((acumulador,elemento) => acumulador.mutar(elemento), adn);
  console.log(genoma);




No hay comentarios:

Publicar un comentario