Las estructuras de datos nos ayudan a organizar la información de manera que podamos acceder y modificarla según nuestras necesidades. Una de las más comunes es la cola (queue), que sigue el principio de “primero en entrar, primero en salir” (FIFO). En este artículo, creamos una implementación en JavaScript y la representamos gráficamente con el elemento <canvas>.

Implementación de la cola en JavaScript

Una estructura de datos de tipo cola se caracteriza por tener dos métodos básicos, uno para cuando se añade un elemento en la cola enqueue y otro para cuando un elemento sale de la cola dequeue.

Para añadir un elemento a la cola basta con añadir el elemento en el array:

function enqueue(timestamp) {
  let newDot = {
    id: nextId++,
  };
  queueDots.push(newDot)
}

Cuando un elemento sale de la cola lo que haremos es quitar el primer elemento del array:

function dequeue() {
  let dot = queueDots.shift();
}

A partir de estos dos conceptos de enqueue y dequeue podemos desarrollar una simulación animada parar ver como van llegando elementos de forma aleatoria a una cola y luego van saliendo por orden de llegada:

Reflexiones finales

Esta implementación nos permite comprender cómo funciona una cola y visualizar su comportamiento en tiempo real. Podemos extenderla con animaciones o agregar validaciones para hacerla más interactiva.