Hackernoon logoThe Little Guide of Queue in JavaScript by@germancutraro

The Little Guide of Queue in JavaScript

Author profile picture

@germancutraroGermán Cutraro

A queue is a simple data structure that allows elements to be inserted from one end, called the rear (also called tail), and deleted from the other end, called the front (also called head).

This behavior is called FIFO (First in First Out).

So, a queue is a linear data structure. A very important concept is that a queue deletes only the oldest added element.

The person that is removed was the first in the queue


  • Queues are used whenever we need to manage objects in order starting with the first one in.
  • Scenarios include printing documents on a printer, call center systems answering people on hold people, and so on.


  • A queue can be implemented using an array or a linked list.

So, in JavaScript doing a Queue is very simple because we can take arrays methods, like unshift and pop.

Remember :

unshift Adds a element to the beginning of the array.
pop Deletes the last element of the array.


So the first thing that we are going to do is create a Queue constructor function with a empty array inside.

function Queue() {
this.data = [];

Remember that we use the this keyword there because we need to pointer the object that we create.


The main methods will be add and remove:

Queue.prototype.add = function(record) {
Queue.prototype.remove = function() {

And we are going to add 3 methods more:

Queue.prototype.first = function() {
return this.data[0];
Queue.prototype.last = function() {
return this.data[this.data.length - 1];
Queue.prototype.size = function() {
return this.data.length;

So, let’s see what we get:

const q = new Queue():

So, the oldest one is the element with the value of 1 because we added it first.

If you don’t believe me, you can use our last method to see it:

// -> 3
// -> 1

So if we use the remove method the element that will be deleted is the oldest so the 1 is out.


And we have the last method call size

// -> 2

Return ‘‘2’’ after we delete the last element.

Complete Code: https://github.com/germancutraro/Queue-Data-Structure;

You have my Github if you wanna follow me, i will appreciate a lot!

Thanks to SoloLearn a fantastic app!

Great courses to learn Data Structures and Algorithms:
 ◾ Learning Data Structures in JavaScript from Scratch
 ◾ The Coding Interview Bootcamp: Algorithms + Data Structures

Thank you 😊


The Noonification banner

Subscribe to get your daily round-up of top tech stories!