Binary Search in TypeScript

In this article I will explain what is searching and how to use a binary search in TypeScript with an example.

Searching

 
Searching is the process of attempting to find a particular object in a collection. There are two possible results of searching. First, the object exists in the collection and second, the object does not exist in the collection. We can search anywhere, as in any file, any page, any webpage, etc. There are two types of searching:
  • Linear Search
  • Binary Search

Binary Search

 
A Binary Search is a way to search. It is difficult to compare to a linear search, and it's faster than a linear search. A Binary Search is also called a Half-Interval Search. It works on the Break & Search Concept.
 
In a Binary Search, the Key element is matched to the middle element of an array, if it matches then the value and index is returned; on other hand, if the Key element is less than the middle element of the array then it searches again in the left portion of the array and if the Key element is greater then it searches in the right portion of the array.
 
Example
 
The following example describes how to use a Binary Search in TypeScript. The following code implements a Binary Search which is used to determine whether a given element is present in an array and if it is present then at what location it occurs. It is very simple and works as follows.
 
Step 1
 
Open Visual Studio 2012 and click on "File" menu -> "New" -> "Project". A window is opened. Provide the name of your application, like "Binary_Search", then click on the Ok button.
 
Step 2
 
After Step 1 your project has been created. Solution Explorer, which is at the right side of Visual Studio, contains the js file, ts file, CSS file, and HTML files.
 
Step 3
 
Binary_Search.ts
  1. class Binary_Search  
  2. {  
  3.  search()  
  4.  {  
  5.   var c, first, last, middle, n, search;  
  6.   var x;  
  7.   var array: number[] = [30];  
  8.   n = parseInt(prompt("Enter how many elements you want: \n"));  
  9.   for (c = 0; c < n; c++)  
  10.    array[c] = parseInt(prompt("Enter " + n + " integers"));  
  11.   for (x = 0; x < n; x++)  
  12.   {  
  13.    var span = document.createElement("span");  
  14.    span.style.color = "Green";  
  15.    span.innerText = "Enter " + x + " Element -> " + array[x] + "\n";  
  16.    document.body.appendChild(span);  
  17.   }  
  18.   search = parseInt(prompt("Enter value to search\n"));  
  19.   first = n;  
  20.   last = 1;  
  21.   do  
  22.   {  
  23.    middle = Math.floor((last + first) / 2);  
  24.    if (search < array[middle])  
  25.     first = middle - 1;  
  26.    elseif(search > array[middle])  
  27.    last = middle + 1;  
  28.   }  
  29.   while (search != array[middle] && last <= first)  
  30.   if (search == array[middle])  
  31.   {  
  32.    var x = middle + 1;  
  33.    var span = document.createElement("span");  
  34.    span.style.color = "Blue";  
  35.    span.innerText = "\nBinary search successfull!!\n" + search + " Found in at Position: " + x + "\n";  
  36.    document.body.appendChild(span);  
  37.   } else  
  38.   {  
  39.    alert("\n  Search failed" + search + " not found\n" + search);  
  40.   }  
  41.  }  
  42. }  
  43. window.onload = () =>  
  44.  {  
  45.   var greeter = new Binary_Search();  
  46.   greeter.search();  
  47.  };  
BinarySearch.html
  1. <!DOCTYPEhtml>  
  2. <htmllang="en"  
  3.     xmlns="http://www.w3.org/1999/xhtml">  
  4.     <head>  
  5.         <metacharset="utf-8"/>  
  6.         <title>Binary Search</title>  
  7.         <linkrel="stylesheet"href="app.css"type="text/css"/>  
  8.         <scriptsrc="app.js">  
  9.         </script>  
  10.     </head>  
  11.     <body>  
  12.         <h2>Binary Search in TypeScript</h2>  
  13.         <divid="content"/>  
  14.     </body>  
  15. </html>  
app.js
  1. var Binary_Search = (function() {  
  2.  function Binary_Search() {}  
  3.  Binary_Search.prototype.search = function() {  
  4.   var c;  
  5.   var first;  
  6.   var last;  
  7.   var middle;  
  8.   var n;  
  9.   var search;  
  10.   var x;  
  11.   var array = [  
  12.    30  
  13.   ];  
  14.   n = parseInt(prompt("Enter how many elements you want: \n"));  
  15.   for (c = 0; c < n; c++) {  
  16.    array[c] = parseInt(prompt("Enter " + n + " integers"));  
  17.   }  
  18.   for (x = 0; x < n; x++) {  
  19.    var span = document.createElement("span");  
  20.    span.style.color = "Green";  
  21.    span.innerText = "Enter " + x + " Element -> " + array[x] + "\n";  
  22.    document.body.appendChild(span);  
  23.   }  
  24.   search = parseInt(prompt("Enter value to search\n"));  
  25.   first = n;  
  26.   last = 1;  
  27.   do {  
  28.    middle = Math.floor((last + first) / 2);  
  29.    if (search < array[middle]) {  
  30.     first = middle - 1;  
  31.    } else {  
  32.     if (search > array[middle]) {  
  33.      last = middle + 1;  
  34.     }  
  35.    }  
  36.   } while (search != array[middle] && last <= first)  
  37.   {  
  38.   }  
  39.   if (search == array[middle]) {  
  40.    var x = middle + 1;  
  41.    var span = document.createElement("span");  
  42.    span.style.color = "Blue";  
  43.    span.innerText = "\nBinary search successfull!!\n" + search + " Found in at Position: " + x + "\n";  
  44.    document.body.appendChild(span);  
  45.   } else {  
  46.    alert("\n  Search failed" + search + " not found\n" + search);  
  47.   }  
  48.  };  
  49.  return Binary_Search;  
  50. })();  
  51. window.onload = function() {  
  52.  var greeter = new Binary_Search();  
  53.  greeter.search();  
  54. };  
Output 1
 
Enter how many elements in the array you want and then click on ok:
 
Enter-element.jpg
 
Output 2
 
Enter the elements in ascending order:
 
element-0.jpg
 
element-1.jpg
 
element-2.jpg
 
element-3.jpg
 
element-4.jpg
 
Output 3
 
Then enter a value to be searched for:
 
enter-search-num.jpg
 
Output 4
 
If the specified number is present in the array then at what location does it occur?
 
final-result.jpg
 
Output 5
 
And if the specified number does not exist in the array then:
 
Error-message0.jpg
 
Error-message1.jpg