A repartir para que tengan

Por culpa de un compañero de trabajo he caído en la adicción de hacer katas de código en CodeWars. Por supuesto, en uno de mis lenguajes favoritos: JavaScript.

Lo bueno: He arrancado humildemente por los katas de nivel más bajo, con el tino de crear soluciones que están dentro de las que se consideran las más adecuadas (?), o por lo menos, las que se parecen más a las mejor valoradas (Puntito para el ego).

Lo malo: … en realidad no hay nada malo. Se aprende, se ejercita la mente y se aprende (Eso creo que ya lo dije).

Lo que sí resulta importante es que la mayoría de las soluciones, aquellas más valoradas, están siendo hechas en ECMA6. De a poco nuestro viejo y querido JavaScript ha crecido y se hizo adulto. Y por supuesto, nosotros necesitamos crecer con este.

Con lo que me encontré en uno de los katas (Y que claramente ni sabía que estaba por ahí) fue con los … (Sí, tres puntos). Un nuevo operador, el operador de dispersión (Calculo que podemos llamarlo de esa forma).

Este operador permite tomar una colección de valores y asignarlos o “traspasarlo” a una lista independiente de valores o variables. De esta forma, si tenemos una función con muchos parámetros, es posible tomar un array y enviarlo como parámetro para que cada uno de los índices del mismo sean asignados a cada una de las variables de la firma (A alguien le suena apply?).

En TypeScript:

let f = (v: any, r: any) => {
  console.log(v, r);
};

var args = ['hola','mundo'];
f(...args);

En el código, cada índice del array irá a parar a cada una de las variables (v y r). Existen otras aplicaciones, pero para eso es cuestión de dejar volar la mente.

Dibujando X en la pantalla

Estoy escribiendo unos artículos que saldrán publicados en fascículos, dentro de muy poco, para aprender a programar desde la óptica de un desarrollador Full Stack (Aquel que puede programar tanto en el cliente como en el servidor). Mientras escribía, me distraje y se me ocurrió hacer un graficador de algunas funciones simples. Si a alguien le interesa, lo dejo por acá.

var canvas = document.createElement('canvas');
canvas.width = 800;
canvas.height = 600;
document.getElementsByTagName('body')[0].appendChild(canvas);
var ctx = canvas.getContext('2d');

function dibujar(f) {
  ctx.clearRect(0, 0, 800, 600);
  var p = 0;

  for (var i = 0; i < 800; i+=0.1) {
    var r = f(i);
    ctx.fillText('x', r[0], r[1]);
  }
}

Y estas son algunas funciones:

var periodo = 0;
var amplitud = 100;
var sobre_eje_y = 200;
var sobre_eje_x = 400;

function seno(tiempo) {
    periodo += 0.01;
    return [tiempo, (Math.sin(periodo) * amplitud) + sobre_eje_y];
}

function coseno(x) {
    periodo += 0.01;
    return [(Math.cos(periodo) * amplitud) + sobre_eje_x, x];
}

function circulo() {
    periodo += 0.1;
    return [(Math.cos(periodo) * amplitud) + sobre_eje_x, (Math.sin(periodo) * amplitud) + sobre_eje_y];
}