JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのMath.abs()メソッドで絶対値を求める方法【初心者向け】

この記事では、JavaScriptのMathオブジェクトを使って、入力された数値の絶対値を求める方法を解説します。

まずおさらいですが、絶対値とは数値から符号（プラス・マイナス）を取り除いた値のことです。すべての数値を0以上の値として扱い、その値をそのまま返します。Mathオブジェクトの絶対値メソッドを使用する際の基本構文は以下のとおりです。

Math.abs(inputVal);

Mathオブジェクトを利用するため、先頭には必ず「Math」と記述します。絶対値を求めるメソッドは「abs」（absolute valueの略称）です。続く丸括弧（）の中に引数として渡した値に対してメソッドが実行され、その結果として絶対値が返されます。

<!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">Enter a number:</label>
     <input id="absolute-value" onchange=handleChange(event) type="text" name="absolute-value" value=""/>
     <input type="submit" value="Submit" />
   </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.abs()メソッドを使って数値の絶対値を求める方法をご紹介しました。シンプルなメソッドですが、金額計算や距離の算出など、実際の開発でもよく使われる便利な機能です。さらに学習を進めたい方は、以下の関連記事も参考にしてみてください。

  • JavaScriptで乱数を生成する方法：完全ガイド
  • JavaScript parseInt()：ステップバイステップガイド
  • JavaScriptカウントダウンタイマーの作り方：チュートリアル
  • JavaScript toString()メソッドの使い方
  • JavaScript toUpperCase()とtoLowerCase()の使い方
  1. JavaScriptのオブジェクトメソッドとは？使い方とサンプルコードを解説

    JavaScriptにおけるオブジェクトメソッドとは、オブジェクトに対して実行できる操作（アクション）のことです。オブジェクトは文字列や数値などのデータ（プロパティ）だけでなく、関数を値として持つことができ、この関数が「メソッド」として機能します。メソッド内では this キーワードを使用することで、そのオブジェクト自身が持つプロパティへアクセスできます。これは、オブジェクト指向プログラミングにおいて非常に重要な概念です。オブジェクトメソッドのサンプルコード以下は、ユーザーの入力した名前と年齢から、成人かどうかを判定するメソッドを持つオブジェクトを作成する例です。<!DOCTYPE ht

  2. JavaScriptにおけるオブジェクトの分割代入（Destructuring）の使い方

    JavaScriptでは、分割代入（Destructuring）と呼ばれる構文を使うことで、オブジェクトから特定のプロパティを簡単に取り出し、個別の変数に代入することができます。従来の方法では、obj.firstName のようにプロパティへ一つずつアクセスする必要がありましたが、分割代入を使えば1行で簡潔に記述できます。オブジェクトの分割代入の基本構文基本的な書き方は以下の通りです。let { プロパティ名1, プロパティ名2, プロパティ名3 } = オブジェクト;波括弧 {} の中に取り出したいプロパティ名を列挙するだけで、同名の変数にそれぞれの値が代入されます。実装例以下は、オブジェク