What is Queue?
A Queue is a linear structure which follows a particular order in which the operations are performed. The order is First In First Out (FIFO). A good example of a queue is any queue of consumers for a resource where the consumer that came first is served first. It takes constant time to add or remove an element in a queue.
Queues should be used over arrays when we need to work with data in the FIFO form.
Limitation of Queue: It can access only one element at a time.
In JavaScript, arrays have methods like pop and shift that defines the Queue class: Enqueue and Dequeue operations. With this, a queue can be easily implemented.
Basic skeleton of queue: Below example run using “$node skeleton.js” command to get basic queue skeleton.
// Define Queue function function Queue(array) {
this .array = [];
if (array) this .array = array;
} // Add Get Buffer property to object // constructor which slices the array Queue.prototype.getBuffer = function () {
return this .array.slice();
} // Add isEmpty properties to object constructor // which returns the length of the array Queue.prototype.isEmpty = function () {
return this .array.length == 0;
} // Instance of the Queue class var queue1 = new Queue(); //Queue { array: [] }
console.log(queue1); |
Example:
<!DOCTYPE html> <html> <head> <title>Enqueue Operation</title>
<meta charset= "UTF-8" >
<script src=
type= "text/javascript" ></script>
<style>
body {
padding: 0;
margin: 0;
}
canvas {
vertical-align: top;
}
</style>
</head> <body> <script>
// Define Queue function
function Queue(array) {
this .array = [];
if (array) this .array = array;
}
// Add Get Buffer property to object
// constructor which slices the array
Queue.prototype.getBuffer = function () {
return this .array.slice();
}
// Add isEmpty properties to object constructor
// which returns the length of the array
Queue.prototype.isEmpty = function () {
return this .array.length == 0;
}
// Instance of the Queue class
var queue1 = new Queue(); // Queue { array: [] }
console.log(queue1);
// Add Push property to object constructor
// which push elements to the array
Queue.prototype.enqueue = function (value) {
this .array.push(value);
}
function setup() {
// Create Canvas of size display width * 300
createCanvas(displayWidth, 300);
}
function draw() {
// Set background color
background( "grey" );
// Set stroke weight
strokeWeight(3);
textAlign(CENTER);
textSize(24);
text( "Queue Implementation Using P5.js" ,
windowWidth/2, 20);
textAlign(LEFT);
textSize(14);
// Set stroke color
stroke( 'green' );
line(10, 45, 90, 45);
rect(10, 30, 60, 30);
noStroke();
text( "FRONT" , 20, 50);
// Display queue
for ( var i = 0; i <= queue1[ 'array' ].length-1; i++) {
var p = 10;
translate(70, 0);
strokeWeight(3);
stroke( 'green' );
line(10+p, 45, p+80, 45);
rect(10+p, 30, 40+p, 30);
noStroke();
text(queue1[ 'array' ][i], 40, 50);
p += 10;
}
// Set stroke color
stroke( 'green' );
translate(70, 0);
rect(10, 30, 60, 30);
noStroke();
text( "REAR" , 20, 50);
}
// Peek Function
Queue.prototype.peek = function () {
return this .array[ this .array.length-1];
}
// Driver Code
// Call to Enqueue operation
queue1.enqueue(1);
queue1.enqueue(2);
queue1.enqueue(3);
queue1.enqueue(19);
queue1.enqueue(11);
queue1.enqueue(15);
queue1.enqueue(14);
queue1.enqueue(18);
</script>
</body> </html> |
Output:
After Enqueuing ’25’ by calling queue1.enqueue(25) function of rear changes to 25.