DEV Community

Creating 3 Stacks With 1 Array in JavaScript

Emma Bostian ✨ on April 26, 2019

This problem was a prompt from the Cracking The Coding Interview book. The exercise is: "Describe how you could use a single array to implement t...

Read full post

Josep M Sobrepere • Apr 26 '19 • Edited

Hi Emma,

First and foremost, thanks a lot for sharing this. It's a cool implementation!

I came up with an alternative implementation, though. Which would allow for any Stack to take as much space as possible. I have not tested it, but I think that the following implementation accomplishes that:

class MultiStack {
  constructor(nStacks, arraySize) {
    this._array = new Array(arraySize);
    this._stacks = new Array(nStacks);
    this._nextUnusedIdx = 0;
    this._availableIdxs = null;
  }

  isFull() {
    return this._nextUnusedIdx === this._array.length && !this._availableIdxs;
  }

  isEmpty(stackIdx) {
    return this._stacks[stackIdx] === undefined;
  }

  _getNextAvailableIdx() {
    if (this._nextUnusedIdx < this._array.length) return this._nextUnusedIdx++;
    if (this._availableIdxs) {
      const {idx} = this._availableIdxs;
      this._availableIdxs = this._availableIdxs.prev;
      return idx;
    }
  }

  push(stackNumber, value) {
    if (this.isFull(stackNumber)) {
      return console.log(`Stack number ${stackNumber} is full`);
    }
    const idx = this._getNextAvailableIdx();
    this._array[idx] = value;
    this._stacks[stackNumber] = {idx, prev: this._stacks[stackNumber]};
  }

  _releaseIdx(idx) {
    this._availableIdxs = {idx, prev: this._availableIdxs};
  }

  pop(stackNumber) {
    if (this.isEmpty(stackNumber)) {
      return console.log(`Stack number ${stackNumber} is empty`);
    }

    const {idx} = this._stacks[stackNumber];
    const result = this._array[idx];
    this._releaseIdx(idx);
    this._stacks[stackNumber] = this._stacks[stackNumber].prev;
    return result;
  }

  peek(stackNumber) {
    if (this.isEmpty(stackNumber)) {
      return console.log(`Stack number ${stackNumber} is empty`);
    }

    const {idx} = this._stacks[stackNumber];
    return this._array[idx];
  }
}

The thing is that normally Stacks are implemented using linked data-structures. So, we could do the same thing here... The idea is to have each Stack to keep a linked list of the indeces that it's using. Then, every time that one of them releases an index, we keep that one in another internal linked-list (_availableIdxs) so that we have a way of knowing which indeces are not used... A "drawback" is that isFull is common for all of them, of course. There is a bit more overhead, but the time-complexity is still constant for all the operations (push, peak and pop) and the memory usage would be a bit better... Another drawback would be the fact that a Stack can take all the available space, leaving nothing for the others :-)

I'm just sharing this, because I thought you could find it interesting. I'm not trying to criticise your work. There is no such thing as a free lunch when it comes to software development, there are prons and cons to both implementations.

Emma Bostian ✨ • Apr 26 '19

Love this thank you!!

Harald Lang • Apr 27 '19

Thanks for sharing your solution.

However, as an interviewer, my follow-up question would be, if you can get rid of the second array, as well as the two member variables.

Julian Garamendy • Apr 27 '19

Besides the interview question, why would I want to implement 3 stacks with 1 array?
Honest question.

Harald Lang • Apr 27 '19

That is indeed the better question :D

Emma Bostian ✨ • Apr 28 '19

LOL I have no freaking clue. I definitely wouldn't want to IRL. Was just an exercise.

Geompse • Apr 26 '19

For storing three stacks using one array, you are using an object containing two arrays.
To me a nicer answer would have been to use one array only, maybe using the array as the object itself :
multipleStacksArray.constructor === Array;
multipleStacksArray.pushToStack(stackNumber,value);

Anyways using indexed accesses to the array does not seem to comply to the demand, aka if you replace [] with {} in your class it will still work while not using arrays... Can you do it over using Javascript's native methods Array.push and Array.pop ? I would like to see such a clever implementation.

Andrii • Apr 27 '19

Yeah, I was a bit disappointed that the total number of arrays was two as well :) I’m on board with “one array” means one array..
It could be achieved by reserving the first n items of the single array to contain the sizes.

Not sure how I feel about using indexed access not complying with the demand. I mean it is an array, so I’m not really getting your point.
Would be thankful if you could elaborate further on your second point.

Geompse • Apr 27 '19

Well, to me, using indexes is cheating because it is the same as using objects. Since you can access the [topIndex] value you access the [topIndex-1] value : that is in opposition with the concept of stacks (LIFO).

You might as well have objects with named properties (i.e. multipleStacks.stack1.value1) and no array at all.

For the sole purpose of science I would have enjoyed an "only one stack" version where you have to unstack in a temporary stack untill reaching the desired value to access or update (loop of Array.pop then loop of Array.push).

For the sake of fulfilling the use case, for production usage, I would have made one object containing an array per stack (but a multimensional array is cheating as well) and not one object containing two objects.

TL;DR it seems very bad not to use Array.pop nor Array.push in a JavaScript exercice regarding stacks.

Harald Lang • Apr 27 '19

Well, I do not understand that complain.

The task was to implement a stack using an array, rather than to implement a stack using a stack.

So from my understanding, using indexed access is perfectly fine.

Konstantin Rouda • Apr 27 '19

Doesn't this code override the last element in the stack instead of adding it, as this.indexOfTop returns the index of the last element?

  this.values[this.indexOfTop(stackNumber)] = value;

Dallas Reedy • Apr 28 '19 • Edited

I’m thinking the same thing… if indexOfTop points at the top-most element, then setting that same index to the new value just keeps overwriting that top-most element, no?

Edit: I actually tried it the way I thought it should be (adding 1 to the value of indexOfTop) and it definitely does not do the right thing (the first element of every stack is empty, so everything is off by 1). And when I removed that code, it worked perfectly.

So, now my only question is: How is it working!? How can indexOfTop be used to both show the top-most element and to insert a new element?

Dallas Reedy • Apr 28 '19 • Edited

Oh. I see it now 🤦🏻‍♂️!

It works because of the line immediately preceding that line:

this.sizes[stackNumber]++;

That seems tricky – difficult to come back to later on and immediately understand how those lines work in concert. Perhaps it would be more straight-forward to swap those two lines and add 1 to the indexOfTop instead:

// insert our new value to the top of the stack
this.values[this.indexOfTop(stackNumber) + 1] = value;
// increment our stack size by 1
this.sizes[stackNumber]++;

Emma Bostian ✨ • Apr 28 '19

It is a bit convoluted eh?

Dallas Reedy • Apr 28 '19

Yeah, maybe a little. Not too bad. Once I actually ran the code, I began to understand the cleverness at work.

Dallas Reedy • Apr 28 '19

This was a really fun article to play along with, Emma! Thanks for structuring it the way you did. Being a somewhat seasoned developer, I appreciated the flying overview at the beginning so that I could write up my own version of such a class with all the proper attributes and methods in place. I even took my own first stab at filling in those methods and guessing ahead at how you might fulfill each one’s responsibility. I came really close on a lot of it!

I also really appreciate how you break it down into really simple terms – with visuals! – so that beginners and those of us who appreciate the “why?” behind the “how?” could get a firm grasp on the concepts.

Thank you! 🙏🏼

Víctor Oliva • Apr 26 '19

Hey Emma, that's a nice solution, but wouldn't something like this work as well?

Stack 1 indices: N*3
Stack 2 indices: N*3 + 1
Stack 3 indices: N*3 + 2

So basically you split the array where position 0 is stack 1, 1 is stack 2, 2 is stack 3, 3 is stack 1 again, 4 is stack 2, etc.

This would allow your stacks to have an indefinite max length as well (as you'll never run in a case where a stack needs to take space from another one)

Philippe Vaillancourt • Apr 27 '19 • Edited

I was thinking the same thing but then you would end up with a sparse array. I guess it's not that big a deal in JS.

Alex Ágreda • Jun 20 '19 • Edited

Excellent article!

Just one question:
In push method, shouldn't be

this.values[this.indexOfTop(stackNumber) + 1] = value;

instead of

this.values[this.indexOfTop(stackNumber)] = value;

?

Harald Lang • Apr 27 '19

Hi Emma,

thanks for your post (and code) on that coding interview question.

In my opinion, the applicant not only needs to know what a stack is, and how it's implemented, but also needs to be able to "flatten" a data structure into a (one-dimensional) range of memory, in that case a simple fixed-size array.

Thus, I modified your code a bit, to get rid of the second array and the member variable _stackCapacity.
For simplicity, I also removed the support for arbitrary numbers of stacks, as its not requested by the interviewer' question.

class ThreeStacks {

  constructor(array) {
    this._data = array; // Store a reference to the (external) data array.
  }

  get capacity() {
    return ((this._data.length - 3) / 3) | 0;
  }

  size(stackNumber) {
    return this._data[stackNumber];
  }

  isEmpty(stackNumber) {
    return this.size(stackNumber) === 0;
  }

  isFull(stackNumber) {
    return this.size(stackNumber) === this.capacity;
  }

  indexOfTop(stackNumber) {
    return 3 + (this.capacity * stackNumber) + this.size(stackNumber) - 1;
  }

  push(stackNumber, value) {
    if (this.size(stackNumber) === this.capacity) {
      console.log(`Stack number ${stackNumber} is full`);
      return false
    }
    // Add the value to the list
    this._data[3 + (this.capacity * stackNumber) + this.size(stackNumber)] = value;
    // Add one to the respective stack count
    this._data[stackNumber]++;
    console.log(`Item ${value} has been successfully added to stack ${stackNumber}`);
    return true;
  }

  pop(stackNumber) {
    if (this.isEmpty(stackNumber)) {
      console.log('Stack number ${stackNumber} is empty');
      throw new Error('Cannot pop an empty stack.');
    }
    const topIndex = this.indexOfTop(stackNumber);
    const value = this._data[topIndex];
    this._data[topIndex] = 0; // Clear out element.
    this._data[stackNumber]--; // Reduce num elements in the stack
    return value;
  }

  peek(stackNumber) {
    if (this.isEmpty(stackNumber)) {
      console.log('Stack number ${stackNumber} is empty');
      throw new Error('Cannot peek an empty stack.');
    }
    const topIndex = this.indexOfTop(stackNumber);
    return this._data[topIndex];
  }

}

// Usage:
let array = new Array(10).fill(0);
console.log("raw data: ", array);

const stack = new ThreeStacks(array);
console.log("capacity: ", stack.capacity);
console.log("size(0): ", stack.size(0));
console.log("");

console.log("stack.push(0, 13)");
stack.push(0, 13);
console.log("size(0): ", stack.size(0));
console.log("peek(0): ", stack.peek(0));
console.log("");

console.log("stack.push(0, 37)");
stack.push(0, 37);
console.log("size(0): ", stack.size(0));
console.log("peek(0): ", stack.peek(0));
console.log("");

console.log("stack.pop(0)");
stack.pop(0);
console.log("size(0): ", stack.size(0));
console.log("peek(0): ", stack.peek(0));
console.log("");

console.log("stack.pop(0)");
stack.pop(0);
console.log("size(0): ", stack.size(0));
console.log("");

let v = 0;

for (s = 0; s < 3; s++) {
  while (!stack.isFull(s)) {
    stack.push(s, v);
    v++;
  }
  v += 10;
}
console.log("raw data: ", array);

JimboTSoV • Apr 26 '19 • Edited

Edit:
I just realized that you actually did that already, my bad!

I found this interesting, but in your leading paragraph you could probably add why you would use this. Is this simply meant to teach about stacks in general or do you have an example use case for Javascript at hand?

Emma Bostian ✨ • Apr 26 '19

Sure! This was a prompt from the Cracking The Coding Interview book. The exercise is: "Describe how you could use a single array to implement three stacks.":)

Patrik • Apr 27 '19 • Edited

This is a great example and breakdown and nice solution.

It did spawn some thinking though whether it's not feasible to take a more function-oriented approach (with some traditional OOP interspersed) to really hone in on the "a single array" part of the question. By extracting separate objects for the different queues, we can hold positions inside those objects instead, shifting the responsibility completely.

I thought of something like this:

let Arrack = (stacks, maxStackSize, freeStackSlotsWhenDigested=false) => {
    let stackSize = maxStackSize * stacks,
        masterStack = Array(stackSize);

    let QueueHandler = (stack) => {
        if (stack >= stacks) {
            throw "Not enough stacks in this Arrack"
        }

        let stackStart = (stack) * maxStackSize,
            stackPosition = stackStart,
            stackEnd = stackStart + maxStackSize,
            queue = (ob) => {
                if (stackPosition === stackEnd) {
                    throw "Max stack size reached"
                }

                masterStack[stackPosition] = ob;
                stackPosition++;
            },
            digest = () => {
                if (stackPosition === stackStart) {
                    throw "No items to digest"
                }

                stackPosition--;
                let item = masterStack[stackPosition];
                if (freeStackSlotsWhenDigested) {
                    masterStack[stackPosition] = null;
                }
                return item;
            };

        return {
            queue: queue,
            digest: digest
        }

    };

    return {
        initiateStack: QueueHandler
    };
};

We can then initiate an object that holds the values inside it, as well as a handler for each available stack.

The last argument is whether we want to clear the slots once used, or we simply leave out to keep them in-memory (to avoid an additional operation).

let arrack = Arrack(3, 10, true);

Once we have our Arrack we can handle each queue separately.

let stack0 = arrack.initiateStack(0),
    stack1 = arrack.initiateStack(1),
    stack2 = arrack.initiateStack(2);

We then use the queue(ob) and digest() methods to put and get items from our queue.

stack1.queue({
    message: 'foo',
    type: 'bar'
});
stack1.digest();
> {message: "foo", type: "bar"}

I lazily threw errors if we try to digest what we don't have, or put more objects than we're allowed (Python habit I'm afraid), but that could be tweaked.

for (let i=0; i<11; i++) {
    stack2.queue(i);
}
>! Uncaught Max stack size reached

Feedback is very welcome :)

Çağatay Sert • Apr 26 '19

Hey Emma,

it was a great article. Thank you for sharing your knowledge. I will try to make this kind of example to improve my JS skills :)

Juan Pablo de la Torre • May 1 '19

What about using the structure file headers have? Files usually store the size of a field as the first bytes in them. This way, one could implement a dynamic array of dynamic stacks within a single array.

Juan Pablo de la Torre • May 1 '19

I wrote this. It uses a single array which is the class in itself. Not really needed but really fun.

class Stacks extends Array {

  /**
   * @param [count=0] Number of stacks to initialize the Array
   */
  constructor (count) {
    super(count || 0).fill(0);
    this.count = count || 0;
  }

  /**
   * Gets index after a stack ends. 
   * @param position Stack position
   */
  next (position) {
    return position < this.count ?
      position < 0 ?
        0 :
        Array(position + 1).fill(0).reduce(sum => sum += this[sum] + 1, 0) :
      this.length;
  }

  /**
   * Gets index where a stack starts (stack size is stored here).
   * @param position Stack position
   */
  first (position) {
    return position ? this.next(position - 1) : 0;
  }

  /**
   * Gets the size of stack at position.
   * @param position Stack position
   */
  size (position) {
    return this[this.first(position)];
  }

  /**
   * Peeks the last item of stack at position.
   * @param position Stack position
   */
  peek (position) {
    return this[this.next(position) - 1];
  }

  /**
   * Pushes items to a stack.
   * @param position Stack position
   * @param items The rest of the arguments would be pushed to the stack
   */
  push (position, ...items) {
    if (position < this.count) {
      this.splice(this.next(position), 0, ...items);
      this[this.first(position)] += items.length;
    }
  }

  /**
   * Pops the last item of a stack.
   * @param position Stack position
   */
  pop (position) {
    if (position < this.count) {
      this[this.first(position)]--;
      return this.splice(this.next(position) - 1, 1)[0];
    } else {
      return null;
    }
  }

  /**
   * Adds a new stack at position.
   * @param position Position to place the new stack
   * @param items Items of the stack.
   */
  add (position, items) {
    items.unshift(items.length);
    this.splice(this.next(position - 1), 0, ...items);
    this.count++;
  }

  /**
   * Removes stack at position.
   * @param position Stack position
   */
  remove (position) {
    if (position < this.count && position >= 0) {
      const first = this.first(position);
      this.splice(first, this[first] + 1);
    }
  }

}

Here is an example:

const memory = new Stacks(0); [ ]
memory.add(0, [1, 2, 3]);
  // result > [ 3, 1, 2 ,3 ]
  // 1 stack, 3 items
memory.add(0, [10, 11]);
  // result > [ 2, 10, 11, 3, 1, 2, 3 ]
  // 2 stacks of 2 and 3 items
memory.push(1, 4, 5);
  // result > [ 2, 10, 11, 5, 1, 2, 3, 4, 5 ]
  // 2 stacks of 2 and 5 items
memory.pop(0); // returns 11
  // result > [ 1, 10, 5, 1, 2, 3, 4, 5 ]
  // 2 stacks of 1 and 5 items
memory.pop(1); // returns 5
  // result > [ 1, 10, 4, 1, 2, 3, 4 ]
  // 2 stacks of 1 and 4 items
memory.remove(0);
  // result > [ 4, 1, 2, 3, 4 ]
  // 1 stack of 4 items

And a test using console.assert.

const test = new Stacks(3);
console.assert(test.count === 3, "Size doesn't match");
console.assert(test.size(0) === 0, "First stack is not empty");

test.push(1, 3);
console.assert(test.size(1) === 1, "Second stack items don't match expected");
console.assert(test.peek(1) === 3, "Second stack items don't match expected");

test.add(0, [5, 6, 7]);
console.assert(test.count === 4, "New stack was not added");
console.assert(test.size(0) === 3, "New stack size doesn't match what's expected");
console.assert(test.peek(0) === 7, "Second stack items don't match what's expected");