Stacks and Queues for app.codility.com/programmers Explained in JavaScript

Category of Article : Technology | Computers and Software | Algorithms

By: Chrysanthus Date Published: 4 Jul 2025

A data structure is like an array. However, its size can grow or shrink, unlike the size of a C/C++ array, which can neither grow nor shrink. A typical data structure also has attributes (associated data variables) and methods (associated functions). In this tutorial (lesson), is described two data structures used for storage of elements. The two data structures of interest here, are called, the stack and the queue containers. Both structures have the push() and pop() methods. The push() method behaves in the same way for both structures, but the pop() method behaves differently by acting at opposite ends of the data structures.

Stack

The stack container (or stack for short), is a data structure in which the insertion of a new element takes place at the top, and the deletion (removal) of an element, also takes place from the top. The idea of the stack can be illustrated by plates stacked on top of one another. Each new plate is placed on top of the stack of plates (operation push), and plates can only be taken off the top of the stack (operation pop). This is a Last-In-First-Out (LIFO) data structure.

JavaScript does not have a stack container (data structure), so the JavaScript array which is more of a data structure than an array, is used. So, instead of using the pop() method, the JavaScript shift() method is used. When the array is used as a stack, the unshift() method is used instead of the push() method, since the push() method will add element at the back of the array. The unshift() method puts a new element at the top of the array.

Use of unshift() and shift() methods for the Stack

The following program unshifts the list of integers,

4, 8, 6, 3

one-by-one onto a stack, and then shifts them out one-by-one from the top of the stack. The stack begins with the number 4 and then ends with the number 3. So, in the popping operations, 3 will be sent out first. The program is:

<script type='text/javascript'>
    "use strict";

        const stack = [];

        stack.unshift(4); stack.unshift(8); stack.unshift(6); stack.unshift(3);
        
        let int1 = stack[0]; stack.shift();
        let int2 = stack[0]; stack.shift();
        let int3 = stack[0]; stack.shift();
        let int4 = stack[0]; stack.shift();
        
        document.write(int1 + ', ' + int2 + ', ' + int3 + ', ' + int4 + ', ' + '<br>');

</script>

The output is:

3, 6, 8, 4

in reverse order, as expected, since it is last-in-first-out. The top() method (stack[0]) copies out the last (top) element, while the pop() method (shift()) removes the last (top) element and "throws it away". Note: The push() or top() or pop() method takes O(1) time. The sequence of operations for the whole list takes O(n) time, with pushing or with popping.

Queue

The queue container (or queue for short), is a data structure in which a new element is inserted at the back, but an old element is removed from the front, in order. The idea of the queue can be illustrated by a line of customers at a grocery store. New people join the back of the queue (push operation) and the next person to be served, is the one in front (pop operation), of the line (queue). After serving, he/she goes away. This is a First-In-First-Out (FIFO) data structure.

JavaScript does not have a queue container (data structure), so the JavaScript array which is more of a data structure than an array, is used. So, instead of using the pop() method, the JavaScript shift() method is used. Since the array push() method pushes element at the back of the array, the same push() method is used when the array is considered as a queue.

Use of push() and shift() methods for the Queue

The following program pushes the list of integers,

4, 8, 6, 3

one-by-one into a queue from the back, and then shifts them out one-by-one from the front (top) of the queue. The queue begins with the number 4 and then ends with the number 3. So, in the popping operations, 4 will be sent out first. The program is:

<script type='text/javascript'>
    "use strict";

        const queue = [];

        queue.push(4); queue.push(8); queue.push(6); queue.push(3);
        
        let int1 = queue[0]; queue.shift();
        let int2 = queue[0]; queue.shift();
        let int3 = queue[0]; queue.shift();
        let int4 = queue[0]; queue.shift();
        
        document.write(int1 + ', ' + int2 + ', ' + int3 + ', ' + int4 + ', ' + '<br>');

</script>

The output is:

4, 8, 6, 3

in same order, as expected, since it is first-in-first-out. The top() method (queue[0]) copies out the first (top) element, while the pop() method (shift()) removes the first(top) element and "throws it away". Note: The push() or top() or pop() method takes O(1) time. The sequence of operations for the whole list takes O(n) time, with pushing or with popping.

The length attribute for the Stack and the Queue

A stack or a queue object (array), has the length attribute. This returns the length of the stack or queue object. The following program illustrates this:

<script type='text/javascript'>
    "use strict";

        const stack = [];
        stack.unshift(4); stack.unshift(8); stack.unshift(6); stack.unshift(3);
    
        const queue = [];
        queue.push(4); queue.push(8); queue.push(6); queue.push(3);
        
        document.write('The size of the stack is: ' + stack.length + " and the size of the queue is: " + queue.length + '<br>');

</script>

The output is:

The size of the stack is: 4 and the size of the queue is: 4

Conclusion

A data structure is like an array. However, its size can grow or shrink, unlike the size of an array, which can neither grow nor shrink. A typical data structure has attributes (associated data variables) and methods (associated functions). The stack is a Last-In-First-Out data structure. The queue is a First-In-First-Out data structure.

The rest of the 17 lessons, with explanation of lessons, explanation of tasks, and explanation of solutions, can be found at (click): Explanations in JavaScript for the 17 Algorithm Lessons at https://app.codility.com/programmers with Problems and Solutions

Cousins

NEXT

Broad Network

Series Articles