JS stacks DS&A intro

If you use any modern device, you’ve likely encountered stack operations, even if you didn’t realize it. Stacks are fundamental in many programming tasks, from managing function calls to enabling undo operations.

What are Stacks?

Stacks are a linear data structure that follows order of operations organizing data in a LIFO or FILO structure.

LIFO: Last in, First out.

FILO: First in, Last out.

Stacks are used to perform operations on a collection of elements such as adding and removing elements, displaying top elements and displaying if collection is empty or full.

For example:

When you are on your web browser currently visiting www.ESPN.com and you accidentally click on a ad for Chicago White Sox baseball tickets. We added to our stack, maybe not intentionally but now it's at the top of our stack. Then we realize that the Chicago White Sox have lost 15 games in a row. Well ... let's hit that back button(removing that element from the top of the stack).

Yes, that one right up there. This demonstrates the LIFO principle in stacks operations, we are leaving(removing) the last visited page from our history(or Stacks) to return to www.ESPN.com ... maybe next year White Sox's.

Stacks operations are used often in applications that need to maintain order web browser history, undo and redo on text editors and function call stacks to name a few.

Functions commonly used when altering stacks are as follows:

.Push = to add element onto a stack.

.pop = to remove top element from a stack.

.peek = to display the top element of a stack.

.length/.size = to determine the total of indexes in a stack. Javascript uses (.length)

.isEmpty = checks if a stack is empty.

.isFull = checks if a stack is full; if array has a fixed size.

Stacks data structure can be created with a stacks class or with a regular array.

Implementing stacks without class:

When performing stacks operations without a stacks class, we simulate stack operations with an array.

Below will be an example of using the stacks operations to reverse an array of numbers. I will use JSON.stringify to compare the values of the array outcome to the desire array outcome.

Ex:

// Reverse an array using stack operations

let number = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; // original array
let numberList = [9, 8, 7, 6, 5, 4, 3, 2, 1, 0]; // reversed array
let ordernumberList = []; // array to store the reversed order

// Loop through the numberList array to reverse its order
for (var i = 0; i < number.length; i++) {
  let currentValue = numberList.pop(); // using the key .pop method to remove the last element from numberList
  ordernumberList.push(currentValue); // using the key .push method to push the popped element into ordernumberList
}

console.log(ordernumberList + " vs " + number); // compare the arrays

// Convert both arrays into JSON strings for comparison
if (JSON.stringify(ordernumberList) === JSON.stringify(number)) {
  console.log("The number list is reversed: " + ordernumberList);
  return ordernumberList;
} else {
  console.log("The number list is not reversed: " + ordernumberList);
}

I want to highlight the if-else statement at the very end. I used the JSON.stringify method to compare the two arrays because, without it, the comparison would return false, triggering the else condition, even though the arrays have identical content. This happens because, when comparing arrays in JavaScript, the comparison checks their references (i.e., their memory locations) rather than the actual content inside the arrays.

As we can see throughout the for-loop, our method .pop (removed) the last index in the numberList array first(LIFO). Then using the .push method to add it into the new array ordernumberList, reversing the original array.

FILO comes in on the new array formulated as the first indexes pushed into ordernumberList array will be the last ones out(FILO) if ever modified with the stacks operations.

In this article, we’ve explored how stacks operate using the LIFO and FILO principles, implemented stack operations in JavaScript. Understanding stacks is essential for many programming tasks, as seen in real-world scenarios like web browsing.