Finding the mid of an array in JavaScript

Javascript Web Development Front End Technology

An Array in JavaScript is datatype which is used to store homogeneous elements. These elements are stored at contiguous memory locations. We can access each data element in the array with the help of index numbers. The index numbers will start from 0.

Syntax

Following is the syntax of creating a JavaScript array −

const array_name = [item1, item2, ...];

The following is the simple declaration of array in JavaScript.

Const Body = ['Eyes', 'Nose', 'Lips', 'Ears'];

Finding the mid element of an array

We are required to write a JavaScript program that finds the middlemost element of an array. To understand this better let us see some input output scenarios −

Input output scenarios

We have two scenarios in finding the mid element of an array. one is if the array elements are odd numbered in total and if the elements are in even number.

Assume we have an array and odd numbered elements in it. Now we need to find the middle element of the array.

Input = [1, 3, 7, 10, 17, 18, 33, 45, 99] 
Output = 17

Now let’s assume the second scenario where the elements in array are in even number of total. In this case, the middle element will be 2 elements.

Input = [1, 3, 7, 10, 17, 18, 33, 45] 
Output = 10, 17

There are two different ways to find the middle element of an array, let us look at them one by one −

Example 1

Array having odd elements

In the following example, we have declared an array with odd number of elements in it. We created a user defined function mid to return the middle element of the array. This function will check whether array elements are even or odd.

If the number of elements in the given array is odd, a single element is returned as a middle value and If the number of elements is even two elements are considered as middle values.


<!DOCTYPE html> 
<html>  
<head> 
   <title>Mid Element of array having odd number of elements</title>
   <button onClick = "func()">Click </button> 
   <p id = "para"> </p> 
   <script> 
      const array = [1, 3, 7, 10, 17, 18, 33, 45, 99]; 
      function func(){ 
         function mid(array, index){ 
            while(array[index]){ 
               return mid(array, ++index); 
            }; 
            return index % 2 !== 0 ? [array[(index-1) / 2]] : [array[(index/2)-1], array[index/2]]; 
         }; 
         document.getElementById("para").innerHTML = "Mid of the given array is: " + mid(array, index = 0); 
      }; 
   </script> 
</head> 
</html>

Example 2

Array having even elements

In the example below, we have created an array with even number of elements in it. With user defined it will check the array elements are even or odd. Since elements in the array are even numbered, it will print 2 elements as the middle elements.


<!DOCTYPE html> 
<html>  
<head>
   <title>Mid Element of array having odd number of elements</title> 
   <button onClick = "func()">Click </button> 
   <p id = "para"> </p> 
   <script> 
      const array = [1, 3, 7, 10, 17, 18, 33, 45]; 
      function func(){ 
         function mid(array, index){ 
            while(array[index]){ 
               return mid(array, ++index); 
            }; 
            return index % 2 !== 0 ? [array[(index-1) / 2]] : [array[(index/2)-1], array[index/2]]; 
         }; 
         document.getElementById("para").innerHTML = "Mid of the given array is: " + mid(array, index = 0); 
      }; 
   </script> 
</head> 
<body> 
</body> 
</html>

Example 3

In this example below, we have created an array with odd elements and a button. To that button we have added a onClick event and calculated the middle element in the array. so, when the button is clicked, we get the middle element of the array.


<!DOCTYPE html> 
<html> 
<center>
<head> 
   <title>Mid Element of array</title> 
   <style> 
      .button { 
         background-color: MediumSeaGreen; 
         border: none; 
         color: white; 
         padding: 15px 32px; 
         text-align: center; 
         text-decoration: none; 
         display: inline-block; 
         font-size: 16px; 
         margin: 2px 2px; 
         cursor: pointer;   
      } 
   </style> 
</head>  
<body> 
   <div> 
      <button class = "button">Mid of array</button> 
      <p> Click the above button to get the mid element of array </p> 
   </div> 
   <script> 
      let btn = document.querySelector('button'); 
      let result = document.querySelector('p'); 
      let array = ['RRR', 'KGF', 'Bahubali', 'Pushpa', 'Dangal']; 
      btn.addEventListener('click', () => { 
         let mid_element = (array.length - 1) / 2; 
         result.innerHTML = array[mid_element]; 
      }); 
   </script> 
</body> 
</center> 
</html>