AD

¿Ya dominas lo básico? Un curso estructurado de JavaScript es la vía rápida para dar el salto.

Ver cursos de JavaScript en Udemy

Enlace de afiliado. No te cuesta nada extra.

🟨Lecciones de JavaScript
Lección 31 / 69

Pilas y colas (estructuras de datos básicas)

En esta lección aprenderás la diferencia entre dos estructuras de datos fundamentales, la pila y la cola, para elegir la adecuada a cada tarea. Está dirigida a quien busca «pila frente a cola en JavaScript» o «push, pop y shift en JavaScript».

Una pila es una estructura «el último en entrar es el primero en salir»: lo último añadido es lo primero que se quita. Una cola es «el primero en entrar es el primero en salir»: lo primero añadido es lo primero que sale. Piensa en la diferencia entre «un montón de libros» y «una fila de personas». En JavaScript puedes reproducir ambas fácilmente con métodos de array.

El código de ejemplo reproduce una pila añadiendo al final con .push() y quitando del final con .pop(), y una cola añadiendo al final con .push() y quitando del principio con .shift(). Fíjate en cómo los mismos métodos de array se comportan como estructuras completamente distintas con solo cambiar de dónde quitas.

Un tropiezo habitual al empezar es la diferencia entre .pop() y .shift(). Ambos quitan un elemento del array, pero pop lo hace por el final y shift por el principio; sin entender esa diferencia no podrás extraer los datos en el orden que pretendes. Conviene saber además que shift tiene que reindexar todo el array, así que es más costoso que pop.

En el desarrollo real, el botón «atrás» del navegador funciona como una pila, mientras que una cola de impresión o el turno de una tarea funcionan como una cola: estructuras básicas que sostienen discretamente mecanismos cotidianos. Como primer paso en estructuras de datos y algoritmos, es una idea básica que cubren muchos manuales.

Una gran ventaja de los arrays de JavaScript es que vienen equipados con métodos de propósito general que sirven para pilas y colas, lo que te permite reproducir ambas estructuras sin ninguna biblioteca dedicada.

JavaScript
SALIDA

💡 Todo lo que pases a console.log() aparece en la salida de abajo.

Espacio publicitario (banner)
Espacio publicitario (en el artículo)