Signatur
Beschreibung
Math.hypot() berechnet √(x₁² + x₂² + … + xₙ²). Mit zwei Argumenten ist das die Länge der Hypotenuse eines rechtwinkligen Dreiecks (Satz des Pythagoras). Bei beliebig vielen Argumenten erhält man die euklidische Norm (Länge) eines n-dimensionalen Vektors.
Im Alltag nutzt man die Methode vor allem für Abstandsberechnungen: den Abstand zweier Punkte auf einem Canvas, die Distanz zwischen Maus- oder Touch-Positionen, die Länge von Geschwindigkeitsvektoren in Spielen oder die Normalisierung von Vektoren in 2D/3D-Grafik.
Gegenüber der Handrechnung Math.sqrt(x*x + y*y) hat Math.hypot() einen Vorteil: Die Implementierung vermeidet Überlauf und Unterlauf bei Zwischenergebnissen. Math.sqrt(1e200 * 1e200) ergibt Infinity, Math.hypot(1e200) dagegen korrekt 1e200.
Alle Argumente werden in Zahlen umgewandelt. Ohne Argumente gibt die Methode 0 zurück. Da hypot eine statische Methode von Math ist, ruft man sie immer als Math.hypot() auf.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $...values | number | Beliebig viele Zahlen (auch keine). Andere Werte werden per Number() umgewandelt. Das Vorzeichen spielt keine Rolle, weil alle Werte quadriert werden. |
Rückgabewert
0. Ist ein Argument ±Infinity, kommt Infinity heraus. Andernfalls ergibt sich NaN, wenn ein Argument NaN ist oder sich nicht in eine Zahl umwandeln lässt.Beispiele
Grundlagen: Hypotenuse und Sonderfälle
console.log(Math.hypot(3, 4)); // klassisches 3-4-5-Dreieck
console.log(Math.hypot(3, 4, 5)); // 3D-Vektor
console.log(Math.hypot(-5)); // Betrag einer Zahl
console.log(Math.hypot()); // keine Argumente
console.log(Math.hypot(1, 'abc')); // nicht umwandelbar
console.log(Math.hypot(NaN, Infinity)); // Infinity hat VorrangAbstand zwischen zwei Punkten (z. B. Klick-Positionen)
const distance = (a, b) => Math.hypot(b.x - a.x, b.y - a.y);
const start = { x: 10, y: 20 };
const ende = { x: 70, y: 100 };
console.log(distance(start, ende));
// Praxis: Drag erst ab 5 px Bewegung auslösen
const isDrag = (from, to, threshold = 5) => distance(from, to) >= threshold;
console.log(isDrag({ x: 0, y: 0 }, { x: 3, y: 3 }));Vektor normalisieren (Spiele, Grafik)
const normalize = (vec) => {
const len = Math.hypot(...vec);
return len === 0 ? vec.map(() => 0) : vec.map((v) => v / len);
};
const velocity = [6, 8];
console.log(normalize(velocity));
console.log(Math.hypot(...normalize([1, 2, 2])));Kein Überlauf bei großen Werten
const big = 1e200;
console.log(Math.sqrt(big * big + big * big)); // Zwischenergebnis läuft über
console.log(Math.hypot(big, big)); // korrekt// Wichtig · Fallstricke
- Leistung:
Math.hypot()ist in manchen Engines langsamer alsMath.sqrt(x*x + y*y), weil sie Überlauf vermeidet und beliebig viele Argumente annimmt. In sehr häufig ausgeführtem Code mit kleinen Werten, z. B. Kollisionsprüfungen, kann die Handrechnung schneller sein. Für reine Abstandsvergleiche reicht oft sogar das Quadrat des Abstands ganz ohne Wurzel. - Genauigkeit: Die Rundung hängt von der Implementierung ab. Die Ergebnisse können sich zwischen Engines im letzten Bit unterscheiden. Vergleiche Ergebnisse deshalb nicht mit
===, sondern mit einer Toleranz wieNumber.EPSILON. - Spread bei großen Arrays:
Math.hypot(...riesigesArray)kann die maximale Zahl an Argumenten überschreiten und einenRangeErrorauslösen. Bei sehr großen Datenmengen summierst du besser selbst in einer Schleife. - Typumwandlung:
Math.hypot('3', '4')ergibt5. EinBigIntals Argument löst dagegen einenTypeErroraus. - Unterschied zu
Math.abs(): Mit einem Argument verhält sichMath.hypot(x)wieMath.abs(x). - Kompatibilität: Wird seit ES2015 in allen modernen Browsern und in Node.js unterstützt. Der Internet Explorer kennt die Methode nicht.