Parse and balance angle brackets problem in JavaScript

In the given problem statement we have to find whether the angle brackets in the code are balanced or not with the help of Javascript functionalities. So for solving this problem we will use a stack based approach using Javascript methods.

What is a Stack-based Approach ?

The stack-based approach is an algorithmic technique which involves using a data structure called stack. So the stack is a collection of items which supports two main operations: push and pop. Push operation adds an item to the top of the stack and pop removes the top item from the stack.

The main property of a stack is that it follows the LIFO (Last In First Out) principle. It means that the last item pushed into the stack will be the first item which will be popped off. Or we can say that the items are added and removed only from the one end of the stack known as the top.

For example, a stack is similar to a stack of books or plates. We can add a new book or plate to the top and when we have to remove one so we can remove it from the topmost one.

Understanding the problem

The problem at hand is to parse and balance the angle brackets in a given string. The angle brackets are commonly used in HTML and XML languages for denoting opening and closing tags. But it is important to keep in mind that these brackets are balanced and nested to avoid the syntax errors.

So we are aimed to find whether the angle brackets in the given string are balanced or not. That means for every opening angle bracket '<' there should be a corresponding closing angle bracket '>'. And we have to ensure that they are correctly nested within each other.

Logic for the given problem

To solve this problem we will use a stack based approach. In the algorithm we will iterate over every character in the given input string and when we encounter an angle opening bracket then we will push it in the stack. And when the closing angle bracket will be found, we will check against the top of the stack to ensure that the opening bracket is there or not. If the brackets matched then the opening bracket will be popped from the stack.

So after doing all these operations the function will then check that the stack is blank. If the stack is blank that means all the brackets are in balanced form and the result will be true. In other cases, if the stack is not blank then this shows that there are unmatched opening brackets and we will return the result as false.

Algorithm

Step 1: In the algorithm, the first step is to create a function and give it a name as isBalanced. Inside this function we will pass an input as a parameter. This function will primarily check that the brackets are balanced or not.

Step 2: Now we will be required to use an empty stack to store the inputs. The push and pop operations will be performed on this stack.

Step 3: For iterating the items of the input we will use a for loop. Inside this loop we will use another variable called char. This char variable will keep track of the current inputs.

Step 4: Check the condition that the char variable has an opening bracket. If the condition is true then inside the block we will push the opening bracket into the stack.

Step 5: If the above condition is not true then we will check another condition. If the char variable has a closing bracket and if the stack length is fount zero so we will return false. If it is not satisfying the second condition then we will pop the matching opening angle bracket from the stack.

Step 6: At the end we will check the condition that the stack is empty. If this is true then we are assured that the brackets are balanced.

Example

function isBalanced(input) {
   const stack = [];

   for (let i = 0; i < input.length; i++) {
      const char = input[i];

      if (char === '<') {
         // Push opening angle bracket onto the stack
         stack.push(char);
      } else if (char === '>') {
         if (stack.length === 0) {
            // Found a closing angle bracket without opening bracket
            return false;
         }
         // Pop the matching opening angle bracket
         stack.pop();
      }
   }

   return stack.length === 0;
}

console.log(isBalanced("<div>"));
console.log(isBalanced("<div"));
console.log(isBalanced("<<div>>>"));
console.log(isBalanced("<div></div>"));

Output

true
false
false
true

Complexity

The complexity of the code for parsing and balancing the angle brackets is O(n), in which n is the size of the input string. As the code traverses over the characters in the input string once and also performs a constant amount of operations for every character. That is why the time complexity is directly proportional to the size of the input string. And the space complexity of the code is also O(n) in the worst case. If all the characters in the input string are opening angle brackets.

Conclusion

So we have successfully created a function to check that the input string is parsed and balanced with opening and closing angle brackets without any errors. It is implemented using a stack based approach to get efficient time and space complexity.