JavaScript Math 객체로 절댓값 구하기: Math.abs() 완벽 가이드

이 글에서는 JavaScript의 Math 객체를 사용해 입력된 값의 절댓값(absolute value)을 구하는 방법을 알아봅니다.

절댓값이란?

절댓값은 숫자의 부호를 무시한 값입니다. 즉, 어떤 수가 음수든 양수든 항상 0 이상의 값으로 변환하여 반환합니다. 예를 들어 -5의 절댓값은 5이고, 5의 절댓값 역시 5입니다.

Math.abs() 기본 문법

Math 객체의 절댓값 메서드는 abs이며, 사용 문법은 다음과 같습니다.

Math.abs(inputVal);

Math 객체의 메서드이기 때문에 Math로 시작하고, 절댓값 메서드는 약어인 abs를 사용합니다. 괄호 안에 전달된 입력값에 대해 메서드가 호출되며, 그 결과로 해당 값의 절댓값이 반환됩니다.

실전 예제 코드

아래는 사용자가 입력한 숫자의 절댓값을 화면에 출력하는 완전한 HTML 예제입니다.

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>repl.it</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
   <form onsubmit=handleSubmit(event)>
     <label for="absolute-value">숫자를 입력하세요:</label>
     <input id="absolute-value" onchange=handleChange(event) type="text" name="absolute-value" value=""/>
     <input type="submit" value="제출" />
   </form>
 
   <h3 id="root"></h3>
 
   <script>
     let inputVal = ""
 
     const handleChange = e => {
       inputVal = e.target.value;
       console.log(inputVal)
     }
     const handleSubmit = e => {
       e.preventDefault();
       const root = document.querySelector("#root");
       root.innerHTML = Math.abs(inputVal);
     }
     const inputValue = document.getElementById("absolute-value").value
   </script>
 </body>
</html>

입력값에 따른 반환 결과

Math.abs()는 입력값의 타입에 따라 다음과 같이 동작합니다.

문자열을 입력하면 NaN(Not a Number)을 반환합니다.
null 값을 입력하면 0을 반환합니다.
양수 또는 음수를 입력하면 당연히 그 절댓값인 양수를 반환합니다.

마무리

지금까지 Math 객체의 Math.abs() 메서드를 활용해 숫자의 절댓값을 구하는 방법을 살펴보았습니다. 코드도 간단하고 실무에서 자주 쓰이는 만큼 꼭 익혀두세요. 아래 글들은 학습 방향을 잡는 데 도움이 될 것입니다.

JavaScript 랜덤 숫자 생성: 완벽 가이드
JavaScript parseInt: 단계별 가이드
JavaScript 카운트다운 타이머: 튜토리얼
JavaScript toString 메서드
JavaScript toUpperCase와 toLowerCase