【JavaScript】Math.abs()で指定した数値の絶対値を取得する!

受講料が完全無料!

・プログラミンを始めようとしている方
・未経験だけどIT業界に転職したいと思っている方

今なら、EngineersGateの受講料が完全無料!

大手企業案件の実績多数のエンジニアが直接指導してくれるため未経験の方でも最短3週間で就職が可能です!

まずはお問合せから!

(この記事は2023年05月11日に投稿されました。)

JavaScriptで数値の絶対値を取得する方法として、Math.abs()があります。

Math.abs()とは、指定した値の絶対値を取得するメソッドになります。

絶対値を取得するため、Marh,abs()は指定した値の絶対値を返すようになります。

また、絶対値を取得することで符号が+になるため、正の数負の数関係なく演算方法を統一することができるようになります。

以上のことから、JavaScript上で指定した値の絶対値を取得したい場合はMath.abs()を使用するようにしましょう。

今回はJavaSCriptのMath.abs()で指定した数値の絶対値を取得する方法について紹介していきます。

この記事はこんな方におすすめ
・指定した値の絶対値を取得したい場合
・対象の数値との差分を求めたい場合




Math.abs()とは

Math.abs()とは指定した数値の絶対値を取得するメソッドになります。

そもそも絶対値とは指定した数値が0からどれだけ離れているかを示す値となります。

そのため、正の数負の数関係なくどちらとも正の数となります。

Math.abs()の書き方

Math.abs()の書き方は下記のようになります。

Math.abs()と記述し、括弧の中に必須の引数を1つ追記すると使用することができます。

Math.abs()の引数

Math.abs()の引数は下記のようになります。

  1. 数値(必須):
    絶対値を取得したい数値を指定する

Math.abs()は必須な引数として「数値」」を指定します。

Math.abs()の返り値

Math.abs()の返り値は、指定した数値の絶対値となります。

Math.abs()で指定した数値の絶対値を取得するサンプルコード

Math.abs()で指定した数値の絶対値を取得するサンプルコードについてご紹介します。

ここでは、下記の4つのパターンでMath.abs()を使用します。

  1. 引数の数値が整数である場合
  2. 引数の数値が浮動小数点数である場合
  3. 引数の数値が非数である場合
  4. 引数の数値が無限大である場合

引数の数値が整数である場合

引数の数値が整数である場合にMath.abs()を使用すると、指定した値の絶対値を返すようになります。

● main.js

実行結果

引数の数値が整数である場合にMath.abs()で数値の絶対値を取得した結果

Math.abs()によって、指定した数値の絶対値を取得しています。

今回は「45」と「-45」の整数であるため、どちらも「45」が表示されています。

引数の数値が浮動小数点数である場合

引数の数値が浮動小数点数である場合にMath.abs()を使用すると、こちらも指定した値の絶対値を返すようになります。

● main.js

実行結果

引数の数値が浮動小数点数である場合にMath.abs()で数値の絶対値を取得した結果

Math.abs()によって、指定した数値の絶対値を取得しています。

今回は「4.555」と「-4.555」の浮動小数点数であるため、どちらも「4.555」が表示されています。

引数の数値が非数である場合

引数の数値が非数である場合にMath.abs()を使用すると、「NaN」を返すようになります。

● main.js

実行結果

引数の数値が非数である場合にMath.abs()で数値の絶対値を取得した結果

Math.abs()によって、指定した数値の絶対値を取得しています。

今回は「NaN」と「0 / 0」の非数であるため、どちらも「NaN」が表示されています。

引数の数値が無限大である場合

引数の数値が無限大である場合にMath.abs()を使用すると、「Infinity」を返すようになります。

● main.js

実行結果

引数の数値が無限大である場合にMath.abs()で数値の絶対値を取得した結果

Math.abs()によって、指定した数値の絶対値を取得しています。

今回は「Infinity」と「-Infinity」の無限大であるため、どちらも「Infinity」が表示されています。

Math.abs()で引数に数値以外の値を指定して使用する場合

実は数値以外の値を指定しても、数値に変換された上で絶対値を取得します。

しかし、値によっては数値に変換できず、「NaN」を返してしまうため、注意が必要です。

そのためここでは、数値以外の下記4パターンでMath.abs()を使用します。

  1. 引数が文字列である場合
  2. 引数がブーリアンである場合
  3. 引数がイテレータである場合
  4. 引数がnullである場合

引数が文字列である場合

引数が文字列である場合にMath.abs()を使用すると、文字列型の数値は絶対値を返します。

しかし、それ以外の文字列を指定すると、「NaN」を返します。

● main.js

実行結果

引数が文字列である場合にMath.abs()で数値の絶対値を取得した結果

Math.abs()によって、数値以外の値を指定し、絶対値を取得しています。

「文字列の絶対値」は数値に変換できないため、「NaN」が表示されています。

しかし、「456.789」の文字列は数値に変換できるため、「456.789」が表示されています。

引数がブーリアンである場合

引数がブーリアンである場合にMath.abs()を使用すると、ブーリアンの絶対値を返します。

● main.js

実行結果

引数がブーリアンである場合にMath.abs()で数値の絶対値を取得した結果

Math.abs()によって、数値以外の値を指定し、絶対値を取得しています。

そのため、trueの場合は「1」を、falseの場合は「0」が表示されています。

引数がイテレータである場合

引数がイテレータである場合にMath.abs()を使用すると、単数項目の場合は値の絶対値を返します。

しかし、複数項目の場合は「NaN」を返します。

● main.js

実行結果

引数がイテレータである場合にMath.abs()で数値の絶対値を取得した結果

Math.abs()によって、数値以外の値を指定し、絶対値を取得しています。

[1234]の単数項目は数値に変換できるため、「1234」が表示されています。

また、[1234, 567.345]の複数項目は数値に変換できないため、「NaN」が表示されています。

引数がnullである場合

引数がnullである場合にMath.abs()を使用すると、「0」を返します。

● main.js

実行結果

引数がnullである場合にMath.abs()で数値の絶対値を取得した結果

Math.abs()によって、数値以外の値を指定し、絶対値を取得しています。

nullは数値に変換できますが何もないため、「0」が表示されています。

Math.abs()でイテレータの値の絶対値を一気に取得する場合

Math.abs()でイテレータの値の絶対値を一気に取得する場合はforEach()やmap()を使用します。

forEach()とは指定したイテレータの値に対して順番に処理を行うメソッドになります。

また、map()とは元の配列から新たな配列を作成するメソッドになります。

そのため、どちらとも処理の最中にMath.abs()を使用することで、イテレータの値の絶対値を一気に取得することができます。

forEach()内にMath.abs()を使用する場合

forEach()内にMath.abs()を使用してイテレータの値の絶対値を一気に取得する場合は下記のようになります。

● main.js

実行結果

forEach()を使用してMath.abs()でイテレータの値の絶対値を一気に取得した結果

forEach()内でMath.abs()を使用することで、イテレータの値の絶対値を一気に取得しています。

そのため、配列内にある要素の絶対値を1つずつ取り出しています。

また、forEach()を多重で使用することで、多次元配列内にある要素の絶対値を1つずつ取り出しています。

もし、forEach()について詳しく知りたい場合は下記の記事をご参考ください。

map()内にMath.abs()を使用する場合

map()内にMath.abs()を使用してイテレータの値の絶対値を一気に取得する場合は下記のようになります。

● main.js

実行結果

map()を使用してMath.abs()でイテレータの値の絶対値を一気に取得した結果

map()内でMath.abs()を使用することで、イテレータの値の絶対値を一気に取得しています。

そのため、配列内にある要素の絶対値を配列として作成しています。

また、map()を多重で使用することで、多次元配列内にある要素の絶対値を多次元配列として作成しています。

もし、map()について詳しく知りたい場合は下記の記事をご参考ください。

Math.abs()を使用した実際のケース

Math.abs()を使用した実際のケースについてご紹介します。

1〜150の数字をランダムで5つ取得し、それらの値が100に近ければ近いほどスコアが高くなり、一番スコアが高い点数を表示するようなプログラムを作成します。

また、100との差が大きいほどマイナスになる点数も大きくなります。

● main.js

実行結果

Math.abs()を使用しして一番スコアが高い点数を表示するプログラムを作成した結果

Math.abs()によって一番スコアが高い「82」が表示されています。

また、1から150までの数字をランダムで取得するため、数字が足りなかったり、オーバーしたりすることがあります。

そのため、ここでは100とプラスとマイナスの差を絶対値として取得し、計算式を統一するためにMath.abs()を使用しています。

まとめ

⚫︎ Math.abs()とは指定した数値の絶対値を取得するメソッドである

⚫︎ Math.abs()を使用するには下記の引数を指定する
・数値(必須)

⚫︎ 引数の数値が整数である場合にMath.abs()を使用すると絶対値を取得する

⚫︎ 引数の数値が浮動小数点数である場合にMath.abs()を使用すると絶対値を返す

⚫︎ 引数の数値が非数である場合にMath.abs()を使用すると「NaN」を返す

⚫︎ 引数の数値が無限大である場合にMath.abs()を使用すると「Infinity」を返す

⚫︎ 引数が文字列である場合にMath.abs()を使用すると、数値の文字列だと絶対値を返すが、それ以外は「NaN」を返す

⚫︎ 引数がブーリアンである場合にMath.abs()を使用すると、絶対値を返す
(trueは「1」でfalseは「0」)

⚫︎ 引数がイテレータである場合にMath.abs()を使用すると、単数項目だとその値の絶対値を返すが、複数項目だと「NaN」を返す

⚫︎ 引数がnullである場合にMath.abs()を使用すると、「0」を返す

⚫︎ forEach()かmap()でMath.abs()を使用することで、イテレータの値の絶対値を一気に取得することができる

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です