Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create infix to postfix converter in JavaScript?
An infix to Postfix converter is a tool that converts an infix expression to a postfix expression. In this tutorial, we will build the infix to postfix converter using JavaScript.
What is an infix expression?
Infix expression is an expression in which the operators are between the operands. For example, the expression "3 + 4" is an infix expression.
What is a postfix expression?
A postfix expression is an expression in which the operators are after the operands. For example, the expression "3 4 +" is a postfix expression.
How does the Infix to Postfix converter work?
The converter first converts the infix expression to Reverse Polish Notation (RPN) using Shunting-yard algorithm. In RPN, the operators are after the operands. The Reverse Polish Notation is simply the postfix expression.
Let us consider the infix expression "3 + 4".
The expression is converted to RPN. This can be done using the Shunting-yard algorithm.
The steps are as follows:
3 is pushed to the output queue.
The + is an operator, so it is added to the operator stack.
4 is pushed to the output queue
The + operator is popped off the operator stack and added to output queue.
Therefore, the postfix expression for "3 + 4" is "3 4 +".
Implementation
Here's the JavaScript implementation of the infix to postfix converter:
<!DOCTYPE html>
<html>
<head>
<title>Infix to Postfix Converter</title>
<script>
function convertToPostfix(infix) {
var output = "";
var stack = [];
for (var i = 0; i < infix.length; i++) {
var ch = infix.charAt(i);
if (ch == '+' || ch == '-' || ch == '*' || ch == '/') {
while (stack.length != 0 && stack[stack.length - 1] != '(' &&
getPrecedence(ch) <= getPrecedence(stack[stack.length - 1])) {
output += stack.pop();
output += ' ';
}
stack.push(ch);
} else if (ch == '(') {
stack.push(ch);
} else if (ch == ')') {
while (stack.length != 0 && stack[stack.length - 1] != '(') {
output += stack.pop();
output += ' ';
}
stack.pop(); // Remove the '('
} else if (ch != ' ') { // Ignore spaces
output += ch;
}
}
// Pop remaining operators from stack
while (stack.length != 0) {
output += stack.pop();
output += ' ';
}
return output.trim();
}
function getPrecedence(ch) {
if (ch == '+' || ch == '-') {
return 1;
} else if (ch == '*' || ch == '/') {
return 2;
} else {
return 0;
}
}
function convertExpression() {
var infix = document.getElementById('infix').value;
var result = convertToPostfix(infix);
document.getElementById('postfix').value = result;
}
</script>
</head>
<body>
<h1>Infix to Postfix Converter</h1>
<p>This converter converts an infix expression to a postfix expression.</p>
<form>
Infix Expression: <input type="text" id="infix" placeholder="e.g., 3+4*2">
<input type="button" value="Convert" onclick="convertExpression()">
<br><br>
Postfix Expression: <input type="text" id="postfix" readonly>
</form>
</body>
</html>
Algorithm Explanation
The Shunting-yard algorithm processes the infix expression character by character:
Operands: Directly added to the output
Operators: Pushed to stack based on precedence rules
Left parenthesis '(': Pushed to stack
Right parenthesis ')': Pop operators until matching '(' is found
Example Conversion
Let's trace through the conversion of "3+4*2":
// Step-by-step conversion example
let infix = "3+4*2";
console.log("Converting:", infix);
function traceConversion(infix) {
let output = "";
let stack = [];
console.log("Input:", infix);
console.log("Step | Char | Stack | Output");
console.log("-".repeat(30));
for (let i = 0; i = '0' && ch 0 && getPrecedence(ch) 0) {
output += stack.pop();
}
console.log("Final result:", output);
}
function getPrecedence(ch) {
if (ch == '+' || ch == '-') return 1;
if (ch == '*' || ch == '/') return 2;
return 0;
}
traceConversion(infix);
Converting: 3+4*2 Input: 3+4*2 Step | Char | Stack | Output ------------------------------ 1 | 3 | | 3 2 | + | + | 3 3 | 4 | + | 34 4 | * | +* | 34 5 | 2 | +* | 342 Final result: 342*+
Application of Infix to Postfix converter
This converter can be used to convert complex infix expressions to postfix expressions. This is particularly helpful in:
Compiler design and expression evaluation
Calculator implementations
Mathematical expression parsing
Stack-based programming languages
Conclusion
The infix to postfix converter using the Shunting-yard algorithm efficiently transforms mathematical expressions. This implementation handles operator precedence and parentheses correctly, making it suitable for real-world applications.
