JavaScript Math.hypot() Examples [In-Depth Tutorial]

The Math.hypot() method in JavaScript returns the square root of the sum of the squares of its arguments. This is useful when calculating the length of a vector, the distance between two points, or the magnitude of a complex number.

In this article, we will discuss how to make use of the Math.hypot() method with different examples.

---

Using the Math.hypot() method in JavaScript

Math.hypot() is a built-in function in JavaScript that calculates the square root of the sum of squares of its arguments, which represents the hypotenuse of a right-angled triangle. Here’s some information on how to use it and examples of practical applications:

Before we go, let’s see the syntax of the Math.hypot() method

Math.hypot(value1, value2, ..., valueN)

where value1, value2, ..., valueN are the values whose hypotenuse needs to be calculated.

Example 1: Calculating the length of a vector in 2D space

const x = 3;
const y = 4;
const length = Math.hypot(x, y);
console.log(length);

Output

5

In this example, we have a vector with a horizontal component of 3 and a vertical component of 4. We use the Math.hypot() method to calculate the length of the vector, which is 5.

Example 2: Calculating the distance between two points in 2D space

const x1 = 1;
const y1 = 2;
const x2 = 4;
const y2 = 6;
const distance = Math.hypot(x2 - x1, y2 - y1);
console.log(distance);

Output

5

In this example, we have two points with coordinates (1, 2) and (4, 6). We use the Math.hypot() method to calculate the distance between these two points, which is 5.

Example 3: Calculating the magnitude of a complex number

const real = 9;
const imag = 16;
const magnitude = Math.hypot(real, imag);
console.log(magnitude);

Output

18.35755975068582

In this example, we have a complex number with a real part of 9 and an imaginary part of 16. We use the Math.hypot() method to calculate the magnitude of the complex number, which is 18.36.

Example 4: Calculating the diagonal length of a rectangle or box

In geometry, the diagonal length of a rectangle or box is the hypotenuse of a right-angled triangle formed by its length, width, and height. You can use Math.hypot() to calculate the diagonal length of a rectangle or box.

// Given a rectangle with length 5 and width 7, calculate its diagonal length
let length = 5, width = 7;

let diagonalLength = Math.hypot(length, width);
console.log(diagonalLength); // Outputs 8.602325267042627

Example 5: Calculating the distance between multiple points

In 2D or 3D space, the distance between multiple points can be calculated by taking the hypotenuse of the right-angled triangle formed by the x, y, and z differences between each pair of points. You can use Math.hypot() in a loop to calculate the distance between multiple points.

// Given an array of points in 3D space, calculate the distance between each pair of points
let points = [  [5, 7, 2], // point 1
  [10, 3, 8], // point 2
  [2, 9, 4], // point 3
  [6, 1, 5] // point 4
];

for (let i = 0; i < points.length; i++) {
  for (let j = i + 1; j < points.length; j++) {
    let distance = Math.hypot(points[j][0] - points[i][0], points[j][1] - points[i][1], points[j][2] - points[i][2]);
    console.log(`Distance between point ${i+1} and point ${j+1}: ${distance}`);
  }
}

Example 6: Finding the distance between a point and a line

In geometry, the distance between a point and a line can be calculated using the formula d = |ax + by + c| / sqrt(a^2 + b^2), where a, b, and c are the coefficients of the equation of the line and x and y are the coordinates of the point. You can use Math.hypot() to calculate the square root in this formula.

// Given a line with equation 3x + 4y - 7 = 0 and a point (2, 5), calculate the distance between the point and the line
let a = 3, b = 4, c = -7; // coefficients of the equation of the line
let x = 2, y = 5; // coordinates of the point

let distance = Math.abs(a * x + b * y + c) / Math.hypot(a, b);
console.log(distance); // Outputs 2.17881914548534

Example 7: Calculating the maximum distance between points

In computer graphics, the maximum distance between points in a set is used to determine the size of a bounding box that encloses the set. You can use Math.hypot() in a loop to calculate the distance between each pair of points and keep track of the maximum distance.

// Given an array of points in 2D space, calculate the maximum distance between any pair of points
let points = [
  [1, 2], // point 1
  [3, 4], // point 2
  [5, 6], // point 3
  [7, 8] // point 4
];

let maxDistance = 0;
for (let i = 0; i < points.length; i++) {
  for (let j = i + 1; j < points.length; j++) {
    let distance = Math.hypot(points[j][0] - points[i][0], points[j][1] - points[i][1]);
    if (distance > maxDistance) {
      maxDistance = distance;
    }
  }
}
console.log(maxDistance); // Outputs 7.745966692414

---

Summary

The Math.hypot() method in JavaScript is a convenient way to calculate the length of a vector, the distance between two points, or the magnitude of a complex number. It takes any number of arguments and returns the square root of the sum of their squares. By using this method, we can simplify our code and make it easier to read and understand.

---

References

Math.hypot() - JavaScript | MDN (mozilla.org)