Math.hypot() 함수란?
Math.hypot() 메서드는 인수로 전달된 값들을 각각 제곱한 뒤, 그 합의 제곱근을 반환하는 자바스크립트 내장 함수입니다. 수학적으로 표현하면 √(a² + b²) 형태로, 직각삼각형의 두 변의 길이를 인수로 전달하면 빗변(hypotenuse)의 길이를 손쉽게 구할 수 있습니다. 이름의 'hypot'도 바로 'hypotenuse(빗변)'에서 유래한 것입니다.
문법(Syntax)
Math.hypot(arg1, arg2, ...);
예제 1: 직각삼각형의 빗변 구하기
다음 예제에서는 직각삼각형의 두 변을 인수로 전달하여 빗변의 길이를 계산합니다. 참고로, 숫자로 변환할 수 없는 값이 인수에 포함되면 NaN(Not a Number)이 출력됩니다.
<html>
<body>
<script>
document.write(Math.hypot(7, 24));
document.write("</br>");
document.write(Math.hypot(7, "hi"));
</script>
</body>
</html>출력 결과
25 NaN
첫 번째 호출에서는 7과 24의 제곱합(49 + 576 = 625)의 제곱근인 25가 반환되었습니다. 반면 두 번째 호출에서는 문자열 "hi"를 숫자로 변환할 수 없어 NaN이 출력된 것을 확인할 수 있습니다.
예제 2: 음수 값 처리
이 메서드는 음수 값도 인수로 받을 수 있습니다. 음수를 제곱하면 양수가 되기 때문에, 부호와 관계없이 모든 인수의 제곱합에 대한 제곱근을 계산해 줍니다.
<html>
<body>
<script>
document.write(Math.hypot(-7, -24));
document.write("</br>")
document.write(Math.hypot(-3, -4))
</script>
</body>
</html>출력 결과
25 5
음수를 전달했지만 양수를 넣었을 때와 동일한 결과가 나오는 것을 볼 수 있습니다. 즉, Math.hypot()은 좌표평면에서 원점까지의 거리처럼 방향과 무관한 거리 값을 계산할 때 특히 유용합니다.
예제 3: 세 개 이상의 인수 사용하기
Math.hypot()은 두 개뿐만 아니라 세 개 이상의 임의 개수의 인수도 받을 수 있으며, 모든 인수의 제곱합에 대한 제곱근을 반환합니다. 이를 활용하면 3차원 공간에서 벡터의 크기를 계산하는 것도 간단해집니다.
<html> <body> <script> document.write(Math.hypot(1, 2, 3)); </script> </body> </html>
출력 결과
3.74165738677
정리
Math.hypot()은 단순히 Math.sqrt(a*a + b*b)로 대체할 수도 있지만, Math.hypot()을 사용하면 값이 매우 크거나 작을 때 발생할 수 있는 오버플로우(overflow)나 언더플로우(underflow) 문제를 방지할 수 있다는 장점이 있습니다. 따라서 거리 계산, 벡터 크기 산출 등 정밀한 수학 연산이 필요한 상황에서 Math.hypot()을 사용하는 것이 권장됩니다.