Blog

Find Square Root in JavaScript

Mathematical operations are crucial in programming, enabling complex calculations and problem-solving. Square roots, a fundamental concept, have various applications in science, engineering, and finance. This blog focuses on calculating the square root in JavaScript, providing practical examples and insights to help you understand and implement this essential function in your projects.

Understanding Square Roots

A square root of a number is a value that, when multiplied by itself, gives the original number. For example, the square root of 9 is 3, as 3 × 3 = 9.

Calculating Square Root in JavaScript

JavaScript provides the Math object, a built-in object with various mathematical functions and constants. One of its methods, Math.sqrt(), is specifically designed to calculate the square root of a number. The syntax for using Math.sqrt() is straightforward: Math.sqrt(number). For example, Math.sqrt(25) returns 5, and Math.sqrt(16) returns 4. This method simplifies the process of finding square roots, making it easy to integrate mathematical calculations into your JavaScript programs.

Examples of Square Root in JavaScript

Example 1: Calculating the Square Root of a Positive Number

let number = 36;
let squareRoot = Math.sqrt(number);
console.log(squareRoot); // Output: 6

This example calculates the square root of 36, which is 6.

Example 2: Handling Non-Perfect Squares

let number = 20;
let squareRoot = Math.sqrt(number);
console.log(squareRoot); // Output: 4.47213595499958

For non-perfect squares like 20, the result is a decimal value.

Example 3: Edge Cases (Zero and Negative Numbers)

// Zero
let numberZero = 0;
console.log(Math.sqrt(numberZero)); // Output: 0

// Negative Number
let numberNegative = -9;
console.log(Math.sqrt(numberNegative)); // Output: NaN

The square root of zero is 0, while negative numbers return NaN (Not-a-Number) in JavaScript.

Javascript Program to find the Square Root of Negative Numbers

<!DOCTYPE html>
<html>
<head>
	<title>Square Root Calculator</title>
	<style>
		body {
			font-family: Arial, sans-serif;
		}
		h1 {
			text-align: center;
		}
		form {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		input {
			margin: 10px;
			padding: 5px;
			width: 200px;
			font-size: 16px;
		}
		button {
			padding: 10px;
			font-size: 16px;
		}
		#result {
			margin-top: 20px;
			font-size: 18px;
			font-weight: bold;
		}
	</style>
</head>
<body>
	<h1>Square Root Calculator</h1>
	<form>
		<label for="number">Enter a number:</label>
		<input type="number" id="number" placeholder="e.g. 25" required>
		<button type="button" onclick="calculateSquareRoot()">Calculate</button>
	</form>
	<div id="result"></div>

	<script>
		// Function to calculate square root
		function calculateSquareRoot() {
			// Get the input value from the user
			let number = document.getElementById("number").value;
			// Get the result div
			let resultDiv = document.getElementById("result");
			
			// Check if the input is a negative number
			if (number < 0) {
				// Display error message
				resultDiv.textContent = "Square root of negative numbers is not defined.";
			} else {
				// Calculate the square root using Math.sqrt() method
				let squareRoot = Math.sqrt(number);
				// Display the result
				resultDiv.textContent = "The square root of " + number + " is " + squareRoot;
			}
		}
	</script>
</body>
</html>

Explanation of the Code

1. HTML Structure:

  • <h1>: Displays the title “Square Root Calculator”.
  • <form>: Contains an input field for the number and a button to trigger the calculation.
  • <div id=”result”>: An empty div where the result or error message will be displayed.

2. CSS Styling:

  • Styles the body, heading, form, input, button, and result div to improve appearance and layout.

3. JavaScript Function:

  • calculateSquareRoot(): Retrieves the input value, checks if it’s negative, calculates the square root if non-negative, and updates the result div with the outcome or an error message.

Output:

Find Square Root in JavaScript Using Newton’s method

<!DOCTYPE html>
<html>
<head>
  <title>Find Square Root Using Newton's Method</title>
  <style>
    body {
      font-family: sans-serif;
    }
    input[type="number"] {
      width: 200px;
      padding: 10px;
      font-size: 16px;
    }
    button {
      padding: 10px;
      font-size: 16px;
      cursor: pointer;
    }
    #result {
      margin-top: 20px;
      font-size: 18px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1>Find Square Root Using Newton's Method</h1>
  <p>Enter a number to find its square root:</p>
  <input type="number" id="input" placeholder="Enter a number">
  <button onclick="findSquareRoot()">Find Square Root</button>
  <div id="result"></div>

  <script>
    // function to find square root using Newton's method
    function findSquareRoot() {
      // get input value from user
      let input = document.getElementById("input").value;
      // convert input to a number
      let number = Number(input);
      // initialize guess as half of the input number
      let guess = number / 2;
      // loop until the difference between guess and actual square root is less than 0.0001
      while (Math.abs(guess * guess - number) > 0.0001) {
        // calculate new guess using Newton's method
        guess = (guess + number / guess) / 2;
      }
      // display the result
      document.getElementById("result").innerHTML = `The square root of ${number} is ${guess}`;
    }
  </script>
</body>
</html>

Explanation of the code:

This HTML document provides an interactive interface to calculate the square root of a number using Newton’s method.

  1. HTML Structure:
    • <input>: Allows users to enter a number.
    • <button>: Triggers the calculation when clicked.
    • <div id=”result”>: Displays the result.
  2. CSS Styling:
    • Styles input, button, and result for better appearance.
  3. JavaScript Function (findSquareRoot()):
    • Retrieves and converts user input to a number.
    • Initializes the guess to half of the input number.
    • Iteratively updates the guess using Newton’s method until the difference between guess * guess and the input is less than 0.0001.
    • Displays the final result in the result div.

Output:

Real-life applications of finding the square root of a number in JavaScript

Finding the square root of a number has several real-life applications in JavaScript programming. Here are a few examples:

  1. Financial Calculations: In finance, the square root function can be used to calculate volatility or standard deviation of investment returns. For instance, when analyzing risk, you might use the square root of variance to determine the standard deviation of stock prices.
  2. Game Development: In gaming, the square root is often used for calculating distances between objects. For example, when determining the distance between two points on a 2D or 3D plane, the square root function helps in computing the Euclidean distance, which is crucial for character movements and collision detection.
  3. Graphics and Visualization: In graphics programming, the square root function can be used for rendering and scaling calculations. For instance, when resizing images or scaling graphics, the square root may be used to maintain aspect ratios and proportions accurately.
  4. Engineering and Simulation: Engineers often use the square root function for calculations related to physics simulations, such as calculating forces, accelerations, and other parameters that involve quadratic relationships.
  5. Algorithm Optimization: In algorithms involving binary search or other computational problems, we use square roots to optimize and determine time complexity. For example, algorithms that work on square matrices might use square roots to determine matrix dimensions and optimize performance.

In conclusion, calculating square roots in JavaScript is essential for various real-life applications, from financial analysis and game development to graphics and engineering simulations. Utilize built-in functions like `Math.sqrt()` or implement methods like Newton’s to enhance your projects. Experiment with these techniques for hands-on learning and explore Newtum’s user-friendly blogs and courses on programming languages like Java, HTML, and C. Engage in programming activities, continue your learning journey, and enjoy your coding endeavors. Happy coding!

About The Author

Manoj Kolhe

I have more than 6 years of experience in the IT industry, and I have built a solid foundation in the creation and upkeep of online applications. I have constantly shown strong work ethics, self-motivation, and an aptitude for learning quickly throughout my career.

See author's posts

Leave a Reply