Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What is Less than Operator (<) in JavaScript?
The less than operator is one of the operators that come under the category of binary operators, which means it requires two operands to operate on. It will return true if the operand on the left side of the operator is less than the operand on the right side. Otherwise, it will return false. The less than operator come under the category of comparison operators that compare two values with each other. In this tutorial, we are going to discuss what is less than an operator in JavaScript and how it works in different situations, with help of code examples.
Syntax
The following syntax will show how we can use the less than operator to check which operand is smaller out of the two operands −
val1 < val2 // it will return true if val1 is small, else return false.
Let us understand the working of the less than operator practically by implementing it inside a code example.
Algorithm
Step 1 − In the first step of the algorithm, we will define two input elements with the number type to get both inputs from the user in the form of numbers.
Step 2 − In the next step, we will define a button that will show the result of the less than operator to the user once it is clicked by the user as it contains the onclick event with a call-back function associated with it.
Step 3 − In the third step, we will declare the call-back function that will be used by the onclick event of the button declared in the previous step.
Step 4 − In the last step, we will grab the inputs entered by the user inside the input bars using the value property and then convert them into the number using the Number() method, after that we will operate the less than operator on these inputs.
Example 1
The below example will show you the working of the less than the operator in the case when both the inputs are in the form of numbers −
<!DOCTYPE html> <html> <body> <h2> Less than Operator (<) in JavaScript </h2> <p> Enter two numbers below to perform less than operation </p> <input type = "number" id = "inp1" value = 22> <br> <br> <input type = "number" id = "inp2" value = 33 > <p> Click to see the result of less than Operator (<) of above two numbers. </p> <p id = "result"></p> <button onclick = "display()"> Show Result </button> <script> var result = document.getElementById("result"); function display() { var inp1 = document.getElementById("inp1"); var val1 = Number(inp1.value); var inp2 = document.getElementById("inp2"); var val2 = Number(inp2.value); var rem = val1 < val2; result.innerHTML += " <b> Is " + val1 + " less than " + val2 + " : " + rem + " </b> <br> "; } </script> </body> </html>
In the above example, we have seen that the less than operator works as expected. Because it is returning true if the left operator is smaller than the right operator else it is returning false.
Let us see one more example where a number will be compared with a string.
Algorithm
The algorithm of this example is almost similar to the previous one. You just need to change the type of any one input element to the text and remove the Number() method on the value of that particular input.
Example 2
The example below illustrates the working of the less than operator if the inputs are of different datatypes, i.e. number and string −
<!DOCTYPE html> <html> <body> <h2> Less than Operator (<) in JavaScript </h2> <p> Enter two numbers:</p> <input type = "text" id = "inp1" value = 2> <br> <br> <input type = "number" id = "inp2" value =3> <p> Click to see the result of less than Operator (<) of above two inputs. </p> <p id = "result"></p> <button onclick = "display()"> Show Result </button> <script> var result = document.getElementById("result"); function display() { var inp1 = document.getElementById("inp1"); var val1 = inp1.value; var inp2 = document.getElementById("inp2"); var val2 = Number(inp2.value); var rem = val1 < val2; result.innerHTML += val1 + " < " + val2 + " : " + rem + " </b> <br> "; } </script> </body> </html>
In this example, we can clearly see that when a string number is input by the user the less than operator behaves the same as in case of numbers, but if a name of a long string is input by the user, then it returns false.
Let us see one more example, where a string will be compared with a string using the less than operator.
Algorithm
Algorithms of the previous and this example are similar. You just need to do some minor changes like change the type of both the input elements to text and remove the Number() method on both the input values.
Example 3
Below example will explain the behaviour of the less than operator, if both the inputs are in the form of strings −
<!DOCTYPE html> <html> <body> <h2> Less than Operator (<) in JavaScript </h2> <input type = "text" id = "inp1"> <br> <br> <input type = "text" id = "inp2"> <p> Click to see the result of less than Operator (<) of above two inputs. </p> <p id = "result"></p> <button onclick = "display()"> Show Result </button> <script> var result = document.getElementById("result"); function display() { var inp1 = document.getElementById("inp1"); var val1 = inp1.value; var inp2 = document.getElementById("inp2"); var val2 = inp2.value; var rem = val1 < val2; result.innerHTML += " Result of less than operator, when a string <b> " + val1 + " </b> is compared with another string <b> " + val2 + " </b> is: <b> " + rem + " </b> <br> "; } </script> </body> </html>
In the above example, the less than operator behaves same as in the case of numbers if the input is a string number. But it behaves unexpectedly, if both the inputs are strings, because it compares the string with the Unicode code values contained by them.
In this tutorial, we have learned about the less than operator in JavaScript and see the behaviour of the less than operator in different scenarios with help of different code examples for each of these situations to understand them better.
303 Views
