Introduction to Square Root in JavaScript
Javascript is a frontend scripting language that renders in the browser and is found in all webapps and websites that we see on the internet today. It is so widely used that all browsers are by default, Javascript compatible. We can simply say that no web app or website can exist without Javascript, and it has evolved through several years to support complex functionalities webapps provide today. For example, it supports arithmetic operations like summation, multiplication, division, subtraction, square, square root, and so on. In this tutorial, let’s explore how Javascript can be used to find the square root of a number with examples.
To begin with, let’s recap the basic definition of the Square root mathematic operation. In easy words, the Square root of a number is a number which when multiplied by itself gives the number. The square root is used is several formulas and is pre-requisite in the understanding functions like 2nd-degree equations for functioning and graphing, a Pythagorean theorem in trigonometry, fractional exponents for functions and graphing, irrational numbers and real numbers.
For example, the square root of 9 is 3 because 3 X 3 is 9. Similarly, the square root of 25 is 5 since 5 x5 is 25.
Now let’s convert the above mathematical equation into a Javascript code.
Javascript uses the Math object for a variety of mathematical operations. This has many properties and functions to perform a variety of arithmetic and algorithmic operations. Among the many arithmetic functions it provides, we can use it’s sqrt() method to find the sqrt() of the number supplied to it.
Syntax of the sqrt() function:
Math.sqrt(value)Input Parameter: the sqrt function accepts a number whose square root is to be found as a parameter.
Output: If the parameter is provided in the right format, the function will return a number which when multiplied by itself would give the parameter value, else it would provide a variety of responses that we will explore in the tutorial ahead.
Examples of Square Root in JavaScript
Let’s see the example below where we are creating an HTML paragraph with the id as “myDiv” and we will be assigning various square root value to it with Javascript:
Input : Math.sqrt(36)
Output : 6
Input : Math.sqrt(-36)
Output : NaNThough the sqrt() method is very easy to use, we will have to put additional effort into handling exceptions in case if the input parameter is provided in the wrong format.
For instance, if we pass a non-numeric instance the sqrt() function will return a NaN object.
<!DOCTYPE html>
<html>
<body>
<p id="myDiv"></p>
<script>
document.getElementById("myDiv").innerHTML = Math.sqrt("string");
</script>
</body>
</html>The output of the above code will be display as NaN in the browser window :
When we pass an array with more than one number, the function returns a NaN response as shown below:
<!DOCTYPE html>
<html>
<body>
<p id="myDiv"></p>
<script>
document.getElementById("myDiv").innerHTML = Math.sqrt([9,16]);
</script>
</body>
</html>The output of the above code will display NaN value on browser window:
But the sqrt() function will return the right response if we provide an array with a single-digit parameter as shown below :
<!DOCTYPE html>
<html>
<body>
<p id="myDiv"></p>
<script>
document.getElementById("myDiv").innerHTML = Math.sqrt([9]);
</script>
</body>
</html>The output of the above code will be displayed as 3 in the browser window:
When provided a negative number, the sqrt() function returns a NaN object.
<!DOCTYPE html>
<html>
<body>
<p id="myDiv"></p>
<script>
document.getElementById("myDiv").innerHTML = Math.sqrt(-9);
</script>
</body>
</html>The output of the above code will be displayed as NaN in the browser window:
When an empty parameter is passed, the sqrt() function returns a NaN object.
<!DOCTYPE html>
<html>
<body>
<p id="myDiv"></p>
<script>
document.getElementById("myDiv").innerHTML = Math.sqrt();
</script>
</body>
</html>The output of the above code will be:
When passed an empty array, the sqrt() function returns a 0 value
<!DOCTYPE html>
<html>
<body>
<p id="myDiv"></p>
<script>
document.getElementById("myDiv").innerHTML = Math.sqrt([]);
</script>
</body>
</html>The output of the above code will be:
However, the sqrt() function works well when a decimal number is provided as an input parameter.
<!DOCTYPE html>
<html>
<body>
<p id="myDiv"></p>
<script>
document.getElementById("myDiv").innerHTML = Math.sqrt(2.56);
</script>
</body>
</html>The output of the above code displayed on the browser will be as follows:
Now let us understand and execute the code spec in our browser.
We will first create a file called “sqrt_demo.html” and save it in a folder called “sqrt_demo”.
Our file will contain the HTML code and the Javascript code.
<!DOCTYPE html>
<html>
<body>
<p id="myDiv"></p>
<script>
document.getElementById("myDiv").innerHTML = Math.sqrt(2.56);
</script>
</body>
</html>We can now load this file by typing it’s the exact location in the browser window to review its output.
Other than the sqrt() function, the Math object also has 2 properties that can help us derive the square root of specific numbers.
Let’s review them below with examples:
Math.SQRT1_2: This property returns the square root of ½ which approximately comes to 0.707.
Example :
<!DOCTYPE html>
<html>
<body>
<p id="myDiv"></p>
<script>
document.getElementById("myDiv").innerHTML = Math.SQRT1_2;
</script>
</body>
</html>The output of the above code displayed on the browser will be :
In the above example, instead of printing the value of Math.sqrt() we have printed Math.SQRT1_2 which would show as 0.7071067811865476 on the browser window.
Math.SQRT2: This property returns the square root of 2 which approximately comes to 1.414.
Example :
<!DOCTYPE html>
<html>
<body>
<p id="myDiv"></p>
<script>
document.getElementById("myDiv").innerHTML = Math.SQRT2;
</script>
</body>
</html>The output of the above code displayed on the web browser will be :
In the above example, instead of printing the value of Math.sqrt() we have printed Math.SQRT2 which would show as 1.414 on the browser window.
Other than the square root function like sqrt(), there are several other complex functions implemented in Javascript. The functions help to implement complex calculations easily as they are readily supplied by javascript itself. This saves the developer’s time and increases their productivity by helping them develop more code in less time. It is also one of the main reasons why javascript is so popular that it is not only a frontend language anymore but with NodeJS it has also become a backend language where it can achieve all operations that can be achieved with traditional programming languages like Php, Java, Python, Go and so on.